doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix UPG-100 poster print-options row to wrap instead of stretch
Some checks are pending
build-gate / build (push) Waiting to run
Details

Browse source 
.pbtn had flex:1 + white-space:nowrap, forcing every print button to
stretch full-width and forbidding its label from wrapping — one very
wide button per line. Now .pfs wraps and .pbtn sizes to its own
content, so short labels sit two per row when they fit and long ones
wrap to their own line without stretching or clipping.
This commit is contained in:
doxa-maps-88655c70 2026-09-23 16:35:45 +00:00
parent 3ac4175e98
commit b71b4bbfa3
1 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
plugin-designs/my-upg-100-list/poster-wall.vue
View file

@ -593,18 +593,31 @@ useShadowStyles(
// SQUARED edges (not the rounded pill it replaced), and the SAME 82% width as
// the header tape so the two strips align as a matched pair top and bottom.
// Still narrower than the card itself, so its edge frames the artefact.
// Card footer WRAPS like text: two buttons sit side by side when they fit, one
// per line when they do not, and NEITHER stretches to fill the row just because
// it is alone on its line (2026-09-23). `flex:1` + `white-space:nowrap` on .pbtn
// used to force every button to the row's full width AND forbid its label from
// wrapping — together, one very wide button per line no matter how short the
// label. Three buttons went from short filler text to real labels ("Print a
// UPG-100 list" / "Print a UPG prayer poster" / "Print a UPG card deck"), which
// is what made the latent one-button-per-row problem visible. `.pfs` is no
// longer a flex row; it wraps, and each `.pbtn` sizes to its own content instead
// of the row.
'.pfs{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);' +
'width:82%;margin:0;padding:0 4px 3px;border:1px solid rgba(0,0,0,.14);' +
'border-radius:2px;background:#fff;display:flex;gap:2px;justify-content:center;' +
'box-shadow:0 1px 4px rgba(0,0,0,.10)}' +
'border-radius:2px;background:#fff;display:flex;flex-wrap:wrap;gap:2px 4px;' +
'justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.10)}' +
'.is-dark .pfs{background:#132019;border-color:rgba(110,231,183,.24)}' +
'.pfs > legend{margin:0 auto;padding:0 5px;font-size:8px;text-transform:uppercase;' +
'letter-spacing:.6px;font-weight:700;color:#8a93a0}' +
'.is-dark .pfs > legend{color:#7f9c8c}' +
// Buttons mirror .seg button: text-only with an underline accent on hover,
// not filled chips — the same restraint the header uses.
'.pbtn{position:relative;flex:1;border:0;background:none;color:#5b6672;font:inherit;' +
'font-size:10.5px;font-weight:600;padding:2px 6px 3px;cursor:pointer;white-space:nowrap;' +
// not filled chips — the same restraint the header uses. Content-sized (no
// flex:1), with a max-width so one very long label still wraps to two lines
// rather than pushing the button wider than the card.
'.pbtn{position:relative;flex:0 1 auto;max-width:100%;border:0;background:none;' +
'color:#5b6672;font:inherit;font-size:10.5px;font-weight:600;padding:2px 6px 3px;' +
'cursor:pointer;white-space:normal;text-align:center;line-height:1.25;' +
'transition:color .15s}' +
'.pbtn::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px;' +
'border-radius:2px;background:transparent;transition:background .15s}' +