From 1827bb7e1a5c87200c494e93b6c12d4db51f2dcd Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Wed, 25 Sep 2024 08:58:09 +0200
Subject: [PATCH] fix: issue with long inline links not breaking (#3232)

---
 .../src/styles/_link-components.scss          |  9 ++++++-
 .../src/components/form/index.tsx             | 25 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/styles/_link-components.scss b/packages/components/src/styles/_link-components.scss
index 2ce980db6e5..4f39e1486ba 100644
--- a/packages/components/src/styles/_link-components.scss
+++ b/packages/components/src/styles/_link-components.scss
@@ -40,7 +40,14 @@
 	// TODO: We should evaluate whether we could move this declaration to the @font-face declarations even already
 	text-underline-position: from-font;
 	text-decoration-thickness: helpers.px-to-rem($pxValue: 1);
-	white-space: nowrap;
+
+	&:not([data-variant="inline"]) {
+		white-space: nowrap;
+	}
+
+	&[data-variant="inline"] {
+		display: inline;
+	}
 
 	&:focus-visible {
 		border-radius: variables.$db-border-radius-xs;
diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
index 984ecbd608d..f890466aa67 100644
--- a/showcases/react-showcase/src/components/form/index.tsx
+++ b/showcases/react-showcase/src/components/form/index.tsx
@@ -16,7 +16,8 @@ import {
 	DBTabItem,
 	DBTag,
 	DBTextarea,
-	DBTooltip
+	DBTooltip,
+	DBLink
 } from '../../../../../output/react/src';
 import type {
 	ChangeEvent,
@@ -273,6 +274,28 @@ const FormComponent = () => {
 
 				<DBDivider />
 
+				<p>
+					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+					diam nonumy eirmod tempor{' '}
+					<DBLink variant="inline" href="#">
+						invidunt
+					</DBLink>{' '}
+					ut labore et dolore magna aliquyam erat, sed diam voluptua.
+					At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+					ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+					sadipscing elitr, sed diam nonumy eirmod tempor{' '}
+					<DBLink variant="inline" href="#">
+						labore et dolore magna aliquyam erat, sed diam voluptua.
+						At vero eos et accusam et justo duo dolores et ea rebum.
+						Stet
+					</DBLink>{' '}
+					ut labore et dolore magna aliquyam erat, sed diam voluptua.
+					At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+					ipsum dolor sit amet.
+				</p>
+
 				<DBButton
 					onClick={() => {
 						setTabsTest(!tabsTest);