refactor: remove grid-template from checkbox and radio-button (#10620)

Author: jouni

packages/field-base/src/styles/checkable-base-styles.js

@@ -11,13 +11,9 @@ export const checkable = (part, propName = part) => css`
   :host {
     align-items: baseline;
     column-gap: var(--vaadin-${unsafeCSS(propName)}-gap, var(--vaadin-gap-s));
+    grid-template: none;
     grid-template-columns: auto 1fr;
-    /*
-      Using minmax(auto, max-content) works around a Safari 17 issue where placing a checkbox
-      inside a flex container with flex-direction: column causes the container to unexpectedly
-      grow to the max available height.
-    */
-    grid-template-rows: minmax(auto, max-content);
+    grid-template-rows: repeat(auto-fill, minmax(0, max-content));
     -webkit-tap-highlight-color: transparent;
     --_cursor: var(--vaadin-clickable-cursor);
   }
@@ -65,6 +61,7 @@ export const checkable = (part, propName = part) => css`
   [part='helper-text'],
   [part='error-message'] {
     margin-top: var(--_gap-s);
+    grid-row: auto;
   }
 
   /* Baseline vertical alignment */