Refactor layout for improved responsiveness and scroll control

Updated the app layout to separate fixed and scrollable sections, enabling only the notes panel to scroll. Introduced a new CSS file for a cleaner structure and responsive behavior, ensuring a more consistent user experience across different screen sizes.

frontend/src/App.jsx

@@ -13,6 +13,8 @@ import LoginPage from "./components/LoginPage";
 import SheetSection from "./components/SheetSection";
 import ChipModal from "./components/ChipModal";
 
+import "./AppLayout.css";
+
 export default function App() {
   useHpGlobalStyles();
 
@@ -263,36 +265,26 @@ export default function App() {
         <div style={styles.bgMap} />
       </div>
 
-      {/* Layout: Links Game/Board, Rechts Notizen */}
-      <div
-        style={{
-          ...styles.shell,
-          display: "grid",
-          gridTemplateColumns: "1fr clamp(420px, 28vw, 560px)",
-          gap: 14,
-          alignItems: "start",
-        }}
-      >
-        {/* LEFT: Game Area (Placeholders) */}
-        <div style={{ display: "grid", gap: 14 }}>
+      {/* Layout: Links Game/Board (fix), Rechts Notizen (scroll) */}
+      <div className="appRoot">
+        {/* LEFT: Game Area */}
+        <section className="leftPane">
           {/* Top bar placeholders (User + Settings) */}
-          <div style={{ display: "flex", gap: 10, justifyContent: "space-between" }}>
+          <div className="topBarRow">
             <PlaceholderCard title="User Dropdown" hint="(placeholder)" />
             <PlaceholderCard title="Einstellungen" hint="(placeholder)" />
           </div>
 
           {/* Center Board */}
           <div
+            className="boardWrap"
             style={{
-              borderRadius: 22,
               border: `1px solid ${stylesTokens.panelBorder}`,
               background: stylesTokens.panelBg,
               boxShadow: "0 20px 70px rgba(0,0,0,0.45)",
               backdropFilter: "blur(10px)",
               padding: 12,
               position: "relative",
-              overflow: "hidden",
-              minHeight: 420,
             }}
           >
             <div
@@ -304,7 +296,7 @@ export default function App() {
                 pointerEvents: "none",
               }}
             />
-            <div style={{ position: "relative" }}>
+            <div style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column" }}>
               <div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}>
                 3D Board / Game View
               </div>
@@ -315,72 +307,67 @@ export default function App() {
               <div
                 style={{
                   marginTop: 10,
-                  height: 360,
+                  flex: 1,
                   borderRadius: 18,
                   border: `1px dashed ${stylesTokens.panelBorder}`,
                   opacity: 0.85,
+                  minHeight: 0,
                 }}
               />
             </div>
           </div>
 
-          {/* Bottom row placeholders */}
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1.1fr 0.8fr 1.1fr",
-              gap: 14,
-            }}
-          >
+          {/* Bottom HUD */}
+          <div className="bottomHud">
             <PlaceholderCard title="Meine Geheimkarten" hint="(placeholder)" />
             <PlaceholderCard title="Würfel + Hogwarts Points" hint="(placeholder)" />
             <PlaceholderCard title="Spielerkarte / Turn" hint="(placeholder)" />
           </div>
 
           {/* Extra: Hilfskarten / Deck */}
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
+          <div className="extraRow">
             <PlaceholderCard title="Dunkles Deck" hint="(placeholder)" />
             <PlaceholderCard title="Hilfskarten" hint="(placeholder)" />
           </div>
-        </div>
+        </section>
 
         {/* RIGHT: Notes Panel */}
-        <div
+        <aside
+          className="notesPane"
           style={{
-            position: "sticky",
-            top: 14,
-            alignSelf: "start",
             borderRadius: 22,
             border: `1px solid ${stylesTokens.panelBorder}`,
             background: stylesTokens.panelBg,
             boxShadow: "0 22px 90px rgba(0,0,0,0.55)",
             backdropFilter: "blur(10px)",
             padding: 12,
-            maxHeight: "calc(100vh - 28px)",
-            overflow: "auto",
           }}
         >
-          <div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}>
-            Notizen
-          </div>
-          <div style={{ marginTop: 6, color: stylesTokens.textDim, fontSize: 12 }}>
-            Nur die 3 Tabellen (Verdächtige / Gegenstände / Orte).
+          <div>
+            <div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}>
+              Notizen
+            </div>
+            <div style={{ marginTop: 6, color: stylesTokens.textDim, fontSize: 12 }}>
+              Nur die 3 Tabellen (Verdächtige / Gegenstände / Orte).
+            </div>
           </div>
 
-          <div style={{ marginTop: 12, display: "grid", gap: 14 }}>
-            {sections.map((sec) => (
-              <SheetSection
-                key={sec.key}
-                title={sec.title}
-                entries={sec.entries}
-                pulseId={pulseId}
-                onCycleStatus={cycleStatus}
-                onToggleTag={toggleTag}
-                displayTag={displayTag}
-              />
-            ))}
+          <div className="notesScroll">
+            <div style={{ marginTop: 12, display: "grid", gap: 14 }}>
+              {sections.map((sec) => (
+                <SheetSection
+                  key={sec.key}
+                  title={sec.title}
+                  entries={sec.entries}
+                  pulseId={pulseId}
+                  onCycleStatus={cycleStatus}
+                  onToggleTag={toggleTag}
+                  displayTag={displayTag}
+                />
+              ))}
+            </div>
           </div>
-        </div>
+        </aside>
       </div>
 
       <ChipModal

frontend/src/AppLayout.css

@@ -0,0 +1,89 @@
+/* Desktop-only layout: left fixed (no scroll), right notes scroll only */
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  overflow: hidden; /* no page scroll, only notes panel scrolls */
+}
+
+.appRoot {
+  height: 100vh;
+  display: grid;
+  grid-template-columns: minmax(720px, 1fr) clamp(380px, 32vw, 520px);
+  gap: 14px;
+  padding: 14px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.leftPane {
+  overflow: hidden;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: 72px minmax(340px, 1fr) 160px 110px; /* top / board / hud / extra */
+  gap: 14px;
+}
+
+.topBarRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  min-width: 0;
+}
+
+.boardWrap {
+  min-height: 0;
+  overflow: hidden;
+  border-radius: 22px;
+}
+
+.bottomHud {
+  min-height: 0;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1.15fr 0.9fr 1.15fr;
+  gap: 14px;
+}
+
+.extraRow {
+  min-height: 0;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.notesPane {
+  overflow: hidden;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.notesScroll {
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 4px;
+}
+
+/* Make it shrink gracefully on smaller viewports */
+@media (max-height: 860px) {
+  .leftPane {
+    grid-template-rows: 64px minmax(280px, 1fr) 140px 96px;
+  }
+}
+
+@media (max-width: 1280px) {
+  .appRoot {
+    grid-template-columns: minmax(620px, 1fr) clamp(340px, 34vw, 480px);
+  }
+}
+
+@media (max-width: 1120px) {
+  .appRoot {
+    grid-template-columns: 1fr clamp(320px, 36vw, 440px);
+  }
+}

frontend/src/styles/hooks/useHpGlobalStyles.js

@@ -2,8 +2,6 @@ import { useEffect } from "react";
 import { stylesTokens } from "../theme";
 import { applyTheme } from "../themes";
 
-
-
 export function useHpGlobalStyles() {
   // Google Fonts
   useEffect(() => {
@@ -76,8 +74,7 @@ export function useHpGlobalStyles() {
         color: ${stylesTokens.textMain};
       }
       body {
-        overflow-x: hidden;
-        -webkit-overflow-scrolling: touch;
+        overflow: hidden;
       }
       #root { background: transparent; }
       * { -webkit-tap-highlight-color: transparent; }