public_git/bambuddy
1
0
Fork 0
mirror of https://github.com/maziggy/bambuddy.git synced 2026-10-22 03:49:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(label-picker): pack templates into a 2x2 grid so all 4 plus Cancel fit on tight viewports (issue #1230)

Browse Source 
The earlier `min-h-0` fix on the spool list (61314cf2) made the
  shrinkable child shrinkable, but on @elit3ge's 838px viewport the
  four stacked templates (~310px) plus footer still blew past
  max-h-[90vh] once Brave's browser chrome ate into vh, and
  overflow-hidden on the modal clipped Avery 5160 mid-row with the
  Cancel button entirely below the clipped bottom edge — no scroll
  path. The screenshot showed the spool list at ~5 visible rows with
  its own scrollbar still active, confirming the templates section's
  natural height was the dominant problem, not the spool list.

  Templates now render as a responsive grid (grid-cols-1
  sm:grid-cols-2 gap-2) so the four buttons pack into a 2x2 grid
  above the sm breakpoint, trimming ~150px of vertical. Per-cell
  padding tightens to p-2.5, labels/hints get text-sm + truncate,
  and the full strings are reachable via title="<label> — <hint>"
  on each button. Footer drops py-3 to py-2 for a few extra pixels.
  The min-h-0 on the spool list is kept as a belt-and-braces shrink
  for any viewport tighter still. Mobile (<sm) keeps the stacked
  layout — no regression there.
This commit is contained in:
maziggy
2026-05-08 07:27:35 +02:00
parent 20fa8fbfdc
commit 4c0a12b95e
8 changed files with 91 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+2 -2
View File
@@ -26,8 +26,8 @@
<!-- Splash screens for iOS -->
<link rel="apple-touch-startup-image" href="./img/android-chrome-512x512.png" />
<script type="module" crossorigin src="./assets/index-DVU9Hr5-.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-C6s72Emh.css">
<script type="module" crossorigin src="./assets/index-BofTUuqf.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CacBES2t.css">
</head>
<body>
<div id="root"></div>