Skip to content

desktop: equalize dashboard card heights#6903

Merged
kodjima33 merged 4 commits intomainfrom
fix/dashboard-card-equal-height
Apr 20, 2026
Merged

desktop: equalize dashboard card heights#6903
kodjima33 merged 4 commits intomainfrom
fix/dashboard-card-equal-height

Conversation

@kodjima33
Copy link
Copy Markdown
Collaborator

Summary

Follow-up to #6902. The shrink-to-fit fix landed but the two cards no longer matched heights — the shorter card's panel left a visible gap because Grid cells don't auto-stretch to row height when the cell views are intrinsic-sized.

This PR:

  • Restores .frame(maxHeight: .infinity, alignment: .topLeading) on each widget root so each card fills its grid cell.
  • Adds .fixedSize(horizontal: false, vertical: true) on the Grid in DashboardPage.expandedWidgets so the Grid itself reports only the row's intrinsic height instead of competing with ChatMessagesView for vertical space.

Net effect: cards size to the taller of the two intrinsic heights (matching), and the rest of the dashboard goes to the chat view as before.

Test plan

  • Dashboard with mismatched content (e.g. 3 tasks, 1 goal) — both cards' panels are the same height (taller intrinsic wins).
  • Dashboard with similar content (3 tasks, 3 goals) — same height, both compact.
  • Empty state on either card — both still equal-height with reasonable padding.

🤖 Generated with Claude Code

kodjima33 and others added 4 commits April 20, 2026 19:40
Restore .frame(maxHeight: .infinity, alignment: .topLeading) on the
widget root so the card panel still fills the grid row's height.
Pairs with the .fixedSize on the Grid in DashboardPage so the row
itself stays at intrinsic height.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Same fix as TasksWidget — restore maxHeight: .infinity so the card
panel matches the row's height (which is now bounded by the Grid's
fixedSize in DashboardPage).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add .fixedSize(horizontal: false, vertical: true) so the Grid only
asks for the height of its tallest row, instead of expanding to fill
half the dashboard. Each cell still fills the row, so Tasks and
Goals stay visually equal-height (taller of the two intrinsics).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@kodjima33 kodjima33 merged commit 40b8f38 into main Apr 20, 2026
1 check passed
@kodjima33 kodjima33 deleted the fix/dashboard-card-equal-height branch April 20, 2026 23:41
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Apr 20, 2026

Greptile Summary

This PR is a follow-up to #6902 that restores equal-height dashboard cards after the shrink-to-fit fix caused a visible gap when one card was shorter than the other. It adds .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading) back to both widget roots so each card fills its Grid cell, and applies .fixedSize(horizontal: false, vertical: true) to the Grid so it reports only the row's intrinsic height instead of competing with ChatMessagesView for vertical space.

Confidence Score: 5/5

Safe to merge — minimal, targeted SwiftUI layout fix with no logic or data-handling changes.

All changes are confined to SwiftUI view modifiers. The combination of fixedSize(horizontal: false, vertical: true) on the Grid and maxHeight: .infinity on each widget is the correct pattern for equal-height grid cells with intrinsic content. No P0 or P1 findings.

No files require special attention.

Important Files Changed

Filename Overview
desktop/Desktop/Sources/MainWindow/Pages/DashboardPage.swift Added .fixedSize(horizontal: false, vertical: true) to the Grid in expandedWidgets to constrain the grid to its row's intrinsic height and prevent it from competing with ChatMessagesView for vertical space.
desktop/Desktop/Sources/MainWindow/Components/GoalsWidget.swift Restored .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading) on the root VStack so the Goals card fills its grid cell, enabling equal-height equalisation with the Tasks card.
desktop/Desktop/Sources/MainWindow/Components/TodaysTasksWidget.swift Restored .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading) on the root VStack so the Tasks card fills its grid cell, mirroring the same fix in GoalsWidget.
desktop/CHANGELOG.json Added two unreleased entries describing the shrink-to-fit fix (#6902) and this equal-height follow-up; no structural issues.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[DashboardPage VStack] --> B[dashboardWidgets]
    A --> C[ChatMessagesView\n.frame maxHeight .infinity]
    A --> D[ChatInputView]

    B --> E{widgetsCollapsed?}
    E -- yes --> F[collapsedWidgetBar]
    E -- no --> G[expandedWidgets\n.fixedSize horizontal:false vertical:true]
    E -- no --> H[collapseButton]

    G --> I[Grid]
    I --> J[GridRow]
    J --> K[TasksWidget\n.frame minWidth:0 maxWidth:.infinity\nroot: maxHeight:.infinity topLeading]
    J --> L[GoalsWidget\n.frame minWidth:0 maxWidth:.infinity\nroot: maxHeight:.infinity topLeading]

    style G fill:#6c63ff,color:#fff
    style K fill:#444,color:#fff
    style L fill:#444,color:#fff
Loading

Reviews (1): Last reviewed commit: "desktop: changelog for equal-height dash..." | Re-trigger Greptile

kodjima33 added a commit that referenced this pull request Apr 20, 2026
## Summary
Follow-up to #6903. With the cards now equalized to the taller intrinsic
height, the shorter card's rows pinned to the top, leaving a visible gap
below. This PR centers the rows vertically inside each card so they
float to the middle when the sibling card is taller.

Wraps the existing row VStack in `VStack(spacing: 0) { Spacer(minLength:
0); … ; Spacer(minLength: 0) }.frame(maxHeight: .infinity)` for both
empty and non-empty branches in `TasksWidget` and `GoalsWidget`.

## Test plan
- [ ] Dashboard with 2 tasks and 4 goals — Tasks rows centered
vertically; Goals fills.
- [ ] Dashboard with 4 tasks and 1 goal — Goals row centered; Tasks
fills.
- [ ] Empty state on either side — empty content stays centered.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Glucksberg pushed a commit to Glucksberg/omi-local that referenced this pull request Apr 28, 2026
## Summary
Follow-up to BasedHardware#6902. The shrink-to-fit fix landed but the two cards no
longer matched heights — the shorter card's panel left a visible gap
because Grid cells don't auto-stretch to row height when the cell views
are intrinsic-sized.

This PR:
- Restores `.frame(maxHeight: .infinity, alignment: .topLeading)` on
each widget root so each card fills its grid cell.
- Adds `.fixedSize(horizontal: false, vertical: true)` on the Grid in
`DashboardPage.expandedWidgets` so the Grid itself reports only the
row's intrinsic height instead of competing with `ChatMessagesView` for
vertical space.

Net effect: cards size to the taller of the two intrinsic heights
(matching), and the rest of the dashboard goes to the chat view as
before.

## Test plan
- [ ] Dashboard with mismatched content (e.g. 3 tasks, 1 goal) — both
cards' panels are the same height (taller intrinsic wins).
- [ ] Dashboard with similar content (3 tasks, 3 goals) — same height,
both compact.
- [ ] Empty state on either card — both still equal-height with
reasonable padding.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Glucksberg pushed a commit to Glucksberg/omi-local that referenced this pull request Apr 28, 2026
…6906)

## Summary
Follow-up to BasedHardware#6903. With the cards now equalized to the taller intrinsic
height, the shorter card's rows pinned to the top, leaving a visible gap
below. This PR centers the rows vertically inside each card so they
float to the middle when the sibling card is taller.

Wraps the existing row VStack in `VStack(spacing: 0) { Spacer(minLength:
0); … ; Spacer(minLength: 0) }.frame(maxHeight: .infinity)` for both
empty and non-empty branches in `TasksWidget` and `GoalsWidget`.

## Test plan
- [ ] Dashboard with 2 tasks and 4 goals — Tasks rows centered
vertically; Goals fills.
- [ ] Dashboard with 4 tasks and 1 goal — Goals row centered; Tasks
fills.
- [ ] Empty state on either side — empty content stays centered.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant