Merge pull request #4558 from open-formulieren/fix/4519-max-size-for-…

…formvariable-dropdowns

[#4519] Decrease horizontal space of form variable dropdowns

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

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;

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 {

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

@@ -43,3 +43,6 @@
 
 // Errors
 @import './error-message';
+
+// Form variables select-dropdown
+@import './select';

src/openforms/scss/components/admin/_select.scss

@@ -0,0 +1,3 @@
+.form-variable-dropdown {
+  max-inline-size: var(--of-admin-select-max-inline-size);
+}