From beb166f1d2e84324c9550f4237ff0eb07aa3b601 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 27 Jun 2023 16:10:56 +0100
Subject: [PATCH] Checkbox: Fix alignment in Safari (#70673)

---
 .../grafana-ui/src/components/Forms/Checkbox.tsx | 16 +++++++++-------
 .../SaveDashboard/forms/SaveDashboardForm.tsx    |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index 79a599464a5..fdd288e90ff 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -74,13 +74,15 @@ export const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => {
   };
 
   return {
-    wrapper: css`
-      display: inline-grid;
-      align-items: center;
-      column-gap: ${theme.spacing(labelPadding)};
-      position: relative;
-      vertical-align: middle;
-    `,
+    wrapper: css({
+      display: 'inline-grid',
+      alignItems: 'center',
+      columnGap: theme.spacing(labelPadding),
+      // gridAutoRows is needed to prevent https://github.com/grafana/grafana/issues/68570 in safari
+      gridAutoRows: 'max-content',
+      position: 'relative',
+      verticalAlign: 'middle',
+    }),
     input: css`
       position: absolute;
       z-index: 1;
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
index b13b723ca75..f0b41b2337b 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@@ -60,7 +60,7 @@ export const SaveDashboardForm = ({
       {({ register, errors }) => {
         const messageProps = register('message');
         return (
-          <Stack gap={2}>
+          <Stack gap={2} direction="column" alignItems="flex-start">
             {hasTimeChanged && (
               <Checkbox
                 checked={!!options.saveTimerange}