Revert sticky-column max-height capping - it truncated shorter columns
The previous fix (d88b3cea) gave every sticky sidebar/rail a
viewport-derived max-height + internal overflow-y:auto so a tall
column's content couldn't get skipped during a fast sticky unstick.
That solved reachability but broke something more visible: on any
page where a side column is naturally SHORTER than the page's tallest
column (the common case - main content usually exceeds the sidebars),
the row/page still grows to the tallest column's height, but the
capped side column's own box now stops at its cap and never continues,
leaving a large empty gap below it for the remainder of the row. On
the reported post page this cut "Related Discussions"/"Projects from"
off mid-list with dead space underneath, i.e. the site was no longer
"at least as long as its longest section" in the sense that mattered:
a shorter section's own rendered box stopped short of the room the
page actually had for it.
Verified empirically (not just by reasoning about sticky/grid
semantics, which are easy to get wrong) that plain `position: sticky`
with no cap already guarantees every part of a column becomes visible
at some point during ordinary page scroll, for any pair of column
heights on a page whose main content is bounded (post, profile,
leaderboard, docs, quiz scoreboard) - the browser's native stuck ->
released transition is smooth and passes the element's full content
through the viewport once its own natural height's worth of scroll
distance has elapsed, regardless of how much taller the other columns
are. Removed max-height/overflow-y/overscroll-behavior/scrollbar-
hiding from .sidebar-card, .feed-right, .leaderboard-page > aside,
.post-page-sidebar, .profile-sidebar, and .dashboard-sidebar, back to
plain sticky; simplified the nested-.sidebar-card overrides (needed
only to stop double-nested stickiness) to just `position: static`.
.ds-chat-log and .pf-tree keep their scrollbar-hiding - those are
genuinely bounded, self-contained widget panes (not page-scroll sticky
columns) and were never part of this problem.
Verified on the exact reported URL (devplace.net/posts/
607ebbd19b95-...): document height now matches the tallest column
(1494px, driven by the 1265px main column), every one of the 11
related-title entries across all three sidebar sections becomes
visible during a full incremental scroll, and the full-page screenshot
shows no truncation or dead space. Also verified full reachability
(every item seen, nothing capped) on profile, leaderboard, docs nav,
and the quiz scoreboard.
Known residual trade-off, not fixed here: on a page whose main column
is effectively unbounded (the feed's post listing), a side column
taller than one viewport only fully reveals its tail in the scroll
range immediately before the very end of that (very long) page, which
real users rarely reach. Fixing that would need an actual
independent-scroll-pane architecture (JS-driven), not a CSS-only
sticky pattern, and reintroduces the same capped/dead-space trade-off
this commit just removed - flagging it rather than silently
overclaiming full coverage.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vnp7vzE4hvsytMo5YjszJm
This commit is contained in:
@@ -221,25 +221,13 @@
|
||||
.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 {
|
||||
@@ -509,16 +497,6 @@
|
||||
.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 {
|
||||
|
||||
@@ -272,16 +272,6 @@
|
||||
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 {
|
||||
|
||||
@@ -13,22 +13,10 @@
|
||||
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 {
|
||||
|
||||
@@ -10,19 +10,9 @@
|
||||
.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);
|
||||
|
||||
@@ -3,11 +3,6 @@
|
||||
.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);
|
||||
@@ -15,11 +10,6 @@
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-card::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.sidebar-card .sidebar-heading {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
[project]
|
||||
name = "devplacepy"
|
||||
version = "1.0.12"
|
||||
version = "1.0.13"
|
||||
description = "DevPlace - The Developer Social Network"
|
||||
requires-python = ">=3.12"
|
||||
dependencies = [
|
||||
|
||||
Reference in New Issue
Block a user