diff --git a/frontend/src/app.css b/frontend/src/app.css
index ebbfa05..0c500ce 100644
--- a/frontend/src/app.css
+++ b/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;
-}
-.page-form-editor__header-actions .form-action-bar {
- position: static;
- border: none;
- box-shadow: none;
- padding: 0;
- margin: 0;
- background: transparent;
-}
+
+/* Ersetzt Bottom-Nav (Mobile) bzw. schwebt unten fix (Desktop) — nur Breite per Breakpoint */
.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;
- }
-}
-
-@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);
+ left: var(--desktop-sidebar-width, 220px);
+ width: calc(100% - var(--desktop-sidebar-width, 220px));
}
}
diff --git a/frontend/src/components/PageFormEditorChrome.jsx b/frontend/src/components/PageFormEditorChrome.jsx
index 4395664..57151be 100644
--- a/frontend/src/components/PageFormEditorChrome.jsx
+++ b/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 (
-