From 85df76c2f68f6c5bd2aba8a8ad8be85a681380e5 Mon Sep 17 00:00:00 2001
From: Erling Hauan <148075168+ErlingHauan@users.noreply.github.com>
Date: Mon, 22 Jul 2024 10:50:31 +0200
Subject: [PATCH] fix(Textfield): Disable word-wrapping inside prefix and
 suffix (#2177)

## Description
We encountered an
[issue](https://github.com/Altinn/altinn-studio/issues/13167) in Altinn
Studio when we added prefix and suffix to the Textfield component. When
a text inside a prefix/suffix contains a hyphen, a line break is created
and the container overflows vertically.

The issue can be solved by adding `white-space: nowrap` to the prefix
and suffix classes.

## Screenshots
This is from testing in local Storybook.

**Before**:

![prefix-before](https://github.com/user-attachments/assets/06f7e613-9552-4e94-b28f-78520193f11d)


**After**:

![prefix-after](https://github.com/user-attachments/assets/f96aec9f-71e7-4df5-9ee1-24fbfe00c4d2)
---
 packages/css/textfield.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/css/textfield.css b/packages/css/textfield.css
index 228ea2eb2c..ee09f6b7c5 100644
--- a/packages/css/textfield.css
+++ b/packages/css/textfield.css
@@ -131,12 +131,14 @@
   border-right: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
+  white-space: nowrap;
 }
 
 .ds-textfield__suffix {
   border-left: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+  white-space: nowrap;
 }
 
 .ds-textfield__readonly__icon {