tfaour/espresso_frame
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Fix Layout tab canvas not rendering on mobile
Build and push server image / test (push) Successful in 20s
Details
Build and push server image / build-and-push (push) Successful in 1m58s
Details

Browse Source 
The placement canvas sized itself with CSS aspect-ratio plus
percentage widths/heights on the widget boxes. aspect-ratio isn't
supported on every mobile browser this app gets viewed from, and
without it a percentage height on an absolutely-positioned child
collapses to 0 against an indeterminate-height ancestor -- the canvas
rendered with no visible size at all, just unstyled labels and
buttons floating in normal document flow. Confirmed working on
desktop, broken on the reporter's phone.

Canvas and widget-box geometry is now computed and applied in pixels
from JS (measuring the wrap's own width, deriving height from the
grid's row/col ratio), recalculated on window resize. Also gives
.widget-box's color-mix() background a plain-color fallback for the
same class of older-browser gap.
This commit is contained in:
tfaour
2026-07-24 13:08:09 -04:00
parent 5d4bb53b8a
commit 77fe78d874
2 changed files with 62 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/app/static/theme.css
+9 -7
View File
@@ -323,24 +323,26 @@ button.secondary:hover { background: var(--surface-alt); }
.info-box.warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
#widget-canvas-wrap {
--grid-cols: 8;
--grid-rows: 5;
/* Height is set in px by frame_layout.js (measured wrap width * rows/cols)
-- not CSS aspect-ratio, which isn't supported on every mobile browser
this app gets viewed from, and percentage heights on the widget boxes
below would silently collapse to 0 against an indeterminate-height
ancestor if it weren't. Box positions/sizes are likewise set in px by
JS, not CSS percentages, for the same cross-browser reason. */
width: 100%;
max-width: 640px;
aspect-ratio: var(--grid-cols) / var(--grid-rows);
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: 10px;
background-color: var(--surface-alt);
background-image:
linear-gradient(to right, var(--border) 1px, transparent 1px),
linear-gradient(to bottom, var(--border) 1px, transparent 1px);
background-size: calc(100% / var(--grid-cols)) calc(100% / var(--grid-rows));
background-repeat: repeat;
}
#widget-canvas { position: relative; width: 100%; height: 100%; }
.widget-box {
position: absolute;
box-sizing: border-box;
border: 2px solid var(--accent);
background: var(--surface-alt); /* fallback for browsers without color-mix() support */
background: color-mix(in srgb, var(--accent) 14%, var(--surface));
border-radius: 6px;
display: flex;