fix(native-filters): align refresh icon with default value field#37802
fix(native-filters): align refresh icon with default value field#37802
Conversation
Code Review Agent Run #2a4c32Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help |
Sequence DiagramThe PR changes the DefaultValueContainer layout and adds top margin to the sync icon so that the refresh icon remains visually aligned with the input field even when a validation error message appears. The diagram shows the render path (layout anchoring) and the user-triggered refresh flow. sequenceDiagram
participant User
participant FiltersConfigForm
participant DefaultValueContainer
participant DataService
User->>FiltersConfigForm: Open Filters → shows "Default Value" row
FiltersConfigForm->>DefaultValueContainer: Render with align-items:flex-start + icon margin-top
DefaultValueContainer-->>FiltersConfigForm: Icon anchored at input level (error flows below)
User->>FiltersConfigForm: Click sync (refresh) icon
FiltersConfigForm->>DataService: refreshHandler(true) → fetch default values
DataService-->>FiltersConfigForm: Return default values
FiltersConfigForm-->>User: Update Default Value field (icon stays aligned)
Generated by CodeAnt AI |
f70ccaa to
7c3510e
Compare
Code Review Agent Run #4f81d4Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help |
|
🎪 Showtime deployed environment on GHA for 7c3510e • Environment: http://52.41.73.168:8080 (admin/admin) |
) (cherry picked from commit b012b63)
) (cherry picked from commit b012b63)
) (cherry picked from commit b012b63)
SUMMARY
The SyncOutlined refresh icon in the filter config form's "Default Value" row was vertically misaligned when a validation error message appeared below the field. The
DefaultValueContainerusedalign-items: center, which centered the icon relative to the combined height of the field + error message, pushing it below the field line.Changed
align-itemsfromcentertoflex-startso the icon stays anchored at field level, and addedmargin-topto vertically center it with the 32px input.BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION