Skip to content

Replace DockPanel with Grid for better layout responsiveness#18

Merged
seankearon merged 1 commit into
mainfrom
claude/console-ui-overlap-3fdpuj
Jun 26, 2026
Merged

Replace DockPanel with Grid for better layout responsiveness#18
seankearon merged 1 commit into
mainfrom
claude/console-ui-overlap-3fdpuj

Conversation

@seankearon

Copy link
Copy Markdown
Owner

Summary

Refactored the main window layout from a DockPanel to a Grid to improve how the UI handles space constraints. This change ensures the flight log can shrink gracefully instead of overlapping neighboring elements when vertical space is limited.

Key Changes

  • Replaced DockPanel with Grid using three rows: Auto (header), * (flight log), and Auto (countdown)
  • Reorganized element positioning to use Grid.Row attributes instead of DockPanel.Dock
  • Moved the countdown border from between the header and log to after the log (Grid.Row="2")
  • Removed MinHeight="190" constraint from the flight log border to allow it to shrink when needed
  • Added explanatory comment documenting the layout strategy

Implementation Details

The new Grid-based layout provides better responsive behavior:

  • Header (StackPanel) pins to top with RowDefinitions="Auto"
  • Flight log takes remaining space with RowDefinitions="*" and can shrink below its previous minimum
  • Countdown timer pins to bottom with RowDefinitions="Auto"

This prevents the flight log from overlapping the countdown timer when the window is resized to smaller heights, which was a limitation of the previous DockPanel approach.

https://claude.ai/code/session_01QoHkEWzYULxqMC3Tmeh5DL

The main window used a DockPanel with the flight log as LastChildFill,
plus a fixed MinHeight=190 on the log border. After a launch — when the
GO status banner, secondary editor buttons, and the close countdown are
all visible — the leftover middle strip shrinks below 190px, so the
DockPanel forced the log to render at its minimum and it overflowed both
upward (over the GO banner) and downward (over the "Closing… / Keep open"
bar), obscuring them.

Replace the DockPanel with a Grid (RowDefinitions="Auto,*,Auto"): top
controls size to content, the flight log takes the slack via the star
row, and the countdown pins to the bottom. Drop the rigid MinHeight so
the log shrinks gracefully (its ScrollViewer keeps it usable) instead of
overlapping its neighbours when space is tight.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QoHkEWzYULxqMC3Tmeh5DL
@seankearon seankearon merged commit 6288e96 into main Jun 26, 2026
2 checks passed
@seankearon seankearon mentioned this pull request Jun 26, 2026
@seankearon seankearon deleted the claude/console-ui-overlap-3fdpuj branch June 26, 2026 10:09
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.

2 participants