Chore/TimezonesEditor: Add vertical gaps between inputs (#94487)

.betterer.results

@@ -6712,10 +6712,6 @@ exports[`better eslint`] = {
     "public/app/plugins/panel/timeseries/SpanNullsEditor.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
-    "public/app/plugins/panel/timeseries/TimezonesEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/plugins/panel/timeseries/migrations.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],

public/app/plugins/panel/timeseries/TimezonesEditor.tsx

@@ -34,36 +34,34 @@ export const TimezonesEditor = ({ value, onChange }: Props) => {
   };
 
   return (
-    <div>
+    <ul className={styles.list}>
       {value.map((tz, idx) => (
-        <div className={styles.wrapper} key={`${idx}.${tz}`}>
-          <span className={styles.first}>
-            <TimeZonePicker
-              onChange={(v) => setTimezone(idx, v)}
-              includeInternal={true}
-              value={tz ?? InternalTimeZones.default}
-            />
-          </span>
+        <li className={styles.listItem} key={`${idx}.${tz}`}>
+          <TimeZonePicker
+            onChange={(v) => setTimezone(idx, v)}
+            includeInternal={true}
+            value={tz ?? InternalTimeZones.default}
+          />
           {idx === value.length - 1 ? (
             <IconButton name="plus" onClick={addTimezone} tooltip="Add timezone" />
           ) : (
             <IconButton name="times" onClick={() => removeTimezone(idx)} tooltip="Remove timezone" />
           )}
-        </div>
+        </li>
       ))}
-    </div>
+    </ul>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
-    width: 100%;
-    display: flex;
-    flex-direction: rows;
-    align-items: center;
-  `,
-  first: css`
-    margin-right: 8px;
-    flex-grow: 2;
-  `,
+  list: css({
+    listStyle: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5),
+  }),
+  listItem: css({
+    display: 'flex',
+    gap: theme.spacing(1),
+  }),
 });