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 44b4f3ef5..6e16be15b 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 8e601ea3e..0b11c17ea 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;