Fix visual inconsistencies

Grandiras commented

2026-08-21 13:53:21 +00:00

Owner

Do a general visual polishing and information displayment pass on the app. Some nudges:

The flyouts from the bottom on mobile cast a shadow onto the nav bar, which makes it look elevated and looks odd
The upload files button on the profile page lacks styling
Some admin pages like the boards overview have alignment issues
Information display like explainers are often too verbose and a pure text form might not always be the best option

Do a general visual polishing and information displayment pass on the app. Some nudges: - The flyouts from the bottom on mobile cast a shadow onto the nav bar, which makes it look elevated and looks odd - The upload files button on the profile page lacks styling - Some admin pages like the boards overview have alignment issues - Information display like explainers are often too verbose and a pure text form might not always be the best option

claude-bot was assigned by Grandiras

2026-08-21 14:33:23 +00:00

claude-bot commented

2026-08-21 14:33:27 +00:00

Collaborator

🤖 On it — follow along in the action run; the reply will link the full session transcript.

📜 Live transcript — updating every ~5 minutes while the task runs.

🤖 On it — follow along in [the action run](https://git.grandiras.net/Grandiras/claude-bot/actions/runs/369); the reply will link the full session transcript.  📜 [Live transcript](https://git.grandiras.net/Grandiras/claude-bot/src/branch/claude-logs/transcripts/Grandiras/Ponente/issue-141/run-369.md) — updating every ~5 minutes while the task runs.

claude-bot referenced this issue from a commit

2026-08-21 15:50:46 +00:00

Visual polish: sheet shadows, native controls, admin alignment, notes

claude-bot referenced this issue from a pull request that will close it,

2026-08-21 15:51:19 +00:00

Claude: changes for issue #141 #143

claude-bot referenced this issue

2026-08-21 15:51:20 +00:00

Counts in the UI read "member(s)" / "card(s)" — four strings, both locales #144

claude-bot commented

2026-08-21 15:51:20 +00:00

Collaborator

Pushed to claude/issue-141.

What changed

Bottom sheets no longer cast a shadow on the nav bar. --shadow-lg is symmetric, and a sheet seated on the phone's bottom bar has exactly one strip of screen below it to cast on — so its lower half landed entirely on the bar, which is what made the bar read as tucked under the sheet. Added --shadow-sheet, the one asymmetric shadow in the file: same weight, no y below zero, on both the account menu and the board switcher.

The native controls wear the app's shape now. The colour input on /admin/tags was the last control still in the browser's own chrome (a grey bevelled rectangle on a page of soft rounded surfaces); the file picker on /profile had no styling at all. Both keep the real element and take their shape from the vendor pseudo-elements (::-webkit-color-swatch, ::file-selector-button) rather than being replaced — a hand-drawn control is one assistive tech has to be told about twice. Two more of the same kind found alongside: checkboxes and radios had three half-copies of one rule that had drifted apart, and .btn-primary/.btn-danger/.btn-secondary never set text-decoration: none, so the profile page's "Sign in again" arrived underlined.

The admin pages line up. .admin-page-title sits outside .admin-page (the sticky header is between them) and never repeated its 880px column, so every admin heading was ~280px left of the panel it heads. On the boards list, the links were a type size larger than the buttons beside them, and a row with a wide access label couldn't shrink its name field so its Delete hung out of line with the rest of the list. On a phone that row's five controls overflowed off the left edge — justify-content: flex-end doesn't wrap.

Explainers say less, and some stopped being paragraphs. .admin-note is a mark and one line for the things that report a state rather than describe a control — which is what let the access page's longest paragraph (164 chars, opening with three clauses establishing that nothing was wrong) become one sentence. The calendar's read-only promise moved out of the middle of a paragraph and became a chip beside the link. And the phone menu's three destinations got icons: they were the only rows in that sheet whose word began at its edge, so one list had two left margins.

Verified

dotnet build and dotnet test green (381 passing, DocumentationTests included).
New e2e assertions in mobile.spec.js (shadow offsets are all ≤ 0; every label in the sheet shares one left edge), board.spec.js (heading, board chip and panel share a left edge), access.spec.js (the chip, the dot, the row's controls one height and no overflow, and both kinds of note), calendar.spec.js (the read-only chip).
Playwright run locally against a dotnet run server on a fresh database: 73 passed, 3 failed — calendar.spec.js "a six-week month fits…" (reproduces identically on unmodified main here; it measures a 720px grid and this container's font metrics are 14px taller than the compose image's), calendar.spec.js "the month cascades in once" and i18n.spec.js "a stored choice beats an unsupported browser language" (both failed before I touched anything). access.spec.js's two-member tests and share.spec.js's origin assertion can't run here at all — no PDS container, and the origin is hard-coded to localhost:8090. The full suite still wants the compose stack.
Every screenshot above is the real app, before and after, on the same data.

Docs updated in the same commit: ui.md (the fifth thing that follows from the bar, the sheet's one row shape), frontend.md (a new Native form controls section and the note-versus-hint rule), boards-and-permissions.md (the access chip and the two notes), calendar.md and auth.md. One changelog bullet in both locales.

⏱ 77m 36s · 388 turns · tokens: 392.3k in / 116.8k out (+95303.2k cache-read)
📜 Full session transcript
→ Opened PR: #143
→ Filed follow-up issue #144: Counts in the UI read "member(s)" / "card(s)" — four strings, both locales

Pushed to **`claude/issue-141`**. ## What changed **Bottom sheets no longer cast a shadow on the nav bar.** `--shadow-lg` is symmetric, and a sheet seated on the phone's bottom bar has exactly one strip of screen below it to cast on — so its lower half landed entirely on the bar, which is what made the bar read as tucked *under* the sheet. Added `--shadow-sheet`, the one asymmetric shadow in the file: same weight, no `y` below zero, on both the account menu and the board switcher. **The native controls wear the app's shape now.** The colour input on `/admin/tags` was the last control still in the browser's own chrome (a grey bevelled rectangle on a page of soft rounded surfaces); the file picker on `/profile` had no styling at all. Both keep the real element and take their shape from the vendor pseudo-elements (`::-webkit-color-swatch`, `::file-selector-button`) rather than being replaced — a hand-drawn control is one assistive tech has to be told about twice. Two more of the same kind found alongside: checkboxes and radios had three half-copies of one rule that had drifted apart, and `.btn-primary`/`.btn-danger`/`.btn-secondary` never set `text-decoration: none`, so the profile page's "Sign in again" arrived underlined. **The admin pages line up.** `.admin-page-title` sits outside `.admin-page` (the sticky header is between them) and never repeated its 880px column, so every admin heading was ~280px left of the panel it heads. On the boards list, the links were a type size larger than the buttons beside them, and a row with a wide access label couldn't shrink its name field so its Delete hung out of line with the rest of the list. On a phone that row's five controls overflowed off the *left* edge — `justify-content: flex-end` doesn't wrap. **Explainers say less, and some stopped being paragraphs.** `.admin-note` is a mark and one line for the things that report a *state* rather than describe a control — which is what let the access page's longest paragraph (164 chars, opening with three clauses establishing that nothing was wrong) become one sentence. The calendar's read-only promise moved out of the middle of a paragraph and became a chip beside the link. And the phone menu's three destinations got icons: they were the only rows in that sheet whose word began at its edge, so one list had two left margins. ![Admin boards, before and after](https://git.grandiras.net/attachments/ef83e07e-3838-4918-8bc8-0a471774c8cb) ![The phone menu, before and after](https://git.grandiras.net/attachments/11cb35aa-c88d-4060-aa16-2bcdc3951b99) ## Verified - `dotnet build` and `dotnet test` green (381 passing, `DocumentationTests` included). - New e2e assertions in `mobile.spec.js` (shadow offsets are all ≤ 0; every label in the sheet shares one left edge), `board.spec.js` (heading, board chip and panel share a left edge), `access.spec.js` (the chip, the dot, the row's controls one height and no overflow, and both kinds of note), `calendar.spec.js` (the read-only chip). - Playwright run locally against a `dotnet run` server on a fresh database: **73 passed, 3 failed** — `calendar.spec.js` "a six-week month fits…" (reproduces identically on unmodified `main` here; it measures a 720px grid and this container's font metrics are 14px taller than the compose image's), `calendar.spec.js` "the month cascades in once" and `i18n.spec.js` "a stored choice beats an unsupported browser language" (both failed before I touched anything). `access.spec.js`'s two-member tests and `share.spec.js`'s origin assertion can't run here at all — no PDS container, and the origin is hard-coded to `localhost:8090`. The full suite still wants the compose stack. - Every screenshot above is the real app, before and after, on the same data. Docs updated in the same commit: `ui.md` (the fifth thing that follows from the bar, the sheet's one row shape), `frontend.md` (a new *Native form controls* section and the note-versus-hint rule), `boards-and-permissions.md` (the access chip and the two notes), `calendar.md` and `auth.md`. One changelog bullet in both locales. --- ⏱ 77m 36s · 388 turns · tokens: 392.3k in / 116.8k out (+95303.2k cache-read) 📜 [Full session transcript](https://git.grandiras.net/Grandiras/claude-bot/src/branch/claude-logs/transcripts/Grandiras/Ponente/issue-141/run-369.md) → Opened PR: https://git.grandiras.net/Grandiras/Ponente/pulls/143 → Filed follow-up issue [#144](https://git.grandiras.net/Grandiras/Ponente/issues/144): Counts in the UI read "member(s)" / "card(s)" — four strings, both locales

phone-menu.png

605 KiB

admin-boards.png

619 KiB

Grandiras closed this issue

2026-08-21 15:52:49 +00:00

Grandiras referenced this issue from a commit

2026-08-21 15:52:51 +00:00

Claude: changes for issue #141 (#143)