stwaidele/dorfteich
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 22 Wiki Activity

Sidebar: pin the action icon row to the visible bottom (#129)

Browse Source 
.sidebar is itself the scroll container, so the footer's margin-top:
auto only pinned the icon row to the end of the CONTENT — behind the
fold on long page lists. The row is now position: sticky with negative
bottom/side margins undoing the sidebar padding, a background, and a
top border, so the list scrolls away beneath it and the four actions
stay visible at any list length. The import progress list keeps
floating above the row (absolute within the sticky footer).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fb2VzvcoBPHkjh8bZ6PzQn
This commit is contained in:
Claude Fable 5 2026-07-16 12:02:40 +02:00
parent 1b9dd7d475
commit 31557f09e5
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web/src/styles/base.css
View File

@ -1759,8 +1759,17 @@ button {
} }
.sidebar__footer { .sidebar__footer {
margin-top: auto; /* #129: .sidebar is the scroll container, so margin-top: auto alone only
padding-top: var(--space-4); pins the row to the END of the content — behind the fold on long page
lists. Sticky keeps it visible; the negative bottom/side margins undo
the sidebar padding so the bar sits flush and covers the scrolling
list across the full width. */
position: sticky;
bottom: calc(-1 * var(--space-4));
margin: auto calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
padding: var(--space-2) var(--space-4);
background: var(--color-bg-subtle);
border-top: 1px solid var(--color-border);
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-1); gap: var(--space-1);