From 70e51dc252bd9d4517c88c8f1976de9c6f3c6e21 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 8 May 2024 18:00:12 +0200
Subject: [PATCH] :lipstick: [#4269] Re-organize layout of DMN configuration
 modal

---
 .../logic/actions/dmn/DMNParametersForm.js    | 49 ++++++++++---------
 .../logic/actions/dmn/InputsOverview.js       |  4 +-
 .../logic/actions/dmn/VariableMapping.js      |  2 +-
 .../scss/components/admin/_ReactModal.scss    |  6 +--
 .../scss/components/admin/_index.scss         |  2 +-
 .../scss/components/admin/_logic-dmn.scss     | 22 +++++++++
 .../scss/components/admin/_mappings.scss      | 17 -------
 7 files changed, 55 insertions(+), 47 deletions(-)
 create mode 100644 src/openforms/scss/components/admin/_logic-dmn.scss
 delete mode 100644 src/openforms/scss/components/admin/_mappings.scss

diff --git a/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js b/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js
index c93acd3b58..265f76c4c9 100644
--- a/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js
+++ b/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>
   );
 };
diff --git a/src/openforms/js/components/admin/form_design/logic/actions/dmn/InputsOverview.js b/src/openforms/js/components/admin/form_design/logic/actions/dmn/InputsOverview.js
index 06a3ccb903..c2e14486d2 100644
--- a/src/openforms/js/components/admin/form_design/logic/actions/dmn/InputsOverview.js
+++ b/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>
diff --git a/src/openforms/js/components/admin/form_design/logic/actions/dmn/VariableMapping.js b/src/openforms/js/components/admin/form_design/logic/actions/dmn/VariableMapping.js
index dbaf721dc0..54d8927057 100644
--- a/src/openforms/js/components/admin/form_design/logic/actions/dmn/VariableMapping.js
+++ b/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>
diff --git a/src/openforms/scss/components/admin/_ReactModal.scss b/src/openforms/scss/components/admin/_ReactModal.scss
index 836074839e..a39a7b59ba 100644
--- a/src/openforms/scss/components/admin/_ReactModal.scss
+++ b/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 {
diff --git a/src/openforms/scss/components/admin/_index.scss b/src/openforms/scss/components/admin/_index.scss
index 480cabedef..ff2ebf8aa1 100644
--- a/src/openforms/scss/components/admin/_index.scss
+++ b/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';
diff --git a/src/openforms/scss/components/admin/_logic-dmn.scss b/src/openforms/scss/components/admin/_logic-dmn.scss
new file mode 100644
index 0000000000..51998538cb
--- /dev/null
+++ b/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%;
+    }
+  }
+}
diff --git a/src/openforms/scss/components/admin/_mappings.scss b/src/openforms/scss/components/admin/_mappings.scss
deleted file mode 100644
index a2582b082f..0000000000
--- a/src/openforms/scss/components/admin/_mappings.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use 'microscope-sass/lib/bem';
-
-.mappings {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-
-  @include bem.element('info') {
-    padding-block-start: 20px;
-  }
-
-  @include bem.element('mapping') {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
-}