Alex_M/KX-Bridge-Release
1
0
Fork 0
forked from viewit/KX-Bridge-Release
Code Pull Requests Activity

fix(dashboard): tile resize clipping and phantom scrollbars (Issue #97)

Browse Source 
Two dashboard tile CSS issues reported after resizing tiles in the
GridStack-based dashboard:

1. Shrinking the Progress tile's height clipped the lower content
   (time grid, filename, buttons) out of the visible area instead of
   making it scale or scroll - #card-progress had no flex layout, so
   its fixed-size children just overflowed silently under the generic
   overflow:auto rule. Applied the same display:flex;flex-direction:
   column pattern already used for #card-camera, with flex-shrink:0
   on the direct children so the container can properly scroll instead
   of hiding content off-screen.

2. Tiles could show a scrollbar even with nothing to scroll, from
   sub-pixel horizontal overflow under the blanket
   overflow-y:auto/overflow-x:hidden rule (was overflow:auto covering
   both axes) - split it so only vertical scroll is offered, which is
   the only axis dashboard content actually needs.

Verified visually via Playwright: resizing the progress tile to
h=2/h=4 no longer clips content, and a fan-card resize with
scrollHeight==clientHeight now shows no scrollbar.
This commit is contained in:
viewit
2026-07-24 15:13:19 +02:00
parent 16c1a8ee73
commit 33b42e64cc
2 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/themes/default/style.css
View File

@ -108,7 +108,7 @@ main{flex:1;overflow-y:auto;padding:20px}
GridStack's resize-handle hit area and drag listeners. */
/* Doc pattern: the card fills its cell; content scrolls if the user resizes
the cell smaller than the content needs. */
.grid-stack-item-content>.card{width:100%;height:100%;margin:0;overflow:auto;box-sizing:border-box}
.grid-stack-item-content>.card{width:100%;height:100%;margin:0;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}
/* .card:hover{transform:translateY(-1px)} creates a new containing block right
as the user starts dragging, throwing off GridStack's position math. Kill
the hover transform for dashboard cards specifically. */
@ -164,6 +164,11 @@ main{flex:1;overflow-y:auto;padding:20px}
.cam-toggle:hover{background:rgba(0,0,0,.7)}
/* ── PROGRESS ── */
/* Same pattern as #card-camera above: without this, shrinking the tile's
height just clips the lower content (time-grid/filename/buttons) outside
the visible area instead of making it scrollable (Issue #97). */
.grid-stack-item-content>#card-progress{display:flex;flex-direction:column;min-height:0}
.grid-stack-item-content>#card-progress>*{flex-shrink:0}
.hero-info{display:flex;flex-direction:column;gap:12px}
.pct-big{font-size:52px;font-weight:700;line-height:1;color:var(--txt)}
.pct-big small{font-size:20px;font-weight:400;color:var(--txt2)}