Remove gridfield and tune pulldown spacing

styles/01-foundations.css

@@ -81,10 +81,6 @@
   --layout-input-label-width: var(--dimension-input-label-width);
   --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
   --layout-input-field-max-width: var(--dimension-input-field-max-width);
-  --layout-gridfield-label-column-width: var(--layout-input-label-width);
-  --layout-gridfield-column-gap: var(--spacing-small);
-  --layout-gridfield-row-gap: var(--spacing-small);
-  --layout-gridfield-field-max-width: var(--layout-input-field-max-width);
   --layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
   --layout-search-field-width: var(--dimension-search-field-width);
   --layout-mode-toggle-local-height: var(--compact-interaction-height);

styles/10-components-interactive-elements.css

@@ -520,10 +520,9 @@
       }
 
       #component-pulldown .sg-labeled-input-row {
-        display: grid;
-        grid-template-columns: max-content minmax(0, 1fr);
-        align-items: center;
-        column-gap: var(--spacing-small);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-small);
         width: 100%;
         max-width: 100%;
       }
@@ -554,6 +553,7 @@
       .sg-labeled-input-row {
         flex-direction: column;
         align-items: flex-start;
+        gap: var(--spacing-small);
         width: 100%;
         max-width: 100%;
       }

styles/11-components-gridfield.css

@@ -1,52 +0,0 @@
-/* ========================================================= */
-/* Components: Gridfield                                     */
-/* ========================================================= */
-
-    .sg-gridfield-demo {
-      display: inline-flex;
-      flex-direction: column;
-      gap: var(--spacing-small);
-      width: fit-content;
-      padding: var(--spacing-large);
-      border-radius: var(--radius-card);
-      background: var(--surface-form-preview);
-    }
-
-    .sg-gridfield-row {
-      display: grid;
-      grid-template-columns: var(--layout-gridfield-label-column-width) minmax(0, 1fr);
-      column-gap: var(--layout-gridfield-column-gap);
-      align-items: center;
-      width: 100%;
-      max-width: var(--layout-gridfield-field-max-width);
-    }
-
-    .sg-gridfield-row .sg-label {
-      min-width: 0;
-      margin: 0;
-      line-height: 1;
-      color: var(--text-control-default);
-    }
-
-    .sg-gridfield-row .sg-interaction-element,
-    .sg-gridfield-row .sg-pulldown-demo,
-    .sg-gridfield-row .sg-pulldown {
-      width: 100%;
-      min-width: 0;
-      max-width: 100%;
-    }
-
-    @media (max-width: 48rem) {
-      .sg-gridfield-demo {
-        width: 100%;
-        max-width: 100%;
-        box-sizing: border-box;
-      }
-
-      .sg-gridfield-row {
-        grid-template-columns: 1fr;
-        row-gap: var(--layout-gridfield-row-gap);
-        align-items: start;
-        max-width: 100%;
-      }
-    }