From dc5e7695e4b50e84665867d51feed2f662f583fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Tue, 1 Jun 2021 16:11:07 +0200
Subject: [PATCH] Checkbox: Fixes vertical layout isssue with Checkboxes due to
 fixed height (#35022)

---
 .../src/components/Forms/Checkbox.story.tsx   | 23 +++++++++++++++++++
 .../src/components/Forms/Checkbox.tsx         |  1 -
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
index 9d052bd853e..6416e996fd2 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import mdx from './Checkbox.mdx';
 import { Checkbox } from './Checkbox';
+import { VerticalGroup } from '../Layout/Layout';
 
 export default {
   title: 'Forms/Checkbox',
@@ -34,3 +35,25 @@ export const uncontrolled = () => {
     />
   );
 };
+
+export const StackedList = () => {
+  return (
+    <VerticalGroup>
+      <Checkbox
+        defaultChecked={true}
+        label="Skip TLS cert validation"
+        description="Set to true if you want to skip TLS cert validation"
+      />
+      <Checkbox
+        defaultChecked={true}
+        label="Another checkbox"
+        description="Another long description that does not make any sense"
+      />
+      <Checkbox
+        defaultChecked={true}
+        label="Another checkbox times 2"
+        description="Another long description that does not make any sense or does it?"
+      />
+    </VerticalGroup>
+  );
+};
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index fabac95b6f2..8483357d0c1 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -65,7 +65,6 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
       position: relative;
       padding-left: ${checkboxSize};
       vertical-align: middle;
-      height: ${theme.spacing(3)};
     `,
     input: css`
       position: absolute;