From e8373ea6104ff5b9b1800ac1ac2c697eb2addda4 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@users.noreply.github.com>
Date: Sun, 31 May 2026 08:48:58 +0200
Subject: [PATCH] feat(navigator): stacked-label layout for room-settings Base
 tab

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.
---
 .../NavigatorRoomSettingsBasicTabView.tsx     | 98 +++++++++----------
 1 file changed, 48 insertions(+), 50 deletions(-)

diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
index 88c0e31..25794d0 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
@@ -2,7 +2,7 @@ import { RoomDeleteComposer, RoomSettingsSaveErrorEvent, RoomSettingsSaveErrorPa
 import { FC, useEffect, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { CreateLinkEvent, GetMaxVisitorsList, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, Text } from '../../../../common';
+import { Column, Flex, Text } from '../../../../common';
 import { useMessageEvent, useNavigatorData, useNotification } from '../../../../hooks';
 
 const ROOM_NAME_MIN_LENGTH = 3;
@@ -99,72 +99,70 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
 
     return (
         <>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="w-1/4 shrink-0">{ LocalizeText('navigator.roomname') }</Text>
-                <Column fullWidth gap={ 0 }>
-                    <input className="form-control form-control-sm" value={ roomName } maxLength={ ROOM_NAME_MAX_LENGTH } onChange={ event => setRoomName(event.target.value) } onBlur={ saveRoomName } />
-                    { (roomName.length < ROOM_NAME_MIN_LENGTH) &&
-                        <Text bold small variant="danger">
-                            { LocalizeText('navigator.roomsettings.roomnameismandatory') }
-                        </Text> }
-                </Column>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="w-1/4 shrink-0">{ LocalizeText('navigator.roomsettings.desc') }</Text>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.roomname') }</Text>
+                <input className="form-control form-control-sm" value={ roomName } maxLength={ ROOM_NAME_MAX_LENGTH } onChange={ event => setRoomName(event.target.value) } onBlur={ saveRoomName } />
+                { (roomName.length < ROOM_NAME_MIN_LENGTH) &&
+                    <Text bold small variant="danger">
+                        { LocalizeText('navigator.roomsettings.roomnameismandatory') }
+                    </Text> }
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.roomsettings.desc') }</Text>
                 <textarea className="form-control form-control-sm" value={ roomDescription } maxLength={ DESC_MAX_LENGTH } onChange={ event => setRoomDescription(event.target.value) } onBlur={ saveRoomDescription } />
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="w-1/4 shrink-0">{ LocalizeText('navigator.category') }</Text>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.category') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.categoryId } onChange={ event => handleChange('category', event.target.value) }>
                     { categories && categories.map(category => <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>) }
                 </select>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="w-1/4 shrink-0">{ LocalizeText('navigator.maxvisitors') }</Text>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.maxvisitors') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }>
                     { GetMaxVisitorsList && GetMaxVisitorsList.map(value => <option key={ value } value={ value }>{ value }</option>) }
                 </select>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="w-1/4 shrink-0">{ LocalizeText('navigator.tradesettings') }</Text>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.tradesettings') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.tradeState } onChange={ event => handleChange('trade_state', event.target.value) }>
                     <option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
                     <option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option>
                     <option value="2">{ LocalizeText('navigator.roomsettings.trade_allowed') }</option>
                 </select>
-            </Flex>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.tags') }</Text>
+                <Flex gap={ 1 }>
+                    <Column fullWidth gap={ 0 }>
+                        <input className="form-control form-control-sm" value={ roomTag1 } onChange={ event => setRoomTag1(event.target.value) } onBlur={ () => saveTags(0) } />
+                        { (roomTag1.length > TAGS_MAX_LENGTH) &&
+                            <Text bold small variant="danger">
+                                { LocalizeText('navigator.roomsettings.toomanycharacters') }
+                            </Text> }
+                        { (tagIndex === 0 && typeError != '') &&
+                            <Text bold small variant="danger">
+                                { LocalizeText(typeError) }
+                            </Text> }
+                    </Column>
+                    <Column fullWidth gap={ 0 }>
+                        <input className="form-control form-control-sm" value={ roomTag2 } onChange={ event => setRoomTag2(event.target.value) } onBlur={ () => saveTags(1) } />
+                        { (roomTag2.length > TAGS_MAX_LENGTH) &&
+                            <Text bold small variant="danger">
+                                { LocalizeText('navigator.roomsettings.toomanycharacters') }
+                            </Text> }
+                        { (tagIndex === 1 && typeError != '') &&
+                            <Text bold small variant="danger">
+                                { LocalizeText(typeError) }
+                            </Text> }
+                    </Column>
+                </Flex>
+            </Column>
             <Flex alignItems="center" gap={ 1 }>
-                <Text className="w-1/4 shrink-0">{ LocalizeText('navigator.tags') }</Text>
-                <Column fullWidth gap={ 0 }>
-                    <input className="form-control form-control-sm" value={ roomTag1 } onChange={ event => setRoomTag1(event.target.value) } onBlur={ () => saveTags(0) } />
-                    { (roomTag1.length > TAGS_MAX_LENGTH) &&
-                        <Text bold small variant="danger">
-                            { LocalizeText('navigator.roomsettings.toomanycharacters') }
-                        </Text> }
-                    { (tagIndex === 0 && typeError != '') &&
-                        <Text bold small variant="danger">
-                            { LocalizeText(typeError) }
-                        </Text> }
-                </Column>
-                <Column fullWidth gap={ 0 }>
-                    <input className="form-control form-control-sm" value={ roomTag2 } onChange={ event => setRoomTag2(event.target.value) } onBlur={ () => saveTags(1) } />
-                    { (roomTag2.length > TAGS_MAX_LENGTH) &&
-                        <Text bold small variant="danger">
-                            { LocalizeText('navigator.roomsettings.toomanycharacters') }
-                        </Text> }
-                    { (tagIndex === 1 && typeError != '') &&
-                    <Text bold small variant="danger">
-                        { LocalizeText(typeError) }
-                    </Text> }
-                </Column>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Base className="w-1/4 shrink-0" />
                 <input className="form-check-input" type="checkbox" checked={ roomData.allowWalkthrough } onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
                 <Text>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
             </Flex>
             <Flex alignItems="center" gap={ 1 }>
-                <Base className="w-1/4 shrink-0" />
                 <input className="form-check-input" type="checkbox" checked={ roomData.allowUnderpass } onChange={ event => handleChange('allow_underpass', event.target.checked) } />
                 <Text>{ LocalizeText('navigator.roomsettings.allow_underpass') }</Text>
             </Flex>