Fix Bloblang playground editor alignment#362
Conversation
- Convert playground layout from flexbox to CSS Grid for precise column alignment - Add fixed height constraints on editor headers (70px) to ensure Input and Output headers match - Constrain header content height (48px) and validation row height (22px) with overflow hidden - Add smaller Ask AI button variant (20px) when displayed in header to fit within constraints - Restructure Output header HTML to match Input's two-row structure with spacer - Add explicit grid placement rules for each editor section - Truncate long error messages with text-overflow ellipsis - Update mobile responsive styles for grid layout
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the
📝 WalkthroughWalkthroughThis pull request refactors the Bloblang playground layout from a flexbox to CSS Grid architecture. The main container now uses a two-column grid layout with explicit column and row assignments for editor and output sections. Height, overflow, and max-height constraints are added to stabilize component sizing across themes. Mobile responsiveness is updated to use single-column layout with resets to grid placements. Additionally, the validation indicator styling is updated to support text truncation with ellipsis. In the HTML template, the Output header's Copy button is repositioned within an additional flex container for improved layout consistency. Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
- Change layout to Input/Mapping side by side with Output below - Add flow arrow indicator between input row and output - Move metadata editors to collapsible Advanced Options panel - Responsive: stacks vertically on mobile (<1024px) Based on UX feedback from Blair McKee.
On mobile, editor headers need to grow to accommodate stacked buttons and validation indicators. Removing min/max-height constraints allows the header to expand naturally without overlapping the editor.
- Fix Advanced Options toggle: wrap content in div, hide browser disclosure marker - Fix mobile layout: remove fixed header heights, allow content to stack - Fix overflow: add max-width and overflow-x constraints to prevent horizontal overflow - Set consistent min-height for metadata editors - Change editor resize to vertical only
- Remove blue circular background that looked like a clickable button - Change to grey color with reduced opacity for subtlety - Reduce vertical padding from 8px to 4px
2 participants
Summary
https://deploy-preview-362--docs-ui.netlify.app/playground
Test plan