Portrait tablet and tablet settings layouts (#188)

Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>

web/src/shell/AppShell.tsx

@@ -2,15 +2,17 @@ import { Outlet } from 'react-router'
 import { BottomBar } from './BottomBar.tsx'
 import { Rail } from './Rail.tsx'
 import { Sidebar } from './Sidebar.tsx'
-import { useBreakpoint } from './useBreakpoint.ts'
+import { useBreakpoint, useOrientation } from './useBreakpoint.ts'
 import styles from './AppShell.module.css'
 
 // The responsive frame around every page: one nav layout per breakpoint and a
-// scrolling main area for the routed page.
+// scrolling main area for the routed page. A portrait viewport is marked so
+// the narrower upright tablet keeps its content clear of the rail.
 export function AppShell() {
   const breakpoint = useBreakpoint()
+  const orientation = useOrientation()
   return (
-    <div className={`${styles.shell} ${styles[breakpoint]}`}>
+    <div className={[styles.shell, styles[breakpoint], orientation === 'portrait' && styles.portrait].filter(Boolean).join(' ')}>
       {breakpoint === 'mobile' && <BottomBar />}
       {breakpoint === 'tablet' && <Rail />}
       {breakpoint === 'desktop' && <Sidebar />}