chore(ui): removes margin when row is empty and passes style from props (#11504)

Two small separate issues here (1) and (2):

### What?
1. Excess margin is displayed when a row is hidden due to
`admin.condition`
2. The `admin.style` props is never passed to the `row` field

### Why?
1. Unlike other fields, the `row` field still gets rendered when
`admin.condition` returns false - this is because the logic gets passed
down to the fields within the row
2. `style` was never being threaded to the `row` field wrapper

### How?
1. Hides the row using css to `display: none` when no children are
present
2. Passes `admin.styles` to the `row` wrapper

Fixes #11477

packages/ui/src/fields/Row/index.scss

@@ -2,6 +2,8 @@
 
 @layer payload-default {
   .field-type.row {
+    margin-bottom: 0;
+
     .row__fields {
       display: flex;
       flex-wrap: wrap;
@@ -14,6 +16,11 @@
         justify-content: flex-start;
       }
 
+      // add margin if the row has children
+      &:has(> *:nth-child(1)) {
+        margin-bottom: var(--base);
+      }
+
       // If there is more than one child, add inline-margins to space them out.
       &:has(> *:nth-child(2)) {
         margin-inline: calc(var(--base) / -4); // add negative margin to counteract the gap.

packages/ui/src/fields/Row/index.tsx

@@ -13,7 +13,7 @@ const baseClass = 'row'
 
 const RowFieldComponent: RowFieldClientComponent = (props) => {
   const {
-    field: { admin: { className } = {}, fields },
+    field: { admin: { className, style } = {}, fields },
     forceRender = false,
     indexPath = '',
     parentPath = '',
@@ -24,7 +24,10 @@ const RowFieldComponent: RowFieldClientComponent = (props) => {
 
   return (
     <RowProvider>
-      <div className={[fieldBaseClass, baseClass, className].filter(Boolean).join(' ')}>
+      <div
+        className={[fieldBaseClass, baseClass, className].filter(Boolean).join(' ')}
+        style={style || undefined}
+      >
         <RenderFields
           className={`${baseClass}__fields`}
           fields={fields}