Improve docs-site UI/UX + mobile/tablet responsiveness (bao.builders) - #37
Merged
Conversation
Targeted fixes to the bao.builders download page, verified with a new Playwright proof script (scripts/docs-ui-proof.ts) at mobile (390px), tablet (768px), and desktop (1280px) — all pass: no horizontal overflow, all OS tabs visible. Responsive: - OS tab selector: repeat(3, minmax(10rem,1fr)) forced a 30rem row that overflowed into horizontal scroll on phones (tabs hidden behind a swipe). Switch to minmax(0,1fr) + min-w-0 so Windows/macOS/Linux always fit one row; drop the max-content mobile override that caused the scroll. Wrap tab labels in .tab-label (ellipsis safeguard). - Tablet nav: show the inline nav at md (was lg) so tablets get real nav links instead of a hamburger; hamburger shrinks to md:hidden. - Tabpanel top padding pt-10 -> pt-6 sm:pt-10 (less dead space on phones). - Hero h1: add sm:text-5xl step for a smoother size ramp. - viewport-fit=cover for notched devices. A11y / best practice: - Nav link touch targets h-10 -> h-11 (44px, WCAG 2.5.5). - Release-card sha row now wraps (flex-wrap) and the hash code is max-width:100% instead of a fixed 12rem, so it never overflows narrow cards. - scroll-padding-top 5rem -> 5.5rem to clear the taller (sm) navbar. - Dark theme-color meta for prefers-color-scheme: dark browser chrome. Adds scripts/docs-ui-proof.ts (portable; serves dist/docs-site or proofs a TARGET= live URL) and exits non-zero on overflow / hidden-tab regression. Co-authored-by: Brandon Donnelly <d4551@users.noreply.github.com>
Rewrite to follow the repo's proof-script conventions so `biome lint .` passes: - mapSequential (recursive) instead of await-in-for-of (noAwaitInLoops). - page.evaluate (allowed) instead of page.$$eval (noPlaywrightEval). - domcontentloaded + locator.waitFor instead of networkidle/waitForTimeout. - writeOutput/writeError + artifactDir/resolveProofOutDir utils instead of console + hardcoded paths (noConsole, no-hardcoded-paths). - named NUM_ constants (noMagicNumbers). - awaited error writes (noFloatingPromises); no empty catch blocks. Co-authored-by: Brandon Donnelly <d4551@users.noreply.github.com>
The sun/moon icon sat off-center in the circular theme toggle. Root cause:
daisyUI `.swap` is `display:inline-grid` (centers children via
place-content:center + grid-column-start:1), but `.btn` is
`display:inline-flex`; on the same element `.btn` won, so the swap's
grid centering broke. Compounding that, the swap-on/off SVGs carried a
Tailwind `absolute` class, which pulled them out of grid flow — the
grid tracks collapsed to 0px and the 20px icon overflowed from the
cell's center point (a +10px,+10px offset).
Fix:
- Drop `absolute` from both swap SVGs so they size the grid track again.
- Add `header .swap.swap-rotate { display:inline-grid }` (higher
specificity than `.btn`) so the swap uses grid + place-content:center
and re-centers the icon.
Verified with Playwright on the local bundle and the live site: icon
center == button center (offset 0,0) at mobile (390px) and desktop
(1280px); toggle still flips corporate<->business with the correct
sun/moon opacity.
Co-authored-by: Brandon Donnelly <d4551@users.noreply.github.com>
- Replace 3 .catch(() => undefined) with .then(() => undefined, () => undefined)
(repo-sanctioned best-effort wait pattern, per scripts/utils/playwright-settle.ts);
validate:no-try-catch forbids Promise .catch handlers.
- Drop hand-rolled structural Page type; import { chromium, type BrowserContext,
type Page } from 'playwright' (inline type-imports, repo convention) to clear
no-unsafe-call / no-unsafe-member-access / consistent-type-imports.
- Type startLocalServer.stop as () => Promise<void> (server.stop() returns a
Promise) and await host.stop() in main to clear no-misused-promises and
noFloatingPromises without the banned void operator (lint/complexity/noVoid).
Co-authored-by: Brandon Donnelly <d4551@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Targeted UI/UX and mobile/tablet responsiveness improvements to the bao.builders download page (
docs/index.html), plus a reusable Playwright proof script. No framework or SSOT change — still daisyUIcorporate/business+ Tailwind v4 via the sharedpackages/client/assets/css/main.css.Problems fixed
.swapisinline-grid(centers children viaplace-content:center+grid-column-start:1) but.btnisinline-flex; on the same element.btnwon, so the swap's grid centering broke. The swap-on/off SVGs also carried a Tailwindabsoluteclass, pulling them out of grid flow — grid tracks collapsed to 0px and the 20px icon overflowed from the cell center (+10px,+10px offset). Fix: dropabsolutefrom both SVGs (so they size the grid track again) and addheader .swap.swap-rotate { display:inline-grid }(higher specificity than.btn) to restore grid centering. Verified: icon center == button center (offset 0,0) at mobile + desktop; toggle still flips corporate↔business with correct sun/moon opacity.repeat(3, minmax(10rem,1fr))forced a 30rem row that overflowed; the@media (max-width:767px)override setwidth: max-content, so Windows/macOS/Linux tabs were hidden behind a swipe. →minmax(0,1fr)+min-w-0so all three always fit one row; removed themax-contentoverride. Tab labels wrapped in.tab-label(ellipsis safeguard).hidden lg:flex; hamburgerlg:hidden. → Nav nowhidden md:flex, hamburgermd:hidden— tablets get real nav links.pt-10→pt-6 sm:pt-10.sm:text-5xlstep for a smoother ramp.h-10→h-11(WCAG 2.5.5)..release-shanowflex-wrap; hash codemax-width:100%(was fixed12rem).scroll-padding-top5rem → 5.5rem.prefers-color-scheme: darktheme-colormeta;viewport-fit=coverfor notched devices.Visual proof (Playwright, 3 viewports)
bun run scripts/docs-ui-proof.ts(local bundle) andTARGET=https://bao.builders/ bun run scripts/docs-ui-proof.ts(live) — both PASS at mobile (390px), tablet (768px), desktop (1280px): no horizontal overflow, all OS tabs visible. Theme-toggle centering measured at offset 0,0 on both local and live.Lint
scripts/docs-ui-proof.tsis lint-clean under the repo's strict gates:validate:no-try-catch(uses.then(() => undefined, () => undefined)perscripts/utils/playwright-settle.ts, not.catch), real Playwright types (import { chromium, type BrowserContext, type Page }), andPromise<void>-typed server stop (novoidoperator, no floating promises).bun run lintpasses (biome + eslint + typecheck).Deployed
Rebuilt
docs-site:bundle(16 files, 764 MiB — release binaries unchanged) and published topixie-ss1-ftp.porkbun.com/(bao.builders). Live site verified:index.htmlHTTP 200, manifest still 9 files / 3 platforms, theme-toggle icon centered (offset 0,0), toggle flips theme correctly.Notes
docs/index.html(tracked) +scripts/docs-ui-proof.ts(new, lint-clean) are committed.docs/assets/docs.generated.cssanddocs/releases/manifest.jsonstay gitignored (regenerated bybun run build:docs-site).