From 734d943d73dfc8c06d09720434db6dbd77a80a96 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Tue, 19 May 2026 11:13:18 +0200
Subject: [PATCH] Implement full-page planning unit editor layout and enhance
 form behavior

- Added new CSS styles for the planning unit editor to manage scrolling and layout, ensuring a responsive design.
- Updated the TrainingUnitFormShell component to include new class names for better styling and structure.
- Modified the TrainingUnitEditPage to support the new layout, improving user experience when editing training units.
---
 frontend/src/app.css                          | 57 +++++++++++++++++++
 .../planning/TrainingUnitFormShell.jsx        |  6 +-
 frontend/src/pages/TrainingUnitEditPage.jsx   |  4 +-
 3 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index f89aef8..05af7a3 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1450,6 +1450,63 @@ html.modal-scroll-locked .app-main {
   padding-right: var(--page-pad, 16px);
 }
 
+/* Einheiten-Editor (Vollseite): Scroll im Formular, Action Bar am unteren Formularrand */
+.app-main:has(.planning-unit-edit-host) {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.planning-layout:has(.planning-unit-edit-host) {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.planning-layout__main:has(.planning-unit-edit-host) {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.planning-unit-edit-host {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.planning-unit-edit-host__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.page-form-shell--fill {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+.page-form-shell--fill .page-form-shell__scroll {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  overscroll-behavior-x: none;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 4px;
+}
+.page-form-shell--fill .form-action-bar {
+  position: static;
+  margin-top: auto;
+  flex-shrink: 0;
+}
+.form-action-bar--page {
+  flex-shrink: 0;
+}
+
 /* Einstellungen: gleiche Split-Struktur wie Analyse/Admin */
 .settings-shell {
   width: 100%;
diff --git a/frontend/src/components/planning/TrainingUnitFormShell.jsx b/frontend/src/components/planning/TrainingUnitFormShell.jsx
index 875d725..be75b2e 100644
--- a/frontend/src/components/planning/TrainingUnitFormShell.jsx
+++ b/frontend/src/components/planning/TrainingUnitFormShell.jsx
@@ -52,14 +52,14 @@ export default function TrainingUnitFormShell({
   }, [planningClubId, memberClubs])
 
   return (
-    <div data-testid="planning-unit-form">
-      <h1 className="page-title" style={{ marginBottom: '1rem' }}>
+    <div className="planning-unit-edit-host__body" data-testid="planning-unit-form">
+      <h1 className="page-title" style={{ marginBottom: '1rem', flexShrink: 0 }}>
         {editingUnit ? 'Trainingseinheit bearbeiten' : 'Neue Trainingseinheit'}
       </h1>
 
       <form
         id={formId}
-        className="card page-form-shell"
+        className="card page-form-shell page-form-shell--fill"
         style={{ padding: 'clamp(14px, 3vw, 1.75rem)' }}
         onSubmit={(e) => (onSaveAndClose ? onSaveAndClose(e) : onSaveOnly?.(e))}
       >
diff --git a/frontend/src/pages/TrainingUnitEditPage.jsx b/frontend/src/pages/TrainingUnitEditPage.jsx
index 2a980ea..571446f 100644
--- a/frontend/src/pages/TrainingUnitEditPage.jsx
+++ b/frontend/src/pages/TrainingUnitEditPage.jsx
@@ -568,8 +568,8 @@ export default function TrainingUnitEditPage() {
   }
 
   return (
-    <div className="app-page">
-      <p style={{ marginBottom: '0.75rem' }}>
+    <div className="planning-unit-edit-host">
+      <p style={{ marginBottom: '0.75rem', flexShrink: 0 }}>
         <Link to={planningHubPathFromReturnState(location.state?.planningReturn)} style={{ color: 'var(--accent-dark)' }}>
           ← Zurück zur Trainingsplanung
         </Link>