From bb8c9c782d12d73f938286098c229dfef67e44ae Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 31 Jan 2025 16:05:43 +0100
Subject: [PATCH] Move buttons to the bottom for the TextareaInput component

---
 .../components/main/widget/CheckboxWidget.js       |  2 +-
 .../interview/components/main/widget/DateInput.js  |  2 +-
 .../interview/components/main/widget/FileInput.js  |  2 +-
 .../interview/components/main/widget/RadioInput.js |  2 +-
 .../interview/components/main/widget/RangeInput.js |  1 +
 .../components/main/widget/SelectInput.js          |  2 +-
 .../interview/components/main/widget/TextInput.js  |  2 +-
 .../components/main/widget/TextareaInput.js        |  4 ++--
 .../interview/components/main/widget/YesNoInput.js |  2 +-
 rdmo/projects/assets/scss/interview.scss           | 14 ++++++++++++--
 10 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
index 6c411c3abb..d7652c44b2 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
@@ -39,7 +39,7 @@ const CheckboxWidget = ({ page, question, sets, values, siblings, currentSet, di
   return (
     <div className="interview-widgets">
       <div className="interview-widget">
-        <div className="interview-input">
+        <div className="interview-input checkbox-input">
           <div className="buttons-wrapper">
             <div className="checkbox-control">
               {
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js b/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
index 20e5f89b69..da4d37b26c 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
@@ -52,7 +52,7 @@ const DateInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input date-input">
       <div className="buttons-wrapper">
         {buttons}
         <DatePicker
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js b/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
index 51fa03202c..cfeeaa0e49 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
@@ -17,7 +17,7 @@ const FileInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input file-input">
       <div className="buttons-wrapper">
         {buttons}
         <div className="file-control">
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
index d119a81452..1590ac4bb4 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
@@ -44,7 +44,7 @@ const RadioInput = ({ question, value, options, disabled, updateValue, buttons }
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input radio-input">
       <div className="buttons-wrapper">
         {buttons}
         <div className={classnames}>
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
index 7f28d9f28b..dc86dc4e16 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
@@ -18,6 +18,7 @@ const RangeInput = ({ question, value, disabled, updateValue, buttons }) => {
 
   const classnames = classNames({
     'interview-input': true,
+    'range-input': true,
     'range': true,
     'default': isDefaultValue(question, value)
   })
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js b/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
index b53f1f6baf..a037a5eeff 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
@@ -105,7 +105,7 @@ const SelectInput = ({ question, value, options, disabled, creatable, updateValu
   }
 
   return (
-    <div className="interview-input">
+    <div className="interview-input select-input">
       {
         creatable ? (
           isAsync ? (
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
index 6e16be15b9..3a122f35e7 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
@@ -33,7 +33,7 @@ const TextInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input text-input">
       <div className="buttons-wrapper">
         {buttons}
         <input
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
index bc8cf49437..d3e2136728 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
@@ -26,9 +26,8 @@ const TextareaInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input textarea-input">
       <div className="buttons-wrapper">
-        {buttons}
         <textarea
           ref={ref}
           rows={6}
@@ -40,6 +39,7 @@ const TextareaInput = ({ question, value, disabled, updateValue, buttons }) => {
             handleChange(value, event.target.value)
           }}
         />
+        {buttons}
       </div>
       <Unit unit={question.unit} />
     </div>
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js b/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
index 7216673298..edd2add2b4 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
@@ -22,7 +22,7 @@ const YesNoInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input yesno-input">
       <div className="buttons-wrapper">
         {buttons}
         <div className={classnames}>
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index 0b11c17eaa..6cd678e37d 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -165,8 +165,9 @@
         }
     }
 
-    &:has(.react-select) {
+    &.select-input {
         .buttons {
+            // in a select widget, additional space is reserved for the dropdown icon
             position: absolute;
             right: 62px;
             margin-top: 2px;
@@ -174,6 +175,15 @@
         }
     }
 
+    &.textarea-input {
+        .buttons {
+            // in a textarea widget, the buttons are positioned at the bottom
+            top: auto;
+            height: 32px;
+            bottom: 0;
+        }
+    }
+
     .buttons {
         display: flex;
         gap: 10px;
@@ -228,7 +238,7 @@
     }
 
     input[type="text"] {
-        text-overflow:ellipsis;
+        text-overflow: ellipsis;
     }
 
     .radio,