fix: rework compact nav and centralized back routing

Use master-detail layout on skinny windows so server and channel lists share one screen, with back returning to the space list instead of redirect loops. Add useBackRoute for title-bar and page-header back buttons with view transitions.

src/app/features/lobby/LobbyHeader.tsx

@@ -16,7 +16,7 @@ import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
 import { stopPropagation } from '../../utils/keyboard';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { BackRouteHandler } from '../../components/BackRouteHandler';
+import { useBackRoute } from '../../hooks/useBackRoute';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
@@ -165,6 +165,7 @@ export function LobbyHeader({ showProfile, showSpaceToolbar, powerLevels }: Lobb
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [addExisting, setAddExisting] = useState<OpenAddExistingOptions | null>(null);
   const screenSize = useScreenSizeContext();
+  const { showInPageHeader, goBack } = useBackRoute();
 
   const name = useRoomName(space);
   const avatarMxc = useRoomAvatar(space);
@@ -270,6 +271,13 @@ export function LobbyHeader({ showProfile, showSpaceToolbar, powerLevels }: Lobb
       <>
       <PageHeader outlined>
         <Box grow="Yes" alignItems="Center" gap="300">
+          {showInPageHeader && (
+            <Box shrink="No">
+              <IconButton onClick={goBack} aria-label="Back">
+                <Icon src={Icons.ArrowLeft} />
+              </IconButton>
+            </Box>
+          )}
           <Avatar size="300" shrink="No">
             <RoomAvatar
               roomId={space.roomId}
@@ -361,16 +369,12 @@ export function LobbyHeader({ showProfile, showSpaceToolbar, powerLevels }: Lobb
   return (
     <PageHeader className={showProfile ? undefined : css.Header} balance>
       <Box grow="Yes" alignItems="Center" gap="200">
-        {screenSize === ScreenSize.Mobile ? (
+        {showInPageHeader ? (
           <>
             <Box shrink="No">
-              <BackRouteHandler>
-                {(onBack) => (
-                  <IconButton onClick={onBack}>
-                    <Icon src={Icons.ArrowLeft} />
-                  </IconButton>
-                )}
-              </BackRouteHandler>
+              <IconButton onClick={goBack} aria-label="Back">
+                <Icon src={Icons.ArrowLeft} />
+              </IconButton>
             </Box>
             <Box grow="Yes" justifyContent="Center">
               {showProfile && (