Scrolling Host Status Dashboard Widget is shifting Hostname at bottom of scroll area

[begunfx]

Drydock version

1.5.0-rc.1

What happened?

See image as reference. You'll see the hostname that's at the bottom is shifted position. This happens when the widget scrolls and the hostname hits that position. I've seen this behavior in other widgets as well (especially on mobile screens) (will post if I can find them again).

What did you expect?

read above

Steps to reproduce

read above

Relevant configuration

Logs

Installation method

Docker Compose

Docker version

24.0.1

OS / Architecture

Synology DSM 7

[begunfx]

Same behavior happens with other dashboard widgets (Updates Available) - this is more noticeable on Mobile screens when scrolling between widgets.

[s-b-e-n-s-o-n]

Thanks for the report — traced it to the scrollbar handling in the CSS.

Root cause

The global overflow: overlay override (style.css:498-508) is deprecated. Chrome 114+ treats overlay as auto, so scrollbars take up layout space instead of floating over content. When the scrollbar appears/disappears during scroll, it triggers a layout reflow that shifts the hostname and other content.

Fix

• Removed the deprecated @supports (overflow: overlay) block
• Added scrollbar-gutter: stable to all four dashboard widget scroll containers (Host Status, Recent Updates, Resource Usage, Security Overview)

scrollbar-gutter: stable reserves space for the scrollbar at all times, so content never shifts when the scrollbar appears or disappears. Ships in the next RC.

[s-b-e-n-s-o-n]

Reopening — this was closed without reporter confirmation that the fix actually works. Sorry about that.

[s-b-e-n-s-o-n]

This should be fixed in v1.5.0-rc.2. Please update and let us know if this resolves the issue for you.

[begunfx]

This has not been fixed. Still seeing this behavior. in v1.5.0-rc.2

[s-b-e-n-s-o-n]

Thanks for confirming this is still happening — the RC2 fix targeted the wrong layer.

What was actually happening: The RC2 fix added scrollbar-gutter: stable which addressed scrollbar-induced reflow in the Updates Available widget, but that wasn't the problem in Host Status. The real issue is that Host Status rows use items-center (vertical centering) with mixed-height children: a short status badge, a tall 3-line text block, and another short badge. When a row is only partially visible at the scroll edge, the centered badges get clipped first while the taller text block still shows — making it look like the hostname "shifted" even though the row position didn't change.

What we fixed for rc.3:

• Host Status rows now top-align (items-start) their children instead of center-aligning
• Both status badges are pinned with shrink-0 and mt-0.5 so they stay anchored with the first line of text
• Partially visible rows at the scroll edge now clip uniformly instead of hiding badges before text

This will ship in rc.3 — please verify once it's out.