fix(fe): sidebar footer alignment and scroll structure
Changes: • Reorganize footer: buttons first, version text below • Add .ks-sidebar__footer-buttons wrapper for proper layout • Style .ks-sidebar__version as small caption text (10px) • Fix sidebar scroll: sidebar overflow: hidden, nav: overflow-y: auto only • Add flex-shrink: 0 to footer (prevent size collapse) This prevents: ✓ Nested scroll (sidebar + nav both scrolling) ✓ Awkward footer alignment ✓ Footer contributing to layout scroll Single-scroll principle: only .nav scrolls, header/footer fixed Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -196,23 +196,25 @@ const sidebarClass = computed(() => ({
|
|||||||
|
|
||||||
<!-- Sidebar footer -->
|
<!-- Sidebar footer -->
|
||||||
<div class="ks-sidebar__footer">
|
<div class="ks-sidebar__footer">
|
||||||
|
<div class="ks-sidebar__footer-buttons">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="ks-sidebar__footer-btn"
|
||||||
|
title="도움말"
|
||||||
|
>
|
||||||
|
❓
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="ks-sidebar__footer-btn"
|
||||||
|
title="설정"
|
||||||
|
>
|
||||||
|
⚙️
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div v-if="!collapsed" class="ks-sidebar__version">
|
<div v-if="!collapsed" class="ks-sidebar__version">
|
||||||
v{{ appVersion }}
|
v{{ appVersion }}
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="ks-sidebar__footer-btn"
|
|
||||||
title="도움말"
|
|
||||||
>
|
|
||||||
❓
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="ks-sidebar__footer-btn"
|
|
||||||
title="설정"
|
|
||||||
>
|
|
||||||
⚙️
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</template>
|
</template>
|
||||||
@@ -225,8 +227,7 @@ const sidebarClass = computed(() => ({
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
overflow-y: auto;
|
overflow: hidden;
|
||||||
overflow-x: hidden;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -378,6 +379,21 @@ const sidebarClass = computed(() => ({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-2);
|
gap: var(--spacing-2);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ks-sidebar__footer-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ks-sidebar__version {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--ks-color-text-muted);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ks-sidebar__footer-btn {
|
.ks-sidebar__footer-btn {
|
||||||
|
|||||||
Reference in New Issue
Block a user