retoor/devplacepy
1
0
Fork 1
Code Issues 44 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Make sticky sidebar/rail columns independently scrollable

Browse Source 
Every sidebar/rail column across the app (feed's left filter panel and
right rail, post detail's left/right rails, profile's sidebar, the
leaderboard's two rails, the dashboard sidebar, and the DeepSearch
citations pane) is `position: sticky` with no max-height or overflow
of its own. When a column's content is taller than the viewport, it
doesn't scroll with the page while pinned - it renders past the
bottom of the screen, unreachable until it "un-sticks" and flies past
during a fast page scroll. Confirmed live: the docs nav sidebar alone
is ~4300px of links against a ~900px viewport.

Each sticky column now gets a max-height matched to its own top
offset, `overflow-y: auto`, `overscroll-behavior: contain`, and a
hidden scrollbar (scrollbar-width/-ms-overflow-style/::-webkit-
scrollbar), the same invisible-scroll recipe already used by the
messages page. Purely additive CSS - no template changes, since every
target already had a distinguishing class.

Fixing the shared `.sidebar-card` component in sidebar.css covers
feed, admin, docs, gists, projects, battles, quizzes, and every
/tools/* page in one place. Also caught and fixed a latent bug along
the way: post.css already neutralized nested `.sidebar-card`s inside
`.post-page-sidebar` (position: static) to stop them independently
double-sticking, but the identical setup on the quiz page
(`.feed-right` wrapping the scoreboard's two `.sidebar-card`s) never
got that override - added the matching `.feed-right .sidebar-card`
rule.

Verified live with Playwright at a squeezed viewport height on feed,
post, profile, leaderboard, docs, and the quiz scoreboard: every
column's scrollTop reaches its true end independently, the center
column never moves, and no scrollbar is visible in any screenshot.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vnp7vzE4hvsytMo5YjszJm
This commit is contained in:
retoor
2026-09-08 20:48:54 +02:00
co-authored by Claude Sonnet 5
parent 82d6628af1
commit d88b3cea8e
8 changed files with 85 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devplacepy/static/css/deepsearch.css
+8
View File
@@ -545,6 +545,9 @@ dp-deepsearch-chat {
.ds-chat-log {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
padding: var(--space-md);
display: flex;
flex-direction: column;
@@ -552,6 +555,11 @@ dp-deepsearch-chat {
min-height: 240px;
}
.ds-chat-log::-webkit-scrollbar {
width: 0;
height: 0;
}
.ds-chat-msg {
display: flex;
}
devplacepy/static/css/feed.css
+26
View File
@@ -221,11 +221,27 @@
.feed-right {
position: sticky;
top: calc(var(--nav-height) + 1rem);
max-height: calc(100vh - var(--nav-height) - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.feed-right::-webkit-scrollbar {
width: 0;
height: 0;
}
.feed-right .sidebar-card {
position: static;
max-height: none;
overflow: visible;
}
.daily-topic-card {
background: var(--bg-card);
border: 1px solid var(--border);
@@ -493,6 +509,16 @@
.leaderboard-page > aside {
position: sticky;
top: calc(var(--nav-height) + 1rem);
max-height: calc(100vh - var(--nav-height) - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.leaderboard-page > aside::-webkit-scrollbar {
width: 0;
height: 0;
}
.leaderboard-main {
devplacepy/static/css/landing.css
+10
View File
@@ -272,6 +272,16 @@
gap: 1rem;
position: sticky;
top: 5rem;
max-height: calc(100vh - 5rem - 1rem);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.dashboard-sidebar::-webkit-scrollbar {
width: 0;
height: 0;
}
.dashboard-sidebar-card {
devplacepy/static/css/post.css
+12
View File
@@ -13,10 +13,22 @@
gap: 1rem;
position: sticky;
top: calc(var(--nav-height) + 1rem);
max-height: calc(100vh - var(--nav-height) - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.post-page-sidebar::-webkit-scrollbar {
width: 0;
height: 0;
}
.post-page-sidebar .sidebar-card {
position: static;
max-height: none;
overflow: visible;
}
.post-page {
devplacepy/static/css/profile.css
+10
View File
@@ -10,9 +10,19 @@
.profile-sidebar {
position: sticky;
top: calc(var(--nav-height) + 1rem);
max-height: calc(100vh - var(--nav-height) - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
min-width: 0;
}
.profile-sidebar::-webkit-scrollbar {
width: 0;
height: 0;
}
.profile-card {
background: var(--bg-card);
border: 1px solid var(--border);
devplacepy/static/css/project_files.css
+8
View File
@@ -53,11 +53,19 @@
width: 280px;
flex-shrink: 0;
overflow: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0.5rem;
border-right: 1px solid var(--border);
background: var(--bg-card-hover);
}
.pf-tree::-webkit-scrollbar {
width: 0;
height: 0;
}
.pf-tree-empty {
padding: 1rem;
font-size: 0.8125rem;
devplacepy/static/css/sidebar.css
+10
View File
@@ -3,6 +3,11 @@
.sidebar-card {
position: sticky;
top: calc(var(--nav-height) + 1rem);
max-height: calc(100vh - var(--nav-height) - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
@@ -10,6 +15,11 @@
padding: 1rem;
}
.sidebar-card::-webkit-scrollbar {
width: 0;
height: 0;
}
.sidebar-card .sidebar-heading {
font-size: 0.75rem;
font-weight: 700;
pyproject.toml
+1 -1
View File
@@ -1,6 +1,6 @@
[project]
name = "devplacepy"
version = "1.0.10"
version = "1.0.11"
description = "DevPlace - The Developer Social Network"
requires-python = ">=3.12"
dependencies = [