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 -->
|
||||
<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">
|
||||
v{{ appVersion }}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ks-sidebar__footer-btn"
|
||||
title="도움말"
|
||||
>
|
||||
❓
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ks-sidebar__footer-btn"
|
||||
title="설정"
|
||||
>
|
||||
⚙️
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -225,8 +227,7 @@ const sidebarClass = computed(() => ({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -378,6 +379,21 @@ const sidebarClass = computed(() => ({
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user