fix(navigator): render delete-room link as a real flex row

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.

src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx

@@ -166,9 +166,10 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
                 <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>
-            <Text variant="danger" underline bold pointer className="flex justify-center items-center gap-1 whitespace-nowrap" onClick={ deleteRoom }>
-                <FaTimes className="fa-icon shrink-0" /> { LocalizeText('navigator.roomsettings.delete') }
-            </Text>
+            <Flex pointer alignItems="center" justifyContent="center" gap={ 1 } onClick={ deleteRoom }>
+                <FaTimes className="fa-icon shrink-0 text-[#a81a12]" />
+                <Text variant="danger" underline bold className="whitespace-nowrap">{ LocalizeText('navigator.roomsettings.delete') }</Text>
+            </Flex>
         </>
     );
 };