Grafana-UI: Fix checkbox vertical alignment (#35124) (#35174)

* Grafana-UI: Fix Checkbox vertical layout issues

* reorganise css

* revert my 'fix' and just go back to setting a min height :(

(cherry picked from commit 32d9b04666)

Co-authored-by: Josh Hunt <joshhunt@users.noreply.github.com>

packages/grafana-ui/src/components/Forms/Checkbox.story.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react';
 import mdx from './Checkbox.mdx';
 import { Checkbox } from './Checkbox';
 import { VerticalGroup } from '../Layout/Layout';
+import { Field } from './Field';
 
 export default {
   title: 'Forms/Checkbox',
@@ -57,3 +58,14 @@ export const StackedList = () => {
     </VerticalGroup>
   );
 };
+
+export const InAField = () => {
+  return (
+    <Field
+      label="Hidden"
+      description="Annotation queries can be toggled on or of at the top of the dashboard. With this option checked this toggle will be hidden."
+    >
+      <Checkbox name="hide" id="hide" defaultChecked={true} />
+    </Field>
+  );
+};

packages/grafana-ui/src/components/Forms/Checkbox.tsx

@@ -65,6 +65,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
       position: relative;
       padding-left: ${checkboxSize};
       vertical-align: middle;
+      min-height: ${theme.spacing(3)};
     `,
     input: css`
       position: absolute;