mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-08-02 11:24:55 -04:00
Code Issues Packages Projects Releases Wiki Activity

Adjust sticky rail offsets and max-height calculations for improved viewport usage

Browse Source
This commit is contained in:
MartinBraquet
2026-07-31 17:59:23 +02:00
parent 339984f64f
commit 37e8a420d6
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/profile/profile-info.tsx
View File

@@ -483,10 +483,13 @@ function ProfileContent(props: {
`row-span-2` gives the sticky element a containing block taller than itself, which is what
it needs to have anywhere to travel. */}
<ScrollPanel
className="lg:sticky lg:top-24 lg:col-start-2 lg:row-span-2 lg:row-start-1"
className="lg:sticky lg:top-6 lg:col-start-2 lg:row-span-2 lg:row-start-1"
// `lg:pr-5` is the gutter the card's padding used to provide: without it the values, the
// Big Five numbers in particular, sit hard against the scrollbar and get clipped by it.
scrollClassName="lg:overflow-y-auto lg:max-h-[calc(100vh-8rem)] lg:pr-5"
// The offset is small because nothing is pinned over the top of this page on desktop — the
// nav is the left column, not a bar — so anything larger is just unused viewport: the rail
// is the tallest thing here and every pixel of the cap is a pixel less to scroll.
scrollClassName="lg:overflow-y-auto lg:max-h-[calc(100vh-3rem)] lg:pr-5"
fadeColorClass="from-canvas-100 to-transparent"
>
<RailBlocks profile={profile} userActivity={userActivity} isCurrentUser={isCurrentUser} />