From a289346fdcc6c0dd61557c49b5fbc3cc8f203f7e Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Sat, 25 Jul 2026 20:27:09 +0800
Subject: [PATCH] fix: revert to flexbox with height:100vh, fix footer
 visibility

- height:100vh (not min-height) so align-items:stretch actually works
- Footer shows when expanded, hides when collapsed (dynamic class)
- Remove align-self:stretch (unnecessary with flex stretch)
- Restore flex-shrink on divider
---
 src/App.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b911e61..96c2648 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -150,8 +150,8 @@ onUnmounted(() => {
           <span class="gs-nav-label">{{ t('nav.client') }}</span>
         </router-link>
       </nav>
-    <div class="gs-divider gs-hidden"></div>
-      <div class="gs-footer gs-hidden">
+    <div class="gs-divider" :class="{ 'gs-hidden': sidebarCollapsed }"></div>
+      <div class="gs-footer" :class="{ 'gs-hidden': sidebarCollapsed }">
         <div class="gs-lang-switcher">
           <select v-model="currentLanguage" @change="onChangeLanguage" class="gs-lang-select">
             <option value="en">English</option>
@@ -192,8 +192,8 @@ onUnmounted(() => {
 
 <style scoped>
 * { margin: 0; padding: 0; box-sizing: border-box; }
-#app, .ms-app { background: var(--background-color) !important; display: grid; grid-template-columns: auto 28px 1fr; max-width: 1400px; margin: 0 auto; padding: 28px; gap: 0; min-height: 100vh; box-sizing: border-box; }
-.ms-side { width: 240px; min-width: 240px; background: var(--card-background) !important; border-radius: 18px; padding: 18px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; overflow: visible; align-self: stretch; }
+#app, .ms-app { background: var(--background-color) !important; display: flex; max-width: 1400px; margin: 0 auto; padding: 28px; gap: 0; height: 100vh; box-sizing: border-box; align-items: stretch; }
+.ms-side { width: 240px; min-width: 240px; background: var(--card-background) !important; border-radius: 18px; padding: 18px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; overflow: visible; }
 .ms-side.collapsed { align-items: center; padding: 18px 8px; }
 .ms-side.collapsed .gs-nav { align-items: center; width: 100%; }
 .ms-side.collapsed .gs-nav-item { justify-content: center; padding: 0; width: 44px; }
@@ -210,7 +210,7 @@ onUnmounted(() => {
 .ms-side.collapsed .gs-sidebar-toggle { justify-content: center; width: 100%; }
 .ms-side.collapsed .gs-sidebar-toggle svg { transform: rotate(180deg); }
 .gs-logo-collapsed { text-align: center; padding: 8px 4px 16px 4px; font-size: 14px; }
-.ms-divider { width: 28px; cursor: col-resize; display: flex; align-items: center; justify-content: center; }
+.ms-divider { width: 28px; flex-shrink: 0; cursor: col-resize; display: flex; align-items: center; justify-content: center; }
 .ms-divider-hidden { cursor: default; pointer-events: none; opacity: 0; }
 .ms-divider::after { content: ''; width: 4px; height: 40px; background: var(--border-color); border-radius: 2px; transition: background 0.2s, height 0.2s; }
 .ms-divider:hover::after { background: var(--primary-color); height: 60px; }
@@ -231,6 +231,6 @@ onUnmounted(() => {
 .gs-logout-btn:hover { color: var(--danger-color); border-color: var(--danger-color); background: var(--danger-background); }
 .gs-login-link { font-size: 12px; color: var(--text-secondary); text-decoration: none; }
 .gs-login-link:hover { color: var(--text-primary); }
-.ms-main { flex: 1; min-width: 0; background: var(--card-background) !important; border-radius: 18px; padding: 36px 42px; overflow-y: auto; overflow-x: hidden; align-self: stretch; }
+.ms-main { flex: 1; min-width: 0; background: var(--card-background) !important; border-radius: 18px; padding: 36px 42px; overflow-y: auto; overflow-x: hidden; }
 .ms-content { max-width: 1200px; }
 </style>