diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml
index ed4bd5ae19e74f8711fe81ae87357608b56dda38..ed9b3ab19409a2d1c7c30f31c0902e425d45a693 100644
--- a/app/views/ci/variables/_variable_row.html.haml
+++ b/app/views/ci/variables/_variable_row.html.haml
@@ -30,7 +30,7 @@
       value: key,
       placeholder: s_('CiVariables|Input variable key') }
     .ci-variable-body-item.gl-show-field-errors.table-section.section-15.border-top-0.p-0
-      .form-control.js-secret-value-placeholder.qa-ci-variable-input-value{ class: ('hide' unless id) }
+      .form-control.js-secret-value-placeholder.qa-ci-variable-input-value.overflow-hidden{ class: ('hide' unless id) }
         = '*' * 17
       %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ class: ('hide' if id),
         rows: 1,
diff --git a/changelogs/unreleased/30392-variables.yml b/changelogs/unreleased/30392-variables.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2a35ffd3215acb03456016840dac61788f9d4228
--- /dev/null
+++ b/changelogs/unreleased/30392-variables.yml
@@ -0,0 +1,5 @@
+---
+title: Fixes variables overflowing in sm screens
+merge_request:
+author:
+type: fixed