fix: sidebar profile always visible — only .sb-nav scrolls, .sb-foot pinned at bottom

This commit is contained in:
Maxim Dolgolyov
2026-04-14 20:40:45 +03:00
parent f3c9ab860e
commit 6429e07606
2 changed files with 10 additions and 7 deletions
+9 -6
View File
@@ -258,18 +258,15 @@ body {
position: sticky; position: sticky;
top: 0; top: 0;
height: 100vh; height: 100vh;
overflow-y: auto; overflow: hidden; /* sidebar itself does NOT scroll */
overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: rgba(238,242,255,0.94); background: rgba(238,242,255,0.94);
backdrop-filter: blur(28px); backdrop-filter: blur(28px);
border-right: 1.5px solid var(--border); border-right: 1.5px solid var(--border);
padding: 0 10px 16px; padding: 0 10px 0;
z-index: 50; z-index: 50;
scrollbar-width: none;
} }
.app-layout > .sidebar::-webkit-scrollbar { display: none; }
.sb-brand { .sb-brand {
display: flex; display: flex;
@@ -297,7 +294,12 @@ body {
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
flex: 1; flex: 1;
min-height: 0; /* allows flex child to shrink below content size */
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
} }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-link, a.sb-link, button.sb-link { .sb-link, a.sb-link, button.sb-link {
display: flex; display: flex;
@@ -399,9 +401,10 @@ body {
} }
.sb-foot { .sb-foot {
padding-top: 10px; padding: 10px 0 16px;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
margin-top: 6px; margin-top: 6px;
flex-shrink: 0; /* never shrink — always visible at bottom */
} }
.sb-user-row { .sb-user-row {
+1 -1
View File
@@ -71,7 +71,7 @@
${L('/gradebook', 'table', 'Журнал', { cls: 'sb-teacher-only', hidden: !isTch })} ${L('/gradebook', 'table', 'Журнал', { cls: 'sb-teacher-only', hidden: !isTch })}
${L('/admin', 'settings', 'Управление', { id: 'btn-admin', hidden: !isTch })} ${L('/admin', 'settings', 'Управление', { id: 'btn-admin', hidden: !isTch })}
</nav> </nav>
<div style="padding:4px 2px"> <div style="padding:4px 2px;flex-shrink:0">
${isStu ? '<button class="sb-link" id="btn-join" style="display:none" onclick="typeof openJoinModal!==\'undefined\'&&openJoinModal()"><i data-lucide="user-plus" class="sb-icon"></i><span class="sb-lbl">Вступить в класс</span></button>' : ''} ${isStu ? '<button class="sb-link" id="btn-join" style="display:none" onclick="typeof openJoinModal!==\'undefined\'&&openJoinModal()"><i data-lucide="user-plus" class="sb-icon"></i><span class="sb-lbl">Вступить в класс</span></button>' : ''}
<div id="notif-wrap"> <div id="notif-wrap">
<button class="sb-link" id="notif-btn" onclick="LS.notif?.toggle()"> <button class="sb-link" id="notif-btn" onclick="LS.notif?.toggle()">