fix(mobile): stabilize responsive layouts and action wrapping

Improve mobile and tablet usability by fixing viewport and scroll behavior, adding a mobile sidebar flow, and ensuring header action buttons wrap instead of clipping on narrow screens.

Made-with: Cursor

src/components/Navigation/UserSection.module.css

@@ -8,6 +8,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem;
+  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
   border-top: 1px solid var(--border-color, #e0e0e0);
 }
 
@@ -94,6 +95,19 @@
   z-index: 100;
 }
 
+@media (max-width: 1024px) {
+  .menu {
+    left: 0.25rem;
+    right: 0.25rem;
+    max-height: min(60dvh, 420px);
+    overflow-y: auto;
+  }
+
+  .userButton {
+    min-height: 44px;
+  }
+}
+
 .menuItem {
   display: flex;
   align-items: center;

src/components/NotificationBell/NotificationBell.module.css

@@ -366,3 +366,13 @@
 .content::-webkit-scrollbar-thumb:hover {
   background: var(--text-muted, #999);
 }
+
+@media (max-width: 1024px) {
+  .dropdown {
+    left: 0.75rem;
+    right: 0.75rem;
+    width: auto;
+    bottom: calc(76px + env(safe-area-inset-bottom));
+    max-height: min(70dvh, 520px);
+  }
+}

src/components/UiComponents/InfoMessageOverlay/MessageOverlay.module.css

@@ -5,7 +5,7 @@
   right: 0;
   bottom: 0;
   width: 100vw;
-  height: 100vh;
+  height: 100dvh;
   z-index: 9999;
   backdrop-filter: blur(8px);
   background-color: rgba(0, 0, 0, 0.1);
@@ -13,6 +13,12 @@
   animation: fadeIn 0.3s ease-out forwards;
 }
 
+@supports not (height: 100dvh) {
+  .messageOverlay {
+    height: 100vh;
+  }
+}
+
 .messageOverlay.closing {
   animation: fadeOut 0.3s ease-out forwards;
   pointer-events: none;
@@ -64,6 +70,8 @@
   align-items: flex-start;
   padding: 30px;
   pointer-events: none;
+  overflow-y: auto;
+  max-height: 100%;
 }
 
 .messageContent {

src/index.css

@@ -6,14 +6,17 @@
 html, body {
     margin: 0;
     padding: 0;
-    height: 100%;
-    overflow: hidden;
+    min-height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
     font-family: var(--font-family, "DM Sans", sans-serif);
 }
 
 #root {
-    height: 100vh;
-    width: 100vw;
+    min-height: 100vh;
+    min-height: 100dvh;
+    width: 100%;
     margin: 0;
     padding: 0;
     font-family: var(--font-family, "DM Sans", sans-serif);

src/layouts/FeatureLayout.module.css

@@ -144,6 +144,7 @@
   /* Maintain flex chain for child components */
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 /* Dark Theme */
@@ -176,3 +177,13 @@
 :global(.dark-theme) .errorContainer p {
   color: var(--text-secondary-dark, #aaa);
 }
+
+@media (max-width: 1024px) {
+  .featureHeader {
+    padding: 0.75rem 1rem;
+  }
+
+  .featureContent {
+    padding: 1rem;
+  }
+}

src/layouts/MainLayout.module.css

@@ -4,12 +4,20 @@
 
 .mainLayout {
   display: flex;
-  height: 100vh;
-  width: 100vw;
+  height: 100dvh;
+  min-height: 100dvh;
+  width: 100%;
   overflow: hidden;
   background: var(--bg-primary, #ffffff);
 }
 
+@supports not (height: 100dvh) {
+  .mainLayout {
+    height: 100vh;
+    min-height: 100vh;
+  }
+}
+
 /* Sidebar */
 .sidebar {
   display: flex;
@@ -19,7 +27,8 @@
   height: 100%;
   background: var(--surface-color, #f8f9fa);
   border-right: 1px solid var(--border-color, #e0e0e0);
-  overflow: visible;
+  overflow: hidden;
+  z-index: 1200;
 }
 
 /* Logo */
@@ -81,11 +90,39 @@
 /* Content */
 .content {
   flex: 1;
+  min-width: 0;
+  min-height: 0;
   /* Let child components handle their own scrolling for sticky headers */
   overflow: hidden;
   background: var(--bg-primary, #ffffff);
 }
 
+.mobileTopBar {
+  display: none;
+}
+
+.mobileMenuButton {
+  border: 1px solid var(--border-color, #e0e0e0);
+  background: var(--bg-primary, #ffffff);
+  color: var(--text-primary, #1a1a1a);
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  font-size: 1.2rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.mobileLogo {
+  height: 32px;
+  width: auto;
+  object-fit: contain;
+}
+
+.mobileBackdrop {
+  display: none;
+}
+
 /* Dark Theme */
 :global(.dark-theme) .mainLayout {
   background: var(--bg-dark, #0a0a0a);
@@ -116,6 +153,12 @@
   background: var(--bg-dark, #0a0a0a);
 }
 
+:global(.dark-theme) .mobileMenuButton {
+  border-color: var(--border-dark, #333);
+  background: var(--surface-dark, #1a1a1a);
+  color: var(--text-primary-dark, #ffffff);
+}
+
 /* Scrollbar Styling */
 .navigation::-webkit-scrollbar {
   width: 6px;
@@ -141,3 +184,61 @@
 :global(.dark-theme) .navigation::-webkit-scrollbar-thumb:hover {
   background: var(--text-tertiary-dark, #666);
 }
+
+@media (max-width: 1024px) {
+  .mainLayout {
+    position: relative;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100dvh;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease-in-out;
+    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.2);
+    border-right: 1px solid var(--border-color, #e0e0e0);
+  }
+
+  @supports not (height: 100dvh) {
+    .sidebar {
+      height: 100vh;
+    }
+  }
+
+  .sidebarOpen {
+    transform: translateX(0);
+  }
+
+  .content {
+    overflow: auto;
+  }
+
+  .mobileTopBar {
+    position: sticky;
+    top: 0;
+    z-index: 1100;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background: var(--bg-primary, #ffffff);
+    border-bottom: 1px solid var(--border-color, #e0e0e0);
+  }
+
+  .mobileBackdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.35);
+    z-index: 1150;
+    cursor: pointer;
+  }
+}

src/layouts/MainLayout.tsx

@@ -5,8 +5,8 @@
  * Enthält den FeatureProvider für das Multi-Tenant-System.
  */
 
-import React, { useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 import { FeatureProvider, useFeatureStore } from '../stores/featureStore';
 import { MandateNavigation } from '../components/Navigation/MandateNavigation';
 import { UserSection } from '../components/Navigation/UserSection';
@@ -18,6 +18,8 @@ import styles from './MainLayout.module.css';
 
 const MainLayoutInner: React.FC = () => {
   const { loadFeatures, initialized, loading, error } = useFeatureStore();
+  const location = useLocation();
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
   
   // Features laden beim Mount
   useEffect(() => {
@@ -25,11 +27,34 @@ const MainLayoutInner: React.FC = () => {
       loadFeatures();
     }
   }, [initialized, loading, loadFeatures]);
+
+  useEffect(() => {
+    setIsMobileSidebarOpen(false);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > 1024) {
+        setIsMobileSidebarOpen(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
   
   return (
     <div className={styles.mainLayout}>
+      {isMobileSidebarOpen && (
+        <button
+          className={styles.mobileBackdrop}
+          onClick={() => setIsMobileSidebarOpen(false)}
+          aria-label="Navigation schliessen"
+        />
+      )}
+
       {/* Sidebar */}
-      <aside className={styles.sidebar}>
+      <aside className={`${styles.sidebar} ${isMobileSidebarOpen ? styles.sidebarOpen : ''}`}>
         <div className={styles.logoContainer}>
           <img 
             src="/logos/poweron-logo.png" 
@@ -62,6 +87,20 @@ const MainLayoutInner: React.FC = () => {
       
       {/* Content */}
       <main className={styles.content}>
+        <div className={styles.mobileTopBar}>
+          <button
+            className={styles.mobileMenuButton}
+            onClick={() => setIsMobileSidebarOpen(true)}
+            aria-label="Navigation oeffnen"
+          >
+            ☰
+          </button>
+          <img
+            src="/logos/poweron-logo.png"
+            alt="PowerOn"
+            className={styles.mobileLogo}
+          />
+        </div>
         <Outlet />
       </main>
     </div>

src/pages/FeatureView.module.css

@@ -7,6 +7,7 @@
   flex-direction: column;
   height: 100%;
   overflow: hidden;
+  min-height: 0;
 }
 
 .viewHeader {
@@ -101,3 +102,13 @@
 :global(.dark-theme) .accessDenied p {
   color: var(--text-secondary-dark, #aaa);
 }
+
+@media (max-width: 1024px) {
+  .viewHeader {
+    padding: 0.875rem 1rem;
+  }
+
+  .viewContent {
+    padding: 1rem;
+  }
+}

src/pages/admin/Admin.module.css

@@ -659,6 +659,27 @@
   animation: spin 1s linear infinite;
 }
 
+@media (max-width: 1024px) {
+  .pageHeader {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .headerActions {
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .primaryButton,
+  .secondaryButton,
+  .dangerButton {
+    min-height: 40px;
+    white-space: normal;
+  }
+}
+
 /* ============================================== */
 /* Role Permissions Page Styles                   */
 /* ============================================== */

src/pages/basedata/BasedataPages.module.css

@@ -30,6 +30,18 @@
     gap: 0.5rem;
 }
 
+@media (max-width: 1024px) {
+    .header {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .headerButtons {
+        width: 100%;
+        flex-wrap: wrap;
+    }
+}
+
 .createButton,
 .googleButton,
 .microsoftButton {

src/styles/pages.module.css

@@ -3,7 +3,8 @@
     display: flex;
     flex-direction: column;
     align-self: top;
-    height: calc(100vh);
+    height: 100%;
+    min-height: 0;
     font-family: var(--font-family);
 }
 
@@ -258,8 +259,8 @@
     min-height: 0;
     overflow: hidden;
     margin-bottom: 1rem;
-    height: calc(100vh);
-    max-height: calc(100vh);
+    height: 100%;
+    max-height: 100%;
 }
 
 .dashboardTopRow {
@@ -326,8 +327,8 @@
     min-height: 0;
     overflow: hidden;
     margin-bottom: 1rem;
-    height: calc(100vh);
-    max-height: calc(100vh);
+    height: 100%;
+    max-height: 100%;
 }
 
 .chatbotHistoryColumn {
@@ -644,8 +645,8 @@
 @media (max-width: 768px) {
     .pageContainer {
         margin: 10px;
-        height: calc(100vh - 0px);
-        max-height: calc(100vh - 0px);
+        height: 100%;
+        max-height: 100%;
     }
 
     
@@ -659,6 +660,57 @@
     .pageTitle {
         font-size: 1.5rem;
     }
+
+    .headerButtons {
+        width: 100%;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+}
+
+@media (max-width: 1024px) {
+    .dashboardGridLayout {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto;
+        height: auto;
+        max-height: none;
+        overflow: visible;
+    }
+
+    .dashboardTopRow {
+        grid-template-columns: 1fr;
+        grid-column: 1;
+        grid-row: 1;
+        height: auto;
+        overflow: visible;
+    }
+
+    .dashboardBottomRow {
+        grid-column: 1;
+        grid-row: 2;
+    }
+
+    .chatbotTwoColumnLayout {
+        grid-template-columns: 1fr;
+        height: auto;
+        max-height: none;
+        overflow: visible;
+    }
+
+    .dashboardInputGrid {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto auto;
+        height: auto;
+        max-height: none;
+        min-height: 0;
+        padding-bottom: 0;
+    }
+
+    .connectedFilesContainer {
+        grid-column: 1;
+        grid-row: 3;
+        min-height: 220px;
+    }
 }
 
 /* Columns container */