Align and standardize settings data source list layout

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.

src/index.css

@@ -154,6 +154,28 @@ div.zoom {
   padding: 0 15px 0 25px;
 }
 
+.details .ui.list .item > .list-icon-wrapper {
+  display: table-cell;
+  width: 20px;
+  text-align: center;
+  vertical-align: top;
+  padding-right: 4px;
+}
+
+.details .ui.list .item > .list-icon-wrapper > i.icon {
+  margin: 0;
+}
+
+
+.details .ui.list .item > .list-icon-wrapper + .content {
+  display: table-cell;
+  vertical-align: top;
+  padding-left: 8px;
+}
+
+
+
+
 .details .item-header {
   justify-content: space-between;
   display: flex;