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 ( - - ) - }, [actionConfig]) - return (
-
- {backTo ? ( - - ← {backLabel} - - ) : null} -

{title}

-
- {headerBar ? ( -
{headerBar}
+ {backTo ? ( + + ← {backLabel} + ) : null} +

{title}

{children}