From 778205350119a8347821db5c1864b78d59f48149 Mon Sep 17 00:00:00 2001
From: vasileios <zigras00@gmail.com>
Date: Wed, 24 Jul 2024 14:20:54 +0200
Subject: [PATCH] [#4519] Added max-inline-size for form variable dropdowns

---
 src/openforms/js/components/admin/forms/VariableSelection.js | 1 +
 src/openforms/scss/_vars.scss                                | 1 +
 src/openforms/scss/components/admin/_dsl-editor.scss         | 2 +-
 src/openforms/scss/components/admin/_index.scss              | 3 +++
 src/openforms/scss/components/admin/_select.scss             | 3 +++
 5 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 src/openforms/scss/components/admin/_select.scss

diff --git a/src/openforms/js/components/admin/forms/VariableSelection.js b/src/openforms/js/components/admin/forms/VariableSelection.js
index 514a301ed5..1d8c8264ae 100644
--- a/src/openforms/js/components/admin/forms/VariableSelection.js
+++ b/src/openforms/js/components/admin/forms/VariableSelection.js
@@ -39,6 +39,7 @@ const VariableSelection = ({
   return (
     <Select
       id={id}
+      className="form-variable-dropdown"
       name={name}
       choices={choices}
       allowBlank
diff --git a/src/openforms/scss/_vars.scss b/src/openforms/scss/_vars.scss
index 7cb965e8db..b524511b8d 100644
--- a/src/openforms/scss/_vars.scss
+++ b/src/openforms/scss/_vars.scss
@@ -28,6 +28,7 @@ $django-hijack-yellow: #ffe761;
   /* Dimensions */
   --of-admin-input-field-size: 40em; // original: 20em;
   --of-admin-checkbox-gap: 5px;
+  --of-admin-select-max-inline-size: 300px;
 
   /* Tooltip */
   --of-admin-tooltip-background-color: #fffeaa;
diff --git a/src/openforms/scss/components/admin/_dsl-editor.scss b/src/openforms/scss/components/admin/_dsl-editor.scss
index bdf39bd5a4..85abed78e3 100644
--- a/src/openforms/scss/components/admin/_dsl-editor.scss
+++ b/src/openforms/scss/components/admin/_dsl-editor.scss
@@ -10,7 +10,7 @@
     // account for possibly long labels
     select,
     input {
-      max-width: 30em;
+      max-inline-size: var(--of-admin-select-max-inline-size);
     }
 
     label {
diff --git a/src/openforms/scss/components/admin/_index.scss b/src/openforms/scss/components/admin/_index.scss
index ff2ebf8aa1..d723b1693c 100644
--- a/src/openforms/scss/components/admin/_index.scss
+++ b/src/openforms/scss/components/admin/_index.scss
@@ -43,3 +43,6 @@
 
 // Errors
 @import './error-message';
+
+// Form variables select-dropdown
+@import './select';
diff --git a/src/openforms/scss/components/admin/_select.scss b/src/openforms/scss/components/admin/_select.scss
new file mode 100644
index 0000000000..ab8157a5f3
--- /dev/null
+++ b/src/openforms/scss/components/admin/_select.scss
@@ -0,0 +1,3 @@
+.form-variable-dropdown {
+  max-inline-size: var(--of-admin-select-max-inline-size);
+}