fix(ui): recover the text that truncate hides - #288
Merged
Merged
Conversation
Follow-up sweep after the landing hero. Grepped all 25 `truncate` uses in
`.tsx`, then measured each in a browser rather than trusting the class list —
`truncate` is usually correct, and the landing bug was specific: the hidden
text was needed verbatim and nothing could recover it.
Measured, not assumed. The worst case is not mobile:
settings store, 1440px value 267px shown, 519px hidden (66%)
description 267px shown, 226px hidden (46%)
doctor, 375px migration msg up to 26px hidden (15%)
The settings row hides two thirds of a realistic connection string on a
desktop monitor, with no `title` and no way to read it without opening the
editor — so the list cannot be scanned for the value you are looking for.
Adds `title` to the cases where the value is arbitrary-length and the row is
the only place it appears: settings value + description, migration messages,
user names + addresses, in-flight upload filenames, and the admin card's url
(its only disambiguator when two tools share a label).
`title` is a partial remedy — it does nothing on touch. It is the right one
here because these are scanning surfaces where the layout should stay a fixed
grid; the full value stays reachable through the row's own detail route, and
the tooltip removes the need to travel for a glance.
Deliberately unchanged:
- `CopyableId` — already correct, and the model for the rest: working copy
handler, plus `title` and `aria-label` carrying the full value. The landing
hero had hand-rolled a worse version of this component.
- Permission keys in the role editor — measured 0px clipped across all 19 at
375px; the longest is 23 characters and the column fits it.
- Sidebar identity, module names, status labels, the branding preview, the
vendored shadcn sidebar, and the dev-only placeholder fixture: short,
fixed-vocabulary, decorative, or your own identity.
- Doctor's "run command" block truncates four hardcoded short commands that
do not clip at any width tested. It has no copy affordance, which is a
missing feature rather than hidden text, so it is left for its own change.
`Doctor.tsx` is now exactly at the 300-line cap. The next edit there needs a
split, not a shorter comment.
Verified: make lint clean, 2152 passed / 2 skipped, 127 JS passed. The
settings fix re-measured against the same connection string that exposed it —
still clipped by design, now carrying the full text in `title`.
Claude-Session: https://claude.ai/code/session_01JJtbN97VhtDr28Fuy5JKEF
|
You have reached your Codex usage limits for security reviews. Please try again later. |
Deploying simple-module-python with
|
| Latest commit: |
f475305
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6d31c631.simple-module-python.pages.dev |
| Branch Preview URL: | https://fix-truncate-sweep.simple-module-python.pages.dev |
Owner
Author
|
/pi fix the conflicts and make the PR ready to merge |
Owner
Author
|
✅
Validation:
|
The hi-fi pages rewrite (#303) landed while this sat open, and it moved or rewrote every surface the sweep touched. Re-applied the fix to where the text now lives rather than to the conflict text: Doctor.tsx migrations block -> pages/components/doctor/MigrationsCard.tsx UploadProgressRows.tsx -> pages/components/UploadsCard.tsx settings Browse.tsx table -> pages/components/StoreTable.tsx users UserRow.tsx -> rewritten in place as a stretched row link Admin.tsx merged clean and keeps its `title`. Two things changed on the way: - The settings description column no longer exists, so only the value carries a `title`. It repeats what is rendered, which keeps a masked secret masked. - The uploads row now truncates the failure text too, so that gets the same treatment; both strings come from the server and are unbounded. The users row needed more than a moved attribute. Main's `UserRow` is a link stretched over the whole row by a `before:inset-0` overlay, and the overlay answers the hover. Measured in Chromium with elementFromPoint: a `title` on the link is announced over every cell in the row — hovering Last login pops the member's name — and the `title` on the address line below never fires at all, because the overlay sits on top of it. Both lines are therefore lifted back above the overlay with `relative`, which was already the file's own device for keeping the kebab clickable. The name is wrapped rather than lifted whole so it stays inside the anchor and still opens the user; the anchor still clips, ellipsis confirmed at 170px. The one cost is that the address line is no longer part of the row-wide click target. Skipped, consistent with the original reasoning: StoreCards and UserCards are the phone variants of these two tables, and `title` does nothing on touch. make lint clean, 2973 Python passed, 463 JS passed. Claude-Session: https://claude.ai/code/session_011URawzYPb8nL2gfGh2yFVn
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
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.
Follow-up sweep after the landing hero fix in #286. Grepped all
truncateuses in.tsx, then measured each in a browser rather than trusting the class list —truncateis usually correct, and the landing bug was specific: the hidden text was needed verbatim and nothing could recover it.Measured, not assumed — and the worst case is not mobile
value@1440pxdescription@1440pxThe settings row hides two thirds of a realistic connection string on a desktop monitor, with no
titleand no way to read it without opening the editor — so the list cannot be scanned for the value you are looking for.What changed
Adds
titlewhere the value is arbitrary-length and the row is the only place it appears: the settings store value, doctor migration messages, user names + addresses, in-flight upload filenames and their failure text, and the admin card's url (its only disambiguator when two tools share a label).titleis a partial remedy — it does nothing on touch. It is the right one here because these are scanning surfaces where the layout should stay a fixed grid; the full value stays reachable through the row's own detail route, and the tooltip removes the need to travel for a glance. It would have been the wrong fix for the landing hero, which is why that one got wrapping and a working copy button instead.Re-applied after #303
The hi-fi pages rewrite landed while this sat open and moved or rewrote every surface the sweep touched, so the fix was re-applied to where the text now lives rather than to the conflict text:
Doctor.tsxmigrations blockpages/components/doctor/MigrationsCard.tsxUploadProgressRows.tsxpages/components/UploadsCard.tsxBrowse.tsxtablepages/components/StoreTable.tsxUserRow.tsxAdmin.tsxmerged clean and keeps itstitle. Two things changed on the way: the settings description column no longer exists, so only the value carries atitle(and it repeats what is rendered, which keeps a masked secret masked); and the uploads row now truncates the failure text too, so that gets the same treatment — both strings come from the server and are unbounded.The users row needed more than a moved attribute
Main's
UserRowis a link stretched over the whole row by abefore:inset-0overlay, and the overlay answers the hover. Measured in Chromium withelementFromPoint, walking up to the first ancestor carrying atitle— exactly what a tooltip does:titleon the link (naive port)titlenever firesSo the naive port is wrong twice over: it announces the name over cells it has nothing to do with, and the address line's tooltip is dead on arrival. Both lines are lifted back above the overlay with
relative— already the file's own device for keeping the kebab clickable. The name is wrapped rather than lifted whole, so it stays inside the anchor and still opens the user; the anchor is still the element that clips, ellipsis confirmed at 170px.One cost, stated plainly: the address line is no longer part of the row-wide click target. The rest of the row, the name included, still opens the user.
Deliberately unchanged
CopyableIdwas already correct — working copy handler, plustitleandaria-labelcarrying the full value. It is the model for the rest; the landing hero had hand-rolled a worse version of a component that already existed.StoreCardsandUserCards— the phone variants of the two tables above.titledoes nothing on touch, so adding it there would be noise, by this PR's own argument.Verification
make lintclean · 2973 Python passed · 463 JS passed. The hit-testing above was measured on a standalone replica of the row's exact overlay markup, in headless Chromium, before and after the fix.https://claude.ai/code/session_011URawzYPb8nL2gfGh2yFVn