Pin sidebar footer always visible (fixes #623)

[Chris0Jeky]

Summary

• Add height: 100vh (with 100dvh fallback) to .td-sidebar so the sidebar fills the viewport height on desktop
• Add overflow-y: auto to .td-sidebar__nav so navigation scrolls independently when items overflow
• Add flex-shrink: 0 to .td-sidebar__footer to prevent the footer from being compressed

The footer (keyboard shortcuts help + logout) now stays pinned at the bottom of the sidebar regardless of how many nav items are present.

Closes #623

Test plan

• Verify footer is always visible at the bottom of the sidebar on desktop
• Verify nav section scrolls when there are many nav items (e.g., workbench mode with all features enabled)
• Verify mobile sidebar (< 640px) still works correctly (it already uses position: fixed with top/bottom: 0)
• Verify collapsed sidebar still displays footer correctly
• Verify typecheck and build pass (confirmed locally)

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[Chris0Jeky]

Self-review

Diff reviewed: 3 CSS property additions in ShellSidebar.vue, no template or script changes.

What the change does

1. height: 100vh / height: 100dvh on .td-sidebar -- constrains sidebar to viewport height so the flex column layout can pin the footer
2. overflow-y: auto on .td-sidebar__nav -- makes the nav section scroll when items exceed available space
3. flex-shrink: 0 on .td-sidebar__footer -- prevents footer from being compressed by flex layout

Compatibility check

• Parent layout: .td-shell uses display: flex; min-height: 100vh. The sidebar is a direct flex child. Explicit height: 100vh constrains it properly within the flex row. No conflict.
• Mobile (< 640px): Mobile sidebar uses position: fixed; top: 0; bottom: 0 which already gives it full viewport height. The 100vh is harmless here since fixed positioning overrides normal flow height.
• 100dvh fallback: The 100dvh declaration comes second, so browsers that support it (all modern mobile browsers) use the dynamic viewport height. Older browsers fall back to 100vh. This handles the mobile address bar shrink issue correctly.
• Collapsed sidebar: No impact -- the height/overflow behavior is independent of width.

Potential concerns reviewed

• Scrollbar appearance: overflow-y: auto only shows a scrollbar when content overflows, not always. This is the correct choice over overflow-y: scroll.
• Sticky positioning alternative: Using position: sticky on the footer was considered, but the current flex approach is simpler and more reliable since the sidebar is already a flex column.
• No regressions found: The change is purely additive CSS -- no existing properties were modified or removed.

Verdict

Change is minimal, correct, and safe. No issues found.

[gemini-code-assist]

Code Review

This pull request updates the sidebar layout by defining a fixed viewport height, enabling vertical scrolling for the navigation area, and ensuring the footer does not shrink. The reviewer provided feedback regarding potential layout issues when the main content scrolls, suggesting the use of sticky positioning. Additionally, there are recommendations to verify mobile responsiveness and adjust padding in the collapsed state to prevent scrollbars from clipping icons.

[gemini-code-assist]

The sidebar is set to a fixed height of 100vh, but the parent container (.td-shell in AppShell.vue) uses min-height: 100vh. If the main content is long enough to make the page scroll, the sidebar will scroll away with the page, and its background will not extend to the bottom of the document. To ensure the sidebar and its footer remain truly "pinned" to the viewport while the content scrolls, consider using position: sticky with top: 0.

  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;

[gemini-code-assist]

On mobile devices (max-width: 640px), the sidebar uses position: fixed with top: 0 and bottom: 0. Adding an explicit height to the base class will override the bottom: 0 property in most browsers. While 100dvh is generally accurate, bottom: 0 is often more resilient for handling browser UI changes and virtual keyboards. Since the mobile media query is not part of this diff, please ensure that height is set to auto or initial in the mobile styles to preserve the existing bottom: 0 behavior.

[gemini-code-assist]

Adding overflow-y: auto to the navigation container will cause a scrollbar to appear when items overflow. In the collapsed state (56px width), the custom 8px scrollbar (defined in style.css) will reduce the available horizontal space. Given the current padding (var(--td-space-5)) and icon width (20px), the icons will likely be pushed off-center or clipped when the scrollbar is visible. Consider reducing the horizontal padding for .td-nav-item specifically for the collapsed state to maintain visual balance.