💄 [#4269] Re-organize layout of DMN configuration modal

src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js

@@ -130,30 +130,33 @@ const DMNParametersForm = () => {
   }, [pluginId, decisionDefinitionId, decisionDefinitionVersion]);
 
   return (
-    <div className="mappings">
-      <InputsOverview inputClauses={dmnParams.inputClauses} />
-
-      <div className="mappings__mapping">
-        <h3 className="react-modal__section-title">
-          <FormattedMessage defaultMessage="Input mapping" description="Input mapping title" />
-        </h3>
-        <VariableMapping
-          loading={loading}
-          mappingName="inputMapping"
-          dmnVariables={dmnParams.inputs}
-          includeStaticVariables
-        />
-      </div>
-      <div className="mappings__mapping">
-        <h3 className="react-modal__section-title">
-          <FormattedMessage defaultMessage="Output mapping" description="Output mapping title" />
-        </h3>
-        <VariableMapping
-          loading={loading}
-          mappingName="outputMapping"
-          dmnVariables={dmnParams.outputs}
-        />
+    <div className="logic-dmn">
+      <div className="logic-dmn__mapping-config">
+        <div className="logic-dmn__mapping">
+          <h3 className="react-modal__section-title">
+            <FormattedMessage defaultMessage="Input mapping" description="Input mapping title" />
+          </h3>
+          <VariableMapping
+            loading={loading}
+            mappingName="inputMapping"
+            dmnVariables={dmnParams.inputs}
+            includeStaticVariables
+          />
+        </div>
+
+        <div className="logic-dmn__mapping">
+          <h3 className="react-modal__section-title">
+            <FormattedMessage defaultMessage="Output mapping" description="Output mapping title" />
+          </h3>
+          <VariableMapping
+            loading={loading}
+            mappingName="outputMapping"
+            dmnVariables={dmnParams.outputs}
+          />
+        </div>
       </div>
+
+      <InputsOverview inputClauses={dmnParams.inputClauses} />
     </div>
   );
 };

src/openforms/js/components/admin/form_design/logic/actions/dmn/InputsOverview.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 const InputsOverview = ({inputClauses}) => (
-  <section className="mappings__info">
+  <section className="logic-dmn__info">
     <h2 className="react-modal__section-title">
       <FormattedMessage
         description="DMN input expressions title"
@@ -21,7 +21,7 @@ const InputsOverview = ({inputClauses}) => (
       />
     </p>
 
-    <table className="mappings__mapping-table">
+    <table className="logic-dmn__mapping-table logic-dmn__mapping-table--stretch">
       <thead>
         <tr>
           <th>

src/openforms/js/components/admin/form_design/logic/actions/dmn/VariableMapping.js

@@ -22,7 +22,7 @@ const VariableMapping = ({loading, mappingName, dmnVariables, includeStaticVaria
     <FieldArray
       name={mappingName}
       render={arrayHelpers => (
-        <div className="mappings__mapping-table">
+        <div className="logic-dmn__mapping-table">
           <table>
             <thead>
               <tr>

src/openforms/scss/components/admin/_ReactModal.scss

@@ -80,9 +80,9 @@
 
   &__section-title {
     font-weight: 300;
-    font-size: 1rem;
-    margin-block-start: 0;
-    margin-block-end: 0;
+    font-size: 1.2rem;
+    margin-block-start: 20px;
+    margin-block-end: 10px;
   }
 
   &__form {

src/openforms/scss/components/admin/_index.scss

@@ -27,7 +27,7 @@
 @import './logic-action';
 @import './logic-type-selection';
 @import './servicefetchconfiguration-picker';
-@import './mappings';
+@import './logic-dmn';
 
 // form list
 @import './form-category';

src/openforms/scss/components/admin/_logic-dmn.scss

@@ -0,0 +1,22 @@
+@use 'microscope-sass/lib/bem';
+
+.logic-dmn {
+  @include bem.element('mapping-config') {
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+  }
+
+  @include bem.element('mapping') {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  @include bem.element('mapping-table') {
+    @include bem.modifier('stretch') {
+      table-layout: fixed;
+      inline-size: 100%;
+    }
+  }
+}