From 2701b4a9830c328f058af421bd2d171a6ada6fbf Mon Sep 17 00:00:00 2001
From: GZolla <43836485+GZolla@users.noreply.github.com>
Date: Fri, 17 Jul 2026 13:34:31 -0700
Subject: [PATCH 1/2] fix: adjust overflow clip margin to line height

---
 components/typography/styles.js | 4 ++++
 helpers/overflow.js             | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/typography/styles.js b/components/typography/styles.js
index 702f988a84a..3d9ff2ba025 100644
--- a/components/typography/styles.js
+++ b/components/typography/styles.js
@@ -149,6 +149,7 @@ export const _generateBodySmallStyles = (selector, includeSkeleton = true) => {
 		}` : unsafeCSS('');
 	return css`
 		${selector} {
+			--d2l-overflow-clip-margin: 0.1em;
 			color: var(--d2l-theme-text-color-static-subtle);
 			font-size: 0.7rem;
 			font-weight: 400;
@@ -186,6 +187,7 @@ export const _generateHeading1Styles = (selector, includeFocus = false) => {
 		${focusStyles}
 		@media (max-width: 615px) {
 			${selector} {
+				--d2l-overflow-clip-margin: 0.15em;
 				font-size: 1.5rem;
 				line-height: 1.8rem;
 			}
@@ -224,6 +226,7 @@ export const _generateHeading2Styles = (selector, includeFocus = false) => {
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
+			--d2l-overflow-clip-margin: 0.15em;
 			font-size: 1.5rem;
 			font-weight: 400;
 			line-height: 1.8rem;
@@ -352,6 +355,7 @@ export const _generateLabelStyles = (selector, includeSkeleton = true) => {
 	` : unsafeCSS('');
 	return css`
 		${selector} {
+			--d2l-overflow-clip-margin: 0.1em;
 			font-size: 0.7rem;
 			font-weight: 700;
 			letter-spacing: 0.2px;
diff --git a/helpers/overflow.js b/helpers/overflow.js
index a0ef4f19a70..4b3d08d9d8d 100644
--- a/helpers/overflow.js
+++ b/helpers/overflow.js
@@ -13,7 +13,7 @@ export function getOverflowDeclarations({ textOverflow = '', lines = 0, lit = tr
 		${lines
 			? set`
 			display: -webkit-box;
-			overflow-clip-margin: 0.2em;
+			overflow-clip-margin: var(--d2l-overflow-clip-margin, 0.2em);
 			overflow-wrap: anywhere;
 			overflow-y: clip;
 			text-overflow: ${textOverflow || 'ellipsis'};

From 21a3ba26b28a23f648b2b25efa9137bdf83f48ed Mon Sep 17 00:00:00 2001
From: GZolla <43836485+GZolla@users.noreply.github.com>
Date: Fri, 17 Jul 2026 15:08:38 -0700
Subject: [PATCH 2/2] Fix test

---
 helpers/test/overflow.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/helpers/test/overflow.test.js b/helpers/test/overflow.test.js
index 15e4aab9dd1..b71c283b649 100644
--- a/helpers/test/overflow.test.js
+++ b/helpers/test/overflow.test.js
@@ -27,7 +27,7 @@ describe('overflow', () => {
 				min-width: 0; /* clamps width of flex items */
 				overflow-x: clip;
 				display: -webkit-box;
-				overflow-clip-margin: 0.2em;
+				overflow-clip-margin: var(--d2l-overflow-clip-margin, 0.2em);
 				overflow-wrap: anywhere;
 				overflow-y: clip;
 				text-overflow: ellipsis;