From 85e52d9336a20b2cfd61cdc34ad4d072d02b7202 Mon Sep 17 00:00:00 2001
From: Jakub Zych <jakub@keios.eu>
Date: Fri, 16 Oct 2026 11:41:19 +0200
Subject: [PATCH] fix(quick-261016-0fm): bottom save bars no longer cover the
 sidebar

AppShell exposes --shell-offset (the rail, plus the section panel when it
shows); the form, settings, My account and preview save bars start there,
so the rail's Settings item stays visible and clickable.
---
 admin/src/components/shell/AppShell.vue | 9 ++++++++-
 admin/src/views/AccountView.vue         | 2 +-
 admin/src/views/FormView.vue            | 2 +-
 admin/src/views/PreviewView.vue         | 2 +-
 admin/src/views/SettingsFormView.vue    | 2 +-
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/admin/src/components/shell/AppShell.vue b/admin/src/components/shell/AppShell.vue
index 91b0f85..444ff83 100644
--- a/admin/src/components/shell/AppShell.vue
+++ b/admin/src/components/shell/AppShell.vue
@@ -27,10 +27,17 @@ onBeforeUnmount(stopViewport)
 const siteURL = `${window.location.origin}/`
 
 const active = computed(() => activeEntry(String(route.params.vendor ?? ''), String(route.params.plugin ?? '')))
+
+// --shell-offset is the width the sidebar occupies (the rail, plus the
+// section panel when it shows). Fixed bottom save bars start there, so the
+// rail's Settings item is never covered.
+const shellOffset = computed(() =>
+  active.value && !collapsed.value ? 'calc(var(--spacing-rail) + var(--spacing-panel))' : 'var(--spacing-rail)',
+)
 </script>
 
 <template>
-  <div class="flex min-h-screen bg-bg text-text">
+  <div class="flex min-h-screen bg-bg text-text" :style="{ '--shell-offset': shellOffset }">
     <PluginRail />
     <SectionPanel v-if="active && !collapsed" :entry="active" />
     <div class="flex min-w-0 flex-1 flex-col">
diff --git a/admin/src/views/AccountView.vue b/admin/src/views/AccountView.vue
index 44276e2..29a1c37 100644
--- a/admin/src/views/AccountView.vue
+++ b/admin/src/views/AccountView.vue
@@ -422,7 +422,7 @@ async function onSave(): Promise<void> {
     />
 
     <footer
-      class="fixed inset-x-0 bottom-0 z-30 flex items-center justify-end gap-2.5 border-t border-border bg-surface px-8 py-3.5"
+      class="fixed right-0 bottom-0 left-[var(--shell-offset,0px)] z-30 flex items-center justify-end gap-2.5 border-t border-border bg-surface px-8 py-3.5"
     >
       <Button variant="primary" data-action="save" :disabled="busy" @click="onSave">
         {{ busy ? t('backend::lang.form.saving') : t('backend::lang.form.save') }}
diff --git a/admin/src/views/FormView.vue b/admin/src/views/FormView.vue
index ada2352..e33162b 100644
--- a/admin/src/views/FormView.vue
+++ b/admin/src/views/FormView.vue
@@ -593,7 +593,7 @@ void load()
     </template>
 
     <footer
-      class="fixed inset-x-0 bottom-0 z-30 flex items-center gap-2.5 border-t border-border bg-surface px-8 py-3.5"
+      class="fixed right-0 bottom-0 left-[var(--shell-offset,0px)] z-30 flex items-center gap-2.5 border-t border-border bg-surface px-8 py-3.5"
     >
       <Button
         v-if="mode === 'update' && !singleton"
diff --git a/admin/src/views/PreviewView.vue b/admin/src/views/PreviewView.vue
index 985ccbf..684a2ed 100644
--- a/admin/src/views/PreviewView.vue
+++ b/admin/src/views/PreviewView.vue
@@ -282,7 +282,7 @@ void load()
     </template>
 
     <footer
-      class="fixed inset-x-0 bottom-0 z-30 flex flex-wrap items-center gap-2.5 border-t border-border bg-surface px-8 py-3.5"
+      class="fixed right-0 bottom-0 left-[var(--shell-offset,0px)] z-30 flex flex-wrap items-center gap-2.5 border-t border-border bg-surface px-8 py-3.5"
     >
       <div class="ml-auto flex flex-wrap items-center gap-2.5">
         <RecordActions
diff --git a/admin/src/views/SettingsFormView.vue b/admin/src/views/SettingsFormView.vue
index 5701986..2fb3abe 100644
--- a/admin/src/views/SettingsFormView.vue
+++ b/admin/src/views/SettingsFormView.vue
@@ -219,7 +219,7 @@ void load()
       </form>
     </template>
 
-    <footer class="fixed inset-x-0 bottom-0 z-30 flex items-center justify-end gap-2.5 border-t border-border bg-surface px-8 py-3.5">
+    <footer class="fixed right-0 bottom-0 left-[var(--shell-offset,0px)] z-30 flex items-center justify-end gap-2.5 border-t border-border bg-surface px-8 py-3.5">
       <Button variant="ghost" to="/settings">{{ t('backend::lang.form.cancel') }}</Button>
       <Button variant="primary" data-action="save" :disabled="busy || loading || !schema" @click="onSave">
         {{ busy ? t('backend::lang.form.saving') : t('backend::lang.form.save') }}