Fix heatmap rendering in Chrome and Safari

[silverwind]

Apparently SVG inside flexbox renders slightly different across browsers where Firefox would stretch to fit the parent while Chrome and Safari wouldn't. Stretch the SVG to the width of the parent for consistent rendering.

Also did a few minor tweaks on the min-height of the box so it takes up less space on smaller responsive breakpoints.

Fixes: #13634
Fixes: #13637

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

still getting small heatmaps in chromium and no heatmaps below 1200w with this.

[silverwind]

Must be cached. Try clearing browser cache or start with RUN_MODE=dev.

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

Must be cached. Try clearing browser cache or start with RUN_MODE=dev.

cleared cache multiple times, cleared site data in browser, reloaded gitea in dev mode.
still small and hidden below 1200w.

edit: let me rebuild gitea once more

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

alright now this works for me fine and also scales well just as presented.

what is the advantage of hardocoding more values, though, e.g. compared to #13637 ?

[silverwind]

The static min-height values are necessary if we want to prevent the page from jumping after load, I see no way around it because CSS can't know beforehand how big the SVG will render.

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

The static min-height values are necessary if we want to prevent the page from jumping after load, I see no way around it because CSS can't know beforehand how big the SVG will render.

alright..
I still think the display: inline does the same thing and with style.
the only thing missing is the here-added min-heights so that it doesn't jump either.

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

noticed sth else though.
see what the titlebar does now along with the feed (where also heatmap is placed).

looks like it's shrinking preliminarily where it could still fit content, doesn't it?

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

liked this better aligned with inline

[silverwind]

This is absolutely positioned, display: inline on the parent wouldn't do anything.

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

This is absolutely positioned, display: inline on the parent wouldn't do anything.

not here but on the user-heatmap div and I think it's more elegant that way.
then this would not be needed.
but if it works, it works.

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

works fine for me.

[silverwind]

I still think the display: inline does the same thing and with style.

Not sure why you persist on inline, it's just not meant for non-text content and thing like min-height would not work on it because that works only on block-level (you need line-height for inline elements at which point you're just enlarging one "text line" with no text on it).

see what the titlebar does now along with the feed (where also heatmap is placed).

I can't reproduce that one and it's certainly not related here.

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

I still think the display: inline does the same thing and with style.

Not sure why you persist on inline, it's just not meant for non-text content and thing like min-height would not work on it because that works only on block-level (you need line-height for inline elements at which point you're just enlarging one "text line" with no text on it).

see my comment above.
basically boils down to - do what you think is best.

see what the titlebar does now along with the feed (where also heatmap is placed).

I can't reproduce that one and it's certainly not related here.

no, it's a separate issue but I think may also be affecting the feed column, of which heatmap is a part.
as a whole it might look even better once that is fixed.
just noticed it now, would need investigation.

[silverwind]

This should be good to go.

[techknowlogick]

🚀