diff --git a/.gitignore b/.gitignore index e7bee96..25c5f52 100644 --- a/.gitignore +++ b/.gitignore @@ -44,3 +44,4 @@ Thumbs.db # the dev server takes minutes to start with 100k+ files under public/. /public/nitro-assets /public/swf +.superpowers/ diff --git a/docs/superpowers/specs/2026-05-31-navigator-base-tab-stacked-labels-design.md b/docs/superpowers/specs/2026-05-31-navigator-base-tab-stacked-labels-design.md new file mode 100644 index 0000000..fc858bd --- /dev/null +++ b/docs/superpowers/specs/2026-05-31-navigator-base-tab-stacked-labels-design.md @@ -0,0 +1,71 @@ +# Navigator — Room Settings "Base" tab: stacked-label layout + +**Date:** 2026-05-31 +**Component:** Nitro-V3 client +**File:** `src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx` +**Type:** Layout-only refactor (no logic / data-flow change) + +## Problem + +The Base tab uses a horizontal two-column row layout: a fixed-width label on the +left, the control on the right. In the narrow room-settings panel the label column +is too tight, so multi-word Italian labels ("Visitatori massimi", "Impostazioni +scambio") wrap onto two lines and look broken. An earlier fix replaced dead +Bootstrap `col-3` classes with `w-1/4 shrink-0`, which stopped the crushing but +still leaves the labels cramped and occasionally wrapping. + +The other five room-settings tabs (Access, Rights, VIP/Chat, Mod, Misc) already use +idiomatic vertical/grouped layouts. Base is the outlier. + +## Decision + +Adopt the **stacked-label** pattern (chosen from three mockup options — A stacked, +B sectioned cards, C wider label column). Each field becomes a vertical block: bold +label on top, full-width control below, validation message underneath. This mirrors +the sibling **Access** tab's existing `` + `` shape, so +the two tabs become visually consistent and labels can never wrap. + +## Layout + +Every field → its own `` block: + +```tsx + + { LocalizeText('navigator.roomname') } + + { (roomName.length < ROOM_NAME_MIN_LENGTH) && + { LocalizeText('navigator.roomsettings.roomnameismandatory') } } + +``` + +Field-by-field: + +- **Nome stanza** — stacked block, mandatory-name validation preserved. +- **Descrizione** — stacked block, `