Add padding on the right of the text input depending on the size of t…

…he buttons div

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 })

rdmo/projects/assets/scss/interview.scss

@@ -227,6 +227,10 @@
         text-overflow: ellipsis;
     }
 
+    input[type="text"] {
+        text-overflow:ellipsis;
+    }
+
     .radio,
     .checkbox {
         margin: 0;