[Studio UI] General styling review — improvements and fixes#3860
Open
idaiv wants to merge 11 commits into
Open
[Studio UI] General styling review — improvements and fixes#3860idaiv wants to merge 11 commits into
idaiv wants to merge 11 commits into
Conversation
…earches, user management Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… via position absolute Use `position: relative` on .ant-tabs-tabpane and `position: absolute; inset: 0` on its direct child to give ContentLayout a pixel-definite height, allowing the CSS Grid `1fr` row to allocate space correctly so NoContent is vertically centered and the toolbar stays pinned to the bottom. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… Search modal title - Wrap ContentLayout in position:absolute inset:0 div so it gets a definite height from the tabpane's bounding box, making the CSS Grid 1fr row work and NoContent vertically centered with toolbar pinned to bottom - Add 'Quick Search' title to the search modal Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…to 4px The blanket position:absolute on tabpane > * broke General/Asset/Document/Object tabs by giving ContentLayout a fixed height while their pagination toolbar was inside the scrollable content area. The saved-searches wrapper already has inline position:absolute so the fix there is independent. Also reduce modal header-to-body gap from marginSM (~12px) to 4px as requested. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…Padding tabs - Extend tabs--no-padding to also zero the inter-tab margin-left so tabs sit flush with only their 4px item padding providing separation - Apply noPadding to the search modal Tabs so the quick search tab bar has no outer nav-list padding and no gap between tabs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… height Wrap SplitLayout in a flex:1 div and move the Toolbar below it as a flex:0 sibling so pagination is always visible regardless of available height. Also change inner Content height from fixed 400px to 100% so the results list fills its allocated flex space. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…grid config cleanup - Add responsive collapse for Simple/Advanced buttons in grid config toolbar: two buttons by default, collapsing to a split button when space is tight - Add missing translations for type dropdown items (newsletter, object, variant) across all 7 locales to fix raw lowercase keys showing in the search modal - Remove close icon from Cancel button in Save Configuration template view Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The react-hooks/exhaustive-deps rule is not configured in this repo's ESLint setup, so referencing it in an inline disable comment fails the frontend build lint step. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2 tasks
|
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.
Resolves: #1779, #3835 and #3826
Search Modal
Added "Quick Search" as the title of the search modal
Fixed the search modal content area to properly fill the available height instead of having a fixed pixel height
Made the All-tab search results use the full available height with proper scrolling instead of a hardcoded 400px container
Pinned the pagination toolbar at the bottom of the All-tab so it stays visible while scrolling through search results
Made the SplitLayout between search results and detail preview fill the full height of the tab
Reduced spacing between filter controls (type select, class select, search input) in the search modal top bars for a more compact look
Removed unnecessary border styling from search modal toolbars and top bars across all element types (assets, documents, data objects)
Fixed the type dropdown in the search modal showing raw lowercase keys ("newsletter", "object", "variant") instead of properly capitalized labels — added translations for all 7 supported languages
Tabs
Fixed tab content areas not properly filling their available height, causing content to be cut off or not scrollable in full-height tab layouts
Set consistent 12px gap between tab labels in compact (no-padding) tab layouts
Reduced the gap between the modal title and content from 8px to 4px for a tighter look
Grid Config Sidebar
Added the Simple and Advanced "Add column" buttons in the grid config sidebar to automatically collapse into a single split button when the sidebar is too narrow to fit both — the split button shows the Simple action directly and puts Advanced under a "more" dropdown menu, and it automatically expands back to two separate buttons when enough space becomes available, adapting correctly to all languages
Set 8px gap between Simple and Advanced buttons in the grid config toolbar
Removed the "x" icon from the Cancel button in the "Save configuration as template" view for both assets and data objects to keep it consistent with other cancel buttons
Saved Searches
Fixed saved searches sidebar panel not using the full available height
Improved saved searches tab layout and styling
Component Styling
Improved accordion component spacing and border styling
Refined element tree node spacing and hover states
Reduced visual weight of element tags by adjusting their styling
Adjusted sidebar spacing for a cleaner appearance
Refined empty state ("no content") component styling
Updated grid component row and cell styling for consistency
User Management
Simplified the language selection table in user management settings
Adjusted user and role management detail page layouts
Theme
Updated design token values in the default light theme for better visual consistency