adsasd

public/assets/desktop/desktop.css

@@ -36,18 +36,9 @@ body[data-skin="linux"] {
 }
 
 .desktop-shell {
-    display: grid;
-    grid-template-columns: 320px minmax(0, 1fr);
     min-height: 100vh;
 }
 
-.desktop-sidebar {
-    padding: 32px;
-    backdrop-filter: blur(20px);
-    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.32));
-    border-right: 1px solid var(--shell-border);
-}
-
 .eyebrow {
     margin: 0 0 12px;
     text-transform: uppercase;
@@ -76,50 +67,10 @@ h1 {
     opacity: 0.88;
 }
 
-.panel {
-    margin-top: 24px;
-    padding: 18px;
-    border: 1px solid var(--shell-border);
-    background: var(--shell-panel);
-    border-radius: 18px;
-    box-shadow: var(--shadow);
-}
-
-.skin-switcher {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-.skin-chip,
-.text-link {
-    color: inherit;
-    text-decoration: none;
-}
-
-.skin-chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 10px 14px;
-    border-radius: 999px;
-    border: 1px solid var(--shell-border);
-    background: rgba(255, 255, 255, 0.06);
-}
-
-.skin-chip.is-active {
-    background: var(--accent);
-    color: #0f172a;
-    border-color: transparent;
-}
-
-.fact-list {
-    padding-left: 18px;
-    opacity: 0.9;
-}
-
 .desktop-stage {
     position: relative;
     overflow: hidden;
+    min-height: 100vh;
     padding: 24px;
 }
 
@@ -170,6 +121,7 @@ h1 {
     display: grid;
     gap: 14px;
     width: min(320px, calc(100% - 48px));
+    z-index: 20;
 }
 
 .widget-card {
@@ -204,6 +156,7 @@ h1 {
     position: absolute;
     inset: 0;
     pointer-events: none;
+    z-index: 40;
 }
 
 .window {
@@ -285,6 +238,7 @@ h1 {
     background: var(--taskbar-bg);
     backdrop-filter: blur(18px);
     border: 1px solid var(--shell-border);
+    z-index: 120;
 }
 
 .start-button,
@@ -310,7 +264,7 @@ h1 {
     position: absolute;
     left: 24px;
     bottom: 102px;
-    z-index: 90;
+    z-index: 130;
     display: grid;
     align-content: start;
     grid-template-columns: minmax(240px, 280px) minmax(280px, 360px);
@@ -415,17 +369,8 @@ h1 {
 }
 
 @media (max-width: 1100px) {
-    .desktop-shell {
-        grid-template-columns: 1fr;
-    }
-
-    .desktop-sidebar {
-        border-right: 0;
-        border-bottom: 1px solid var(--shell-border);
-    }
-
     .desktop-stage {
-        min-height: 70vh;
+        min-height: 100vh;
         padding-bottom: 120px;
     }
 

public/assets/desktop/desktop.js

@@ -15,6 +15,25 @@ if (payloadNode) {
     const windows = new Map();
     const activeWidgets = new Set(payload.widgets.active_ids);
     let zIndex = 20;
+    let topDesktopInset = 24;
+    let sideDesktopInset = 24;
+    let bottomDesktopInset = 120;
+
+    const measureDesktopBounds = () => {
+        if (!windowsRoot) {
+            return;
+        }
+
+        const taskbar = document.querySelector('.taskbar');
+        const stageRect = windowsRoot.getBoundingClientRect();
+        const taskbarRect = taskbar ? taskbar.getBoundingClientRect() : null;
+
+        topDesktopInset = 24;
+        sideDesktopInset = 24;
+        bottomDesktopInset = taskbarRect
+            ? Math.max(24, Math.round(stageRect.bottom - taskbarRect.top + 8))
+            : 120;
+    };
 
     const setStartMenuOpen = (isOpen) => {
         if (!startMenu) {
@@ -98,10 +117,11 @@ if (payloadNode) {
             record.restoreLayout = { ...record.layout };
             record.state.maximized = true;
             record.node.classList.add('is-maximized');
-            record.node.style.left = '24px';
-            record.node.style.top = '24px';
-            record.node.style.width = 'calc(100% - 48px)';
-            record.node.style.height = 'calc(100% - 120px)';
+            measureDesktopBounds();
+            record.node.style.left = `${sideDesktopInset}px`;
+            record.node.style.top = `${topDesktopInset}px`;
+            record.node.style.width = `calc(100% - ${sideDesktopInset * 2}px)`;
+            record.node.style.height = `calc(100% - ${topDesktopInset + bottomDesktopInset}px)`;
             focusWindow(windowId);
             return;
         }
@@ -449,7 +469,20 @@ if (payloadNode) {
     renderWidgets();
     renderStartMenu();
     setStartMenuOpen(false);
+    measureDesktopBounds();
     payload.windows.forEach(createWindow);
     renderClock();
     window.setInterval(renderClock, 1000);
+    window.addEventListener('resize', () => {
+        measureDesktopBounds();
+
+        windows.forEach((record) => {
+            if (record.state.maximized) {
+                record.node.style.left = `${sideDesktopInset}px`;
+                record.node.style.top = `${topDesktopInset}px`;
+                record.node.style.width = `calc(100% - ${sideDesktopInset * 2}px)`;
+                record.node.style.height = `calc(100% - ${topDesktopInset + bottomDesktopInset}px)`;
+            }
+        });
+    });
 }