[BUG]: I cannot have reliable way of positioning title and legend on top without overlapping each other

Description

As plotly is responsive there's currently no way to place both legend and title on the top of the chart so that title and legend do not overlap (seems legend doesn't take into account title/subtitle). I know I have some tools which can help (like setting top margin/playing with y/maxheight/yref) but all of them aren't reliable as resizing the window (thus resizing the chart)/having long trace names/etc breaks all hardcoded configurations.

Steps to reproduce

Here's the demo: https://python-fiddle.com/examples/plotly?checkpoint=1757947390
Code behind it:

import plotly.express as px

df = px.data.gapminder().query("year==2007")
fig = px.scatter(df, x="gdpPercap", y="lifeExp", color="continent",
    size="pop", size_max=45, log_x=True)

fig.update_layout(legend=dict(
    orientation="h",
    entrywidth=70,
    yanchor="bottom",
    y=1.02,
    xanchor="center",
    x=1
))

fig.update_layout(title="Very long loong long long long title")

fig.show()

Notes

I'm posting python code here intentionally as I think this is the basic issue of the plotly.js rather than lack of configuration/bugs in Python wrapper.

Bắt đầu với bản tái hiện Python-Fiddle được liên kết và theo dõi hành vi bố cục responsive của plotly.js đối với tiêu đề dài và chú giải ngang. Xác nhận kết quả bằng cách thay đổi kích thước biểu đồ và thay đổi độ dài của trace-name; hoàn tất khi tiêu đề và chú giải không chồng lấn mà không cần khoảng cách hardcoded, với một kiểm tra hồi quy bao quát bản tái hiện.