From 1a1d78ad57dee01d206dbfa0612d773967f5c27a Mon Sep 17 00:00:00 2001
From: Red Ochsenbein <red.ochsenbein@frontify.com>
Date: Mon, 18 May 2026 13:40:46 +0200
Subject: [PATCH 1/2] fix(TextInput): prevent input from growing past the
 border

---
 .../TextInput/styles/text.module.scss         | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/TextInput/styles/text.module.scss b/packages/components/src/components/TextInput/styles/text.module.scss
index 9f32339834..fd5439171b 100644
--- a/packages/components/src/components/TextInput/styles/text.module.scss
+++ b/packages/components/src/components/TextInput/styles/text.module.scss
@@ -61,7 +61,7 @@
         border-color: var(--color-error-default);
     }
 
-    // Remove text-indent and border-radius from input and placeholder when there's a left slot
+    // Remove padding and border-radius from input and placeholder when there's a left slot
     &:has(.slot:not([data-name='right'])) {
         .input {
             padding-inline-start: 0;
@@ -74,27 +74,29 @@
         }
     }
 
-    // Remove text-indent and border-radius from input and placeholder when there's a left slot
-    &:has(.slot:not([data-name='right'])) {
+    // Remove padding and border-radius from input and placeholder when there's a right slot
+    &:has(.slot[data-name='right']) {
         .input {
-            padding-inline-start: 0;
-            border-start-start-radius: 0px;
-            border-end-start-radius: 0px;
+            padding-inline-end: 0;
+            border-start-end-radius: 0px;
+            border-end-end-radius: 0px;
         }
 
         .placeholder {
-            text-indent: 0px;
+            padding-inline-end: 0;
         }
     }
 }
 
 .input {
+    box-sizing: border-box;
     width: 100%;
     background-color: transparent;
     display: flex;
     align-items: center;
     text-align: inherit;
     padding-inline-start: sizeToken.get(3);
+    padding-inline-end: sizeToken.get(3);
     outline: 2px solid transparent;
     outline-offset: 2px;
     border-radius: calc(var(--border-radius-medium) - var(--border-width-default));
@@ -109,13 +111,6 @@
         outline-offset: 2px;
     }
 
-    // Remove border-radius and padding on the right if there's a right-side slot
-    &:has(~ .slot[data-side='right'], ~ .slot:not([data-side='right']) ~ .slot:not([data-side='left'])) {
-        padding-inline-end: 0;
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
-    }
-
     &[type='time'] {
         text-indent: 0;
         padding-inline-start: sizeToken.get(3);
@@ -126,6 +121,7 @@
         cursor: text;
         color: var(--color-primary-default);
         padding-inline-start: 0;
+        padding-inline-end: 0;
         text-indent: 0px;
     }
 
@@ -239,6 +235,7 @@
         pointer-events: none;
         opacity: 0;
         text-indent: sizeToken.get(3);
+        padding-inline-end: sizeToken.get(3);
         display: block;
         text-align: inherit;
         font-family: var(--typography-font-family-primary);

From 9d16b644991c16117ceeac18acd9c19fe64cc4f7 Mon Sep 17 00:00:00 2001
From: Red Ochsenbein <red.ochsenbein@frontify.com>
Date: Mon, 18 May 2026 13:43:51 +0200
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/sad-fans-decide.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/sad-fans-decide.md

diff --git a/.changeset/sad-fans-decide.md b/.changeset/sad-fans-decide.md
new file mode 100644
index 0000000000..3cd7f4682a
--- /dev/null
+++ b/.changeset/sad-fans-decide.md
@@ -0,0 +1,6 @@
+---
+"@frontify/fondue-components": minor
+"@frontify/fondue": minor
+---
+
+fix(TextInput): prevent input from growing past the border