Remove subgrid fallbacks (#127)

src/components/FormLayout/FormLayout.module.scss

@@ -1,17 +1,15 @@
 // 1. Form field label width is defined using custom property. FormLayout variants are created just
 //    by adjusting this value, either through a particular modification class, or manually through
-//    a prop. Form fields then inherit the layout using the `subgrid` feature which makes it
-//    possible to turn on automatic size of grid column with labels (in supporting browsers, see 4).
+//    a prop. Form fields then inherit the layout using `subgrid` (or `display: contents` for
+//    `<fieldset>`) which makes it possible to turn on automatic size of grid column with labels,
+//    see 4.
 //
 // 2. By default, form field label width is set to a configurable global value.
 //
 // 3. Custom label width can be entered individually through a prop for each use of FormLayout.
 //
 // 4. FormLayout can also automatically adjust the width of column with labels according to the
-//    longest label (which is possible only with `subgrid`). However, this feature is currently
-//    supported only in Firefox so a fallback value is necessary for non-supporting browsers
-//    (a global default which can be customised per use).
-//    https://github.com/react-ui-org/react-ui/issues/232
+//    longest label.
 
 @use "../../styles/settings/forms";
 @use "../../styles/tools/breakpoint";

src/components/FormLayout/README.md

@@ -40,11 +40,6 @@ the job: the [CSS grid layout][grid].
   Do **not** try to put any custom HTML or React components directly into
   FormLayout without wrapping it with the FormLayoutCustomField first.
 
-👉 For usage in auto-width Modal, you may need to turn on the `autoWidth` option
-for your FormLayout. This prevents FormLayout from unexpectedly growing in
-browsers that [don't support][rui-232] [CSS subgrid][subgrid] in cases when
-there are longer validation messages or help texts.
-
 ## Supported Form Fields
 
 The FormLayout supports buttons and all React UI form fields:
@@ -467,6 +462,4 @@ FormLayoutCustomField can be styled using a small subset of
 [fragments]: https://reactjs.org/docs/fragments.html
 [grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 [React common props]: https://react.dev/reference/react-dom/components/common#common-props
-[rui-232]: https://github.com/react-ui-org/react-ui/issues/232
 [rui-265]: https://github.com/react-ui-org/react-ui/issues/265
-[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid

src/styles/tools/form-fields/_box-field-layout.scss

@@ -26,12 +26,13 @@
 //     Reverted for full-width fields.
 //
 // 8.  Grid settings are inherited from horizontal FormLayout and applied using `subgrid`.
-//     A fallback is supplied to browsers that don't support `subgrid` yet.
 //
-//     Chrome 117+ supports `subgrid` but it doesn't work for `<fieldset>`. This is why we always
-//     use the fallback for `<fieldset>`.
+//     `<fieldset>` cannot be a subgrid: the HTML spec wraps its content in an anonymous box which
+//     breaks it, and Chrome doesn't support it at all. This is why `<fieldset>` uses
+//     `display: contents` instead.
 //
-//     https://bugs.chromium.org/p/chromium/issues/detail?id=1473242
+//     https://issues.chromium.org/issues/40278914
+//     https://github.com/whatwg/html/issues/11546
 //     https://github.com/react-ui-org/react-ui/issues/232
 //
 // 9.  Help texts and validation messages can take up full width of FormLayout. There is no reason
@@ -213,10 +214,6 @@
                 grid: inherit;
                 grid-template-columns: subgrid;
                 grid-column: span 2;
-
-                @supports not (grid-template-columns: subgrid) {
-                    display: contents;
-                }
             }
 
             &.isRootLayoutHorizontal.isRootFullWidth {

src/styles/tools/form-fields/_inline-field-elements.scss

@@ -6,8 +6,6 @@
 //
 // 3. Reset extra space previously added to symmetrically pad the field in FormLayout context as
 //    there already is a sufficient row gap provided by FormLayout.
-//
-// 4. Destroy tap target when subgrid is not supported.
 
 @use "../../theme/typography";
 @use "../../theme/form-fields" as theme;
@@ -101,11 +99,6 @@
 
         &.isRootInFormLayout.isRootLayoutHorizontal::before {
             grid-column-start: 2;
-
-            // 4.
-            @supports not (grid-template-columns: subgrid) {
-                display: none;
-            }
         }
     }
 }

src/styles/tools/form-fields/_inline-field-layout.scss

@@ -73,10 +73,6 @@
             grid: inherit;
             grid-template-columns: subgrid;
             grid-column: span 2;
-
-            @supports not (grid-template-columns: subgrid) {
-                display: contents;
-            }
         }
 
         &.isRootLayoutHorizontal .field {
@@ -102,10 +98,6 @@
         &.isRootLayoutHorizontal .validationText {
             width: auto;
             max-width: 100%;
-
-            @supports not (grid-template-columns: subgrid) {
-                margin-top: calc(-1 * var(--rui-FormLayout__row-gap));
-            }
         }
 
         &.isRootLayoutHorizontal.hasRootLabelBefore .label {