fix(dashboard): tile resize clipping and phantom scrollbars (Issue #97)
All checks were successful
Nightly Build / build (push) Successful in 7m25s
All checks were successful
Nightly Build / build (push) Successful in 7m25s
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:
@@ -5,3 +5,4 @@
|
||||
- Fix: **printing via OrcaSlicer "Upload and print" failed (or fed the wrong spool) when a slot below the used filament was empty** — e.g. printing with Filament 4 while slot 3 was empty. The generated AMS slot mapping inserted a placeholder pointing at the physically empty tray, which the printer rejects. Placeholders now point at a loaded tray instead. Printing with all slots full already worked and is unchanged.
|
||||
- Fix: manually assigning a filament profile to an ACE slot could crash the MQTT callback (`'list' object has no attribute 'get'`) when the printer rejected the assignment, e.g. for custom-RFID/third-party filament. The bridge now handles the printer's failure response cleanly instead of crashing, and the log now correlates a rejected assignment with the request that triggered it (slot/type/color) so a rejection reason can be diagnosed from bridge logs alone (Issue #100, thanks @Blaim)
|
||||
- Fix: **the camera stream could hang forever after a printer reboot** — the printer rotates its stream token on reboot, but the running ffmpeg processes kept reading from the stale, now-silent connection and never noticed. The bridge now detects the URL change and automatically restarts the camera pipeline, ffmpeg itself now times out on a stalled read as a second line of defense, and `/api/camera/stream` now returns a proper 503 instead of hanging if no frame arrives within 5s (Issue #99, thanks @fmontagna for the excellent root-cause analysis and reproduction)
|
||||
- Fix: shrinking the Progress dashboard tile below its default height clipped the lower content (time grid, filename, buttons) out of view instead of scaling with it; dashboard tiles in general could show a scrollbar even when there was nothing to scroll. Both fixed (Issue #97, thanks @Blaim)
|
||||
|
||||
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user