asdasd

modules/mining-checker/assets/css/app.css

@@ -16,6 +16,7 @@
   font-family: inherit;
   max-width: 100%;
   overflow-x: clip;
+  height: 100%;
 }
 
 #mining-checker-app,
@@ -34,71 +35,13 @@
   max-width: 100%;
   margin: 0;
   padding: 0;
-}
+  height: 100%;
-
-#mining-checker-app .mc-app-shell {
-  display: grid;
-  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
-  gap: 18px;
-  align-items: start;
-}
-
-#mining-checker-app .mc-sidebar,
-#mining-checker-app .mc-hero-panel {
-  border: 1px solid var(--mc-line);
-  border-radius: 18px;
-  background: var(--mc-surface);
-  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
-}
-
-#mining-checker-app .mc-sidebar {
-  padding: 20px;
-  display: grid;
-  gap: 18px;
-  position: sticky;
-  top: 0;
-}
-
-#mining-checker-app .mc-sidebar-brand,
-#mining-checker-app .mc-nav-list,
-#mining-checker-app .mc-main {
-  display: grid;
-  gap: 14px;
 }
 
 #mining-checker-app .mc-sidebar-title {
   font-size: 1.35rem;
 }
 
-#mining-checker-app .mc-nav-button {
-  display: grid;
-  gap: 6px;
-  width: 100%;
-  padding: 14px 16px;
-  text-align: left;
-  border-radius: 16px;
-  border: 1px solid var(--mc-line);
-  background: #fff;
-  color: var(--mc-text);
-  cursor: pointer;
-  transition: 160ms ease;
-}
-
-#mining-checker-app .mc-nav-button:hover {
-  border-color: var(--mc-line-strong);
-  transform: translateY(-1px);
-}
-
-#mining-checker-app .mc-nav-button.is-active {
-  border-color: var(--mc-accent);
-  background: #eff6ff;
-  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
-}
-
-#mining-checker-app .mc-nav-button strong {
-  color: var(--mc-text);
-}
-
 #mining-checker-app .mc-nav-meta {
   font-size: 0.85rem;
   line-height: 1.45;
@@ -106,11 +49,9 @@
 }
 
 #mining-checker-app .mc-hero-panel {
-  padding: 20px 22px;
+  border: 1px solid var(--mc-line);
-  display: flex;
+  background: var(--mc-surface);
-  justify-content: space-between;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
-  gap: 16px;
-  align-items: flex-start;
 }
 
 #mining-checker-app .mc-inline-row--wrap {
@@ -341,19 +282,6 @@
   font-weight: 700;
 }
 
-@media (max-width: 980px) {
-  #mining-checker-app .mc-app-shell {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  #mining-checker-app .mc-sidebar {
-    position: static;
-  }
-
-  #mining-checker-app .mc-hero-panel {
-    flex-direction: column;
-  }
-}
 
 #mining-checker-app .mc-button--secondary {
   background: #ffffff;

modules/mining-checker/assets/js/app.js

@@ -2291,19 +2291,19 @@
     return h('div', {
       className: 'mc-grid-bg',
     }, [
-      h('div', { key: 'shell', className: 'mc-shell' }, [
+      h('div', { key: 'shell', className: 'window-app-shell mc-shell' }, [
-        h('div', { key: 'frame', className: 'mc-app-shell' }, [
+        h('div', { key: 'frame', className: 'window-app-frame' }, [
-          h('aside', { key: 'sidebar', className: 'mc-sidebar' }, [
+          h('aside', { key: 'sidebar', className: 'window-app-sidebar mc-sidebar' }, [
-            h('div', { key: 'brand', className: 'mc-sidebar-brand' }, [
+            h('div', { key: 'brand', className: 'window-app-brand mc-sidebar-brand' }, [
-              h('div', { key: 'kicker', className: 'mc-kicker' }, 'Modul'),
+              h('div', { key: 'kicker', className: 'window-app-kicker mc-kicker' }, 'Modul'),
               h('h1', { key: 'title', className: 'mc-sidebar-title' }, 'Mining-Checker'),
               h('p', { key: 'copy', className: 'mc-text' }, 'Erfassung, OCR-Auswertung und Analyse von Mining-Messwerten in einer gemeinsamen Modulansicht.'),
             ]),
-            h('div', { key: 'nav', className: 'mc-nav-list' },
+            h('div', { key: 'nav', className: 'window-app-nav-list mc-nav-list' },
               sectionEntries.map(([key, label]) => h('button', {
                 key,
                 type: 'button',
-                className: cx('mc-nav-button', activeTab === key && 'is-active'),
+                className: cx('window-app-nav-button mc-nav-button', activeTab === key && 'is-active'),
                 onClick: () => {
                   if (key === activeTab) {
                     return;
@@ -2313,15 +2313,15 @@
                 },
               }, [
                 h('strong', { key: 'label' }, label),
-                h('span', { key: 'meta', className: 'mc-nav-meta' }, currentSectionSummary(key)),
+                h('span', { key: 'meta', className: 'window-app-meta mc-nav-meta' }, currentSectionSummary(key)),
               ]))
             ),
           ]),
-          h('main', { key: 'main', className: 'mc-main' }, [
+          h('main', { key: 'main', className: 'window-app-main mc-main' }, [
-            h('section', { key: 'hero', className: 'mc-hero-panel' }, [
+            h('section', { key: 'hero', className: 'window-app-hero mc-hero-panel' }, [
               h('div', { key: 'hero-copy', className: 'mc-hero-copy' }, [
-                h('div', { key: 'hero-kicker', className: 'mc-kicker' }, 'Mining-Checker'),
+                h('div', { key: 'hero-kicker', className: 'window-app-kicker mc-kicker' }, 'Mining-Checker'),
-                h('h2', { key: 'hero-title', className: 'mc-section-title' }, currentSectionLabel(activeTab)),
+                h('h2', { key: 'hero-title', className: 'window-app-title mc-section-title' }, currentSectionLabel(activeTab)),
                 h('p', { key: 'hero-text', className: 'mc-text' }, currentSectionSummary(activeTab)),
               ]),
               h('div', { key: 'hero-badges', className: 'mc-inline-row mc-inline-row--wrap' }, [

public/assets/desktop/desktop.css

@@ -520,12 +520,15 @@ h1 {
     background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98)),
         radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 36%);
+    min-width: 0;
 }
 
 .window-app-frame {
     display: grid;
     grid-template-columns: 240px minmax(0, 1fr);
     min-height: 100%;
+    min-width: 0;
+    align-items: stretch;
 }
 
 .window-app-sidebar {
@@ -534,6 +537,10 @@ h1 {
     background:
         linear-gradient(180deg, rgba(219, 234, 254, 0.96), rgba(239, 246, 255, 0.94)),
         linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
+    min-height: 0;
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .window-app-brand {
@@ -591,6 +598,7 @@ h1 {
 
 .window-app-main {
     padding: 24px;
+    min-width: 0;
 }
 
 .window-app-panel {