Refactor full-page editor layout and enhance mobile dock functionality

- Updated CSS styles for the full-page editor, modifying the header to include a back link and title, while fixing the action dock for all viewports.
- Removed the sticky header and integrated the action bar at the bottom for improved usability across devices.
- Simplified the PageFormEditorChrome component by eliminating unnecessary memoization and restructuring the header layout.

frontend/src/app.css

@@ -1450,14 +1450,10 @@ html.modal-scroll-locked .app-main {
   padding-right: var(--page-pad, 16px);
 }
 
-/* Vollseiten-Editor: Kopfzeile (Desktop) + Mobile-Dock statt Bottom-Nav */
+/* Vollseiten-Editor: Kopfzeile (Zurück/Titel) + fixiertes Action-Dock unten (alle Viewports) */
 .page-form-editor__header {
-  position: sticky;
-  top: 0;
-  z-index: 12;
-  background: var(--bg);
-  padding-bottom: 0.75rem;
   margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
   border-bottom: 1px solid var(--border);
 }
 .page-form-editor__intro {
@@ -1476,17 +1472,8 @@ html.modal-scroll-locked .app-main {
   font-size: clamp(1.15rem, 4vw, 1.45rem);
   line-height: 1.25;
 }
-.page-form-editor__header-actions {
+
-  display: none;
+/* Ersetzt Bottom-Nav (Mobile) bzw. schwebt unten fix (Desktop) — nur Breite per Breakpoint */
-}
-.page-form-editor__header-actions .form-action-bar {
-  position: static;
-  border: none;
-  box-shadow: none;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-}
 .form-editor-mobile-dock {
   position: fixed;
   left: 0;
@@ -1499,7 +1486,7 @@ html.modal-scroll-locked .app-main {
   border-top: 1px solid var(--border);
   box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
   padding: var(--nav-pad-top, 8px) max(10px, env(safe-area-inset-right, 0px))
-    env(safe-area-inset-bottom, 0px) max(10px, env(safe-area-inset-left, 0px));
+    max(8px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
   box-sizing: border-box;
 }
 .form-editor-mobile-dock .form-action-bar {
@@ -1507,29 +1494,17 @@ html.modal-scroll-locked .app-main {
   border: none;
   box-shadow: none;
   margin: 0;
+  padding-bottom: 0;
+}
+
+.app-shell__column:has(.form-editor-mobile-dock) .app-main {
+  padding-bottom: calc(56px + var(--nav-pad-top, 8px) + env(safe-area-inset-bottom, 0px) + 16px);
 }
 
 @media (min-width: 1024px) {
-  .page-form-editor__header {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 12px 16px;
-  }
-  .page-form-editor__header-actions {
-    display: block;
-    flex: 1 1 320px;
-    min-width: min(100%, 420px);
-  }
   .form-editor-mobile-dock {
-    display: none !important;
+    left: var(--desktop-sidebar-width, 220px);
-  }
+    width: calc(100% - var(--desktop-sidebar-width, 220px));
-}
-
-@media (max-width: 1023px) {
-  .app-shell__column:has(.form-editor-mobile-dock) .app-main {
-    padding-bottom: calc(52px + var(--nav-pad-top, 8px) + env(safe-area-inset-bottom, 0px) + 12px);
   }
 }
 

frontend/src/components/PageFormEditorChrome.jsx

@@ -1,10 +1,9 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
-import FormActionBar from './FormActionBar'
 import { useFormEditorActions } from '../context/FormEditorActionsContext'
 
 /**
- * Vollseiten-Editor: sticky Kopfzeile (Desktop) + Mobile-Dock via FormEditorActionsProvider.
+ * Vollseiten-Editor: Zurück/Titel oben; FormActionBar fix unten (alle Viewports via FormEditorBottomSlot).
  */
 export default function PageFormEditorChrome({
   title,
@@ -16,31 +15,15 @@ export default function PageFormEditorChrome({
 }) {
   useFormEditorActions(actionConfig)
 
-  const headerBar = useMemo(() => {
-    if (!actionConfig) return null
-    return (
-      <FormActionBar
-        {...actionConfig}
-        placement="top"
-        variant="page"
-      />
-    )
-  }, [actionConfig])
-
   return (
     <div className="page-form-editor" data-testid={testId}>
       <header className="page-form-editor__header">
-        <div className="page-form-editor__intro">
         {backTo ? (
           <Link to={backTo} className="page-form-editor__back">
             ← {backLabel}
           </Link>
         ) : null}
         <h1 className="page-form-editor__title">{title}</h1>
-        </div>
-        {headerBar ? (
-          <div className="page-form-editor__header-actions">{headerBar}</div>
-        ) : null}
       </header>
       <div className="page-form-editor__body">{children}</div>
     </div>