From 411ff146a75002a4f30539b8cbee576cb214d5cf Mon Sep 17 00:00:00 2001
From: Z User <z@container>
Date: Mon, 10 Aug 2026 17:12:42 +0000
Subject: [PATCH] Fix: Digitale Hefte modal/editor sizing - fits within
 viewport

- Changed notebook editor container from min-h-screen to h-[calc(100vh-8rem)]
  This constrains the editor to the available viewport height
- Added overflow-hidden to the container to prevent content spilling
- Fixed page list ScrollArea: max-h-[calc(100vh-350px)] with min-h-0
  for proper flex shrinking within the editor
- Added overflow-y-auto to main content area in app-layout
  Allows scroll when content exceeds viewport without breaking layout
---
 src/components/app-layout.tsx     | 2 +-
 src/components/notebooks-view.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/app-layout.tsx b/src/components/app-layout.tsx
index 99f9583..afdadca 100644
--- a/src/components/app-layout.tsx
+++ b/src/components/app-layout.tsx
@@ -1416,7 +1416,7 @@ export default function AppLayout() {
           </div>
         </header>
 
-        <div className="flex-1 p-4 md:p-6 bg-gradient-to-br from-white via-white to-emerald-50/20 dark:from-gray-950 dark:via-gray-950 dark:to-emerald-950/10">
+        <div className="flex-1 p-4 md:p-6 overflow-y-auto bg-gradient-to-br from-white via-white to-emerald-50/20 dark:from-gray-950 dark:via-gray-950 dark:to-emerald-950/10">
           <AnimatePresence mode="wait">
             <motion.div
               key={currentView}
diff --git a/src/components/notebooks-view.tsx b/src/components/notebooks-view.tsx
index e9c6c6f..06c09cd 100755
--- a/src/components/notebooks-view.tsx
+++ b/src/components/notebooks-view.tsx
@@ -2533,7 +2533,7 @@ function NotebookDetailView({
             </Button>
           </div>
 
-          <ScrollArea className="flex-1 max-h-[calc(100vh-280px)]">
+          <ScrollArea className="flex-1 max-h-[calc(100vh-350px)] min-h-0">
             <div className="p-2 space-y-2">
               {pages.map((page, idx) => {
                 const isDragged = draggedPageId === page.id;
@@ -4668,7 +4668,7 @@ export default function NotebooksView() {
 
   if (selectedNotebook) {
     return (
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="h-[calc(100vh-8rem)] bg-gray-50 dark:bg-gray-950 rounded-lg overflow-hidden">
         <NotebookDetailView
           notebook={selectedNotebook}
           subjectName={selectedNotebook.subjectId ? subjectNameMap[selectedNotebook.subjectId] ?? null : null}