Checkbox: Fixes vertical layout isssue with Checkboxes due to fixed height (#35022)

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>
+  );
+};

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;