The previous fix put 'flex' on the Text component, but Text forces
display:inline as its base class, so the flex never applied and the X
icon dropped onto its own line. Use a Flex container with the icon and
a Text child instead, so icon + label sit on one centered row.
Replace the cramped horizontal label/control rows with a vertical
stacked-label layout (bold label above each full-width control),
matching the sibling Access tab. Fixes multi-word labels wrapping in
the narrow panel. Tags share one label with the two inputs side-by-side.
Drops the now-unused Base spacer elements. Layout-only: no change to
handleChange, validation thresholds, save-on-blur, or field order.
The Base tab labels used col-3 and the delete row used
d-flex/justify-content-center — Bootstrap utilities that don't exist
in this Tailwind 4 build, so labels collapsed and wrapped. Swap to
w-1/4 shrink-0 and flex/justify-center/items-center, and drop the
dead col-4 on the Access-tab password inputs. Also fix a missing
break in the tag save-error switch (invalid-tag always showed the
non-choosable message) and a && / || precedence bug in saveTags
that checked the wrong tag field.
Run eslint --fix across src/ to clear ~1900 mechanical lint errors
surfaced by the @typescript-eslint v8 + react-hooks v7 + react-compiler
upgrade in the React 19 modernization PR.
Issues fixed automatically:
- brace-style (Allman): try/catch one-liners reformatted to multi-line
- indent: tab-vs-space and depth corrections
- semi: missing trailing semicolons
- no-trailing-spaces
No semantic changes. Remaining 701 errors are real-code issues
(set-state-in-effect, rules-of-hooks, no-unsafe-* type checks) that
need manual per-file review.
https://claude.ai/code/session_01GrR87LAqnAEyKG2ZbmQt5Q
simoleo89