Align and standardize settings data source list layout

Browse Source

Aligns the "Data source" list items in the side panel by resolving a
browser-specific layout discrepancy where icons with different intrinsic
widths (e.g., "edit" vs "calendar") caused uneven text indentation and
vertical misalignment.

- Refactored `SourceHead` in `head.tsx` to wrap all list icons in a
  `list-icon-wrapper` container instead of using `<List.Icon>` directly.
- Added CSS rules in `index.css` to format `.list-icon-wrapper` and its
  sibling `.content` as table cells aligned at the top, with a fixed
  width of `20px` for the icon column.
- Converted relative sizing (`em`) to absolute pixels (`px`) for
  pixel-perfect cross-browser precision.
- Updated Playwright visual regression snapshots to match the newly
  aligned and corrected UI layout.

...

This commit is contained in:

Przemek Więch

2026-06-25 14:31:25 +02:00

parent 9cb57d1f49

commit 3effe501b7

9 changed files with 335 additions and 297 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

tests/config_visual.spec.ts-snapshots/config-state-default-visual-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 75 KiB After Width:  |  Height:  |  Size: 75 KiB

BIN

tests/config_visual.spec.ts-snapshots/config-state-gender-no-ids-visual-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 76 KiB After Width:  |  Height:  |  Size: 76 KiB

BIN

tests/config_visual.spec.ts-snapshots/config-state-minimalist-visual-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 69 KiB After Width:  |  Height:  |  Size: 69 KiB

BIN

tests/config_visual.spec.ts-snapshots/config-state-places-hide-visual-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 70 KiB After Width:  |  Height:  |  Size: 70 KiB

BIN

tests/config_visual.spec.ts-snapshots/config-state-places-short-1-visual-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 72 KiB After Width:  |  Height:  |  Size: 72 KiB

BIN

tests/config_visual.spec.ts-snapshots/config-state-places-short-default-visual-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 74 KiB After Width:  |  Height:  |  Size: 74 KiB