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

@@ -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}

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}