Fix mobile portrait rendering in execution history dialogs - #367
Merged
Conversation
All changes applied and verified. Here's a summary of what was fixed: **Dialog.vue** (base component): - Reduced padding on mobile (`p-4` vs `p-6`), responsive padding with `sm:` and `md:` breakpoints - Tighter header spacing: `pb-3 sm:pb-4 mb-3 sm:mb-5` - Title scales from `text-sm` on mobile to `text-base` on tablet to `text-lg` on desktop; now uses `line-clamp-1` for better truncation - Subtitle uses `leading-snug` on mobile instead of cramped `leading-none` - Tighter gaps between header elements on mobile **ExecutionHistoryDialog.vue** (single workflow): - Two-column layout becomes stacked (`flex-col sm:flex-row`) on mobile - Left panel constrained to `max-h-[30vh]` on mobile with `border-b` divider (switches to `sm:border-r` on desktop) - Left panel width: `w-full sm:w-52 md:w-64` for proportional sizing - Overall height: `h-[75vh] sm:h-[60vh]` — taller on mobile since panels stack - Button text hidden on mobile where clutter-prone (Clear history button: `hidden sm:inline`) - Tighter gap values across top bar, search, and action buttons - Inputs/Outputs/Logs header rows use `gap-2` for proper wrapping on narrow screens **ExecutionHistoryAllDialog.vue** (all history): - Consistent responsive spacing throughout (`space-y-3 sm:space-y-4`, `gap-2 sm:gap-3`) - Clear All button text hidden on mobile - Running execution cards stack vertically on mobile (`flex-col sm:flex-row`) - Action button text hidden on mobile (`hidden sm:inline`) - Detail section headers use `gap-2` with `flex-wrap` for narrow viewports
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
2 participants
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.
All changes applied and verified. Here's a summary of what was fixed:
Dialog.vue (base component):
p-4vsp-6), responsive padding withsm:andmd:breakpointspb-3 sm:pb-4 mb-3 sm:mb-5text-smon mobile totext-baseon tablet totext-lgon desktop; now usesline-clamp-1for better truncationleading-snugon mobile instead of crampedleading-noneExecutionHistoryDialog.vue (single workflow):
flex-col sm:flex-row) on mobilemax-h-[30vh]on mobile withborder-bdivider (switches tosm:border-ron desktop)w-full sm:w-52 md:w-64for proportional sizingh-[75vh] sm:h-[60vh]— taller on mobile since panels stackhidden sm:inline)gap-2for proper wrapping on narrow screensExecutionHistoryAllDialog.vue (all history):
space-y-3 sm:space-y-4,gap-2 sm:gap-3)flex-col sm:flex-row)hidden sm:inline)gap-2withflex-wrapfor narrow viewportsScreenshots