From ee4b281b7bd835f6e5bc6f427eaa60f236ca96e4 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 31 Jan 2025 15:16:44 +0100
Subject: [PATCH] Add padding on the right of the text input depending on the
 size of the buttons div

---
 .../js/interview/components/main/widget/TextInput.js     | 9 ++++++++-
 rdmo/projects/assets/scss/interview.scss                 | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

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 44b4f3ef57..6e16be15b9 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useDebouncedCallback } from 'use-debounce'
@@ -15,6 +15,13 @@ const TextInput = ({ question, value, disabled, updateValue, buttons }) => {
 
   useEffect(() => {setInputValue(value.text)}, [value.text])
   useFocusEffect(ref, value.focus)
+  useLayoutEffect(() => {
+    if (ref.current) {
+      // add a right padding of the size of the buttons div, plus some space for the success indicator
+      const buttonsWidth = ref.current.previousElementSibling.offsetWidth + 20
+      ref.current.style.paddingRight = `${buttonsWidth}px`
+    }
+  }, [buttons])
 
   const handleChange = useDebouncedCallback((value, text) => {
     updateValue(value, { text, unit: question.unit, value_type: question.value_type })
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index 8e601ea3ec..0b11c17eaa 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -227,6 +227,10 @@
         text-overflow: ellipsis;
     }
 
+    input[type="text"] {
+        text-overflow:ellipsis;
+    }
+
     .radio,
     .checkbox {
         margin: 0;