From 0201e8e8fb96e8fd0f183958cb30bdb1f1fec3a0 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 10 Oct 2024 01:57:14 +0100
Subject: [PATCH] Chore/TimezonesEditor: Add vertical gaps between inputs
 (#94487)

---
 .betterer.results                             |  4 --
 .../panel/timeseries/TimezonesEditor.tsx      | 40 +++++++++----------
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index f83e79923d8..5aa32246134 100644
--- a/.betterer.results
+++ b/.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"],
diff --git a/public/app/plugins/panel/timeseries/TimezonesEditor.tsx b/public/app/plugins/panel/timeseries/TimezonesEditor.tsx
index d62a538aebf..968c68727ac 100644
--- a/public/app/plugins/panel/timeseries/TimezonesEditor.tsx
+++ b/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),
+  }),
 });