Unify content-page layout (fixes right-drift on Settings/Trash/Shared parameters/Tags/History)#53
Merged
Merged
Conversation
A run card's metadata line (CLI · time · duration) was a multi-Run TextBlock with the default NoWrap, sitting in a star (*) grid column. A non-wrapping TextBlock in a star column won't shrink below its single-line width, so at narrow window widths it forced the card past the right edge and clipped — the issue none of the other content templates hit (they have no non-wrapping text in a star column). Wrap the line, and disable horizontal scrolling on the History ScrollViewer as a backstop. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… scrollbar The screenshot showed the whole History content centred in a region wider than the window, spilling off the right. Setting only HorizontalScrollBarVisibility=Disabled wasn't enough — the ScrollViewer still measured its content unconstrained. Adding HorizontalScrollMode=Disabled forces measurement at the viewport width so the content fills/centres within the visible area instead of overflowing. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The drift wasn't History-specific: Settings, Trash, Shared parameters, Tags and History all share the same content container, and HorizontalAlignment="Stretch" + MaxWidth mis-positioned the band (drifting right, worst on History at MaxWidth 860). Give them one shared mechanism: a single left-aligned content band capped at a shared ContentMaxWidth resource (720). HorizontalAlignment="Left" + MaxWidth fills up to the cap, left-aligned, and squashes when narrower — deterministic, no drift. History drops its odd 860 width and its bespoke ScrollViewer props to match the rest. Also: each page's primary action (Save / Add parameter / Clear all) now sits on the heading row (vertically centred to the heading only), with the description beneath. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
StuartMeeks
changed the title
Reverts the brief left-align experiment. The pages use HorizontalAlignment="Stretch" with the shared ContentMaxWidth (720): centred at wider sizes, and below that width they all stretch to fill and squash together at the same client width — consistent across Settings, Trash, Shared parameters, Tags and History (History no longer uses its oddball 860). The heading-row primary-button placement is unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The five list/content templates (Settings, Trash, Shared parameters, Tags, History) put MaxWidth + HorizontalAlignment=Stretch directly on the ScrollViewer's child StackPanel. A ScrollViewer doesn't give its content a finite horizontal slot, so the capped band neither centred nor stayed within the viewport, drifting right and clipping at narrow widths. Wrap each StackPanel in a <Grid HorizontalAlignment="Stretch"> (which fills the viewport) and centre the MaxWidth band inside it (HorizontalAlignment=Center). Wide windows centre the 720 band; narrow windows fill and squash at the same client width on every page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The previous fix centred the bands with HorizontalAlignment=Center, but a centred StackPanel sizes to its content (clamped to MaxWidth), so narrow pages (History) shrank below 720 while others sat near it — inconsistent widths. Switch the five content StackPanels back to HorizontalAlignment=Stretch. Inside the Grid's finite slot, Stretch+MaxWidth fills the band to min(viewport, 720) on every page (cards stretch to match) and centres the capped band when the viewport is wider. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Symptom: the list/content pages don't position consistently — content drifts right and clips at narrower widths, worst on History (which used a wider 860 cap).
Cause: these pages share the same container, but History used a different max width, and there was no single source of truth, so they behaved inconsistently.
Fix — one shared layout mechanism across Settings, Trash, Shared parameters, Tags and History:
ContentMaxWidthresource (720) used by all five pages.HorizontalAlignment="Stretch"+ thatMaxWidth: centred at wider sizes; below the cap all pages stretch to fill and squash together at the same client width. History drops its oddball 860 and bespokeScrollViewerprops to match the rest.Compile-verified on the Windows agent.
🤖 Generated with Claude Code