fix(ui): adapt layout heights for 14-inch MacBook screens

[v-kessler]

fix(ui): AppBar and BreadcrumbsFromUrl add density=compact to reduce vertical space
fix(ui): AppFooter reduce height from 40px to 32px
fix(ui): replace fixed data table heights (60vh, 75vh, 288px) with calc-based responsive heights
fix(ui): WarehouseStatistics and ProjectStatistics use container-relative height with flex layout
fix(ui): LoQEExplorer fix height and overflow for proper container sizing
fix(ui): HomeStatistics reduce chart height from 180px to 140px
fix(ui): ServerOverview add max-height with overflow-y auto
fix(ui): ViewOverview remove double v-card-text wrapping
fix(ui): ProjectManager add overflow-y auto to tabs window and height propagation for statistics tab
fix(ui): TableVersioningVisualization fix snapshot-log ordering (topological) and remove diverge-pass double-draw

Summary by CodeRabbit

• Style

  • Refined vertical spacing and padding throughout the application for a more compact layout.
  • Enhanced scrollability across multiple pages with improved height constraint handling.
  • Updated layout calculations to use flexible CSS variables instead of fixed values.

• Chores

  • Updated console-components dependency.

[coderabbitai]

Walkthrough

This PR updates the @lakekeeper/console-components dependency to v0.3.5 and refactors CSS layout properties across multiple Vue components, reducing padding, adjusting height calculations, and implementing flex-based layouts to enhance scrollability and vertical space management.

Changes

Cohort / File(s)	Summary
Dependency Update package.json	Bumped @lakekeeper/console-components from v0.3.4 to v0.3.5.
Home Component Styling src/components/Home.vue	Reduced padding (py-3 → py-1, py-2 → py-1) across logo, actions, statistics, and quick links sections; removed max-height constraint and adjusted container overflow behavior from hidden to auto; reduced horizontal padding.
Page Layout with CSS Variables src/pages/loqe.vue	Replaced fixed height offset (64px) with CSS variable-based calculation using fallback values for layout dimensions; added overflow: hidden to container.
Scroll Container Additions src/pages/roles/index.vue, src/pages/server-settings.vue	Added max-height constraints with overflow-y: auto to enable vertical scrolling on v-row and v-tabs-window elements.
Warehouse Pages Layout Restructuring src/pages/warehouse/[id].namespace.[nsid].table.[tid].vue, src/pages/warehouse/[id].namespace.[nsid].view.[vid].vue, src/pages/warehouse/[id].namespace.[nsid].vue, src/pages/warehouse/[id].vue, src/pages/warehouse/index.vue	Unified height calculation changes from calc(100vh - 200px) to calc(100vh - 160px); implemented flex column layouts with nested scrolling; converted card containers to flex: 1 with min-height: 0 and overflow: auto for improved space management; updated tab window sizing to align with new flex layout.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• fix: patch components to 0.2.22 #195: Updates the same @lakekeeper/console-components dependency version in package.json.
• feat(ui): upgrade console-components to v0.3.0 #207: Modifies Home.vue and adjusts layout spacing alongside the same dependency bump.
• fix(ui): bump console-components to v0.2.31 #205: Restructures flex and scroll behavior on warehouse table view components with overlapping CSS changes.

Poem

🐰 Height constraints bend, like grass beneath the dew,
Paddings shrink and flex, as scrolling breaks on through,
CSS variables dance where rigid calcs once stood,
Layout flows like tunnels—now it scrolls as it should! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the primary focus of the pull request: adapting layout heights for 14-inch MacBook screens, which aligns with the extensive layout and height adjustments visible across multiple components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/compact-layout-14inch

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[v-kessler]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/pages/roles/index.vue (1)

2-2: Consider centralizing this viewport offset.

Line 2 introduces another hardcoded offset (100px), while other pages use different constants (140px, 160px). Moving this into shared app config avoids drift and keeps layout tuning consistent.

As per coding guidelines: "Use environment variables from src/app.config.ts for all configuration — do not hardcode values like API URLs or feature toggles".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/roles/index.vue` at line 2, Replace the hardcoded "100px" viewport
offset in the roles page's v-row style with a shared constant from
app.config.ts: add (or reuse) a named export like VIEWPORT_OFFSET in
src/app.config.ts and import it into the roles component (the template using
<v-row class="ml-1" style="max-height: calc(100vh - 100px); overflow-y: auto">).
Use that constant to compute the max-height (e.g., calc(100vh -
VIEWPORT_OFFSET)) via the component's script or a style binding so the offset is
centralized and consistent with other pages.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/loqe.vue`:
- Around line 2-8: The height calc on the <v-container> uses fallbacks of 48px
and 32px which causes an unintended 80px shrink when --v-layout-top /
--v-layout-bottom are unset; update the inline style for the height (the
"height: calc(...)" on the v-container) to use zero px fallbacks (e.g. default
to 0px for --v-layout-top and --v-layout-bottom) so the container doesn't lose
extra space when those CSS vars are missing.

---

Nitpick comments:
In `@src/pages/roles/index.vue`:
- Line 2: Replace the hardcoded "100px" viewport offset in the roles page's
v-row style with a shared constant from app.config.ts: add (or reuse) a named
export like VIEWPORT_OFFSET in src/app.config.ts and import it into the roles
component (the template using <v-row class="ml-1" style="max-height: calc(100vh
- 100px); overflow-y: auto">). Use that constant to compute the max-height
(e.g., calc(100vh - VIEWPORT_OFFSET)) via the component's script or a style
binding so the offset is centralized and consistent with other pages.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bf75809f-4a9a-467a-83d1-f8224042080c

📥 Commits

Reviewing files that changed from the base of the PR and between 78e13d6 and 1368abe.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (10)

• package.json
• src/components/Home.vue
• src/pages/loqe.vue
• src/pages/roles/index.vue
• src/pages/server-settings.vue
• src/pages/warehouse/[id].namespace.[nsid].table.[tid].vue
• src/pages/warehouse/[id].namespace.[nsid].view.[vid].vue
• src/pages/warehouse/[id].namespace.[nsid].vue
• src/pages/warehouse/[id].vue
• src/pages/warehouse/index.vue