Feat: Build out server shell

Frontend/src/components/shell/AppShell/AppShell.module.scss

@@ -15,6 +15,7 @@
   --shell-divider-border: color-mix(in srgb, var(--color-border-strong) 34%, transparent);
   --sidebar-panel-surface: color-mix(in srgb, var(--color-surface-muted) 92%, transparent);
   --workspace-panel-surface: color-mix(in srgb, var(--color-canvas) 94%, var(--color-surface));
+  position: relative;
   min-height: 0;
   display: grid;
   grid-template-columns: var(--rail-width) minmax(0, 1fr);
@@ -26,7 +27,9 @@
   min-height: 0;
   display: flex;
   position: relative;
-  z-index: 1;
+  z-index: 6;
+  isolation: isolate;
+  overflow: visible;
   background: var(--color-surface);
 }
 
@@ -92,9 +95,10 @@
 
 .sidebarDock {
   position: absolute;
-  right: var(--space-1);
   bottom: var(--space-3);
-  left: calc(var(--space-1) - (var(--rail-width) * 0.9));
+  left: calc(var(--space-1) + (var(--rail-width) * 0.1));
+  width: calc(var(--sidebar-width) + (var(--rail-width) * 0.9) - var(--space-2));
+  right: auto;
   z-index: calc(var(--z-modal) + 1);
   pointer-events: none;
 

Frontend/src/components/shell/AppShell/AppShell.tsx

@@ -26,24 +26,28 @@ export const AppShell = (): JSX.Element => {
 	return (
 		<div class={styles.shell}>
 			<TopBar theme={themeState()} onToggleTheme={toggleTheme} />
+
 			<div class={styles.body}>
+				{/* Left server rail */}
 				<div class={styles.railColumn}>
 					<LeftRail />
 				</div>
 
+				{/* Sidebar + main workspace frame */}
 				<div class={styles.workspaceRegion}>
 					<div class={styles.sidebarColumn}>
 						<WorkspaceSidebar />
-
-						<div class={styles.sidebarDock}>
-							<ServerDock />
-						</div>
 					</div>
 
 					<div class={styles.workspaceMain}>
 						<WorkspaceHome />
 					</div>
 				</div>
+
+				{/* Floating server dock overlay */}
+				<div class={styles.sidebarDock}>
+					<ServerDock />
+				</div>
 			</div>
 		</div>
 	);