Fix field width with long labels (#189)

Author: devongovett

packages/@react-spectrum/s2/src/Field.tsx

@@ -76,6 +76,11 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
           labelPosition: {
             top: '--field-gap'
           }
+        },
+        contain: {
+          labelPosition: {
+            top: 'inline-size'
+          }
         }
       })({labelAlign, labelPosition})}>
       <Label

packages/@react-spectrum/s2/src/Slider.tsx

@@ -97,13 +97,13 @@ const labelContainer = style({
   width: 'full',
   gridTemplateAreas: {
     labelPosition: {
-      top: ['label . output']
+      top: ['label output']
     }
   },
   gridTemplateColumns: {
     labelPosition: {
       top: [
-        'auto 1fr auto'
+        '1fr auto'
       ]
     }
   },

packages/@react-spectrum/s2/src/style-utils.ts

@@ -33,7 +33,11 @@ export const field = () => ({
     isInForm: 1
   },
   gridColumnEnd: {
-    isInForm: 'span 2'
+    isInForm: {
+      labelPosition: {
+        side: 'span 2'
+      }
+    }
   },
   gridTemplateColumns: {
     default: {
@@ -100,11 +104,6 @@ export const fieldLabel = () => ({
       }
     },
     forcedColors: 'ButtonText'
-  },
-  contain: {
-    labelPosition: {
-      top: 'inline-size'
-    }
   }
 } as const);