fix(components): remove max-width on Heading (#1693)

Niznikr · web-flow · commit 7434f3ea1c0a · 2025-05-27T09:39:22.000-04:00
diff --git a/.changeset/thirty-bags-rule.md b/.changeset/thirty-bags-rule.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Remove max-width on `Heading`
diff --git a/packages/components/src/styles/Heading.module.css b/packages/components/src/styles/Heading.module.css
@@ -1,7 +1,5 @@
 .heading {
 	white-space: nowrap;
-	max-width: calc(100% - var(--lp-size-32));
 	overflow: hidden;
 	text-overflow: ellipsis;
-	position: relative;
 }
diff --git a/packages/components/src/styles/Modal.module.css b/packages/components/src/styles/Modal.module.css
@@ -50,7 +50,7 @@
 
 	& [slot='title'] {
 		font: var(--lp-text-heading-1-semibold);
-		flex-grow: 1;
+		grid-column: 1;
 	}
 
 	& [role='dialog']:has([slot='body']) {
@@ -61,10 +61,14 @@
 	}
 
 	& [slot='header'] {
-		display: flex;
+		display: grid;
+		grid-template-columns: 1fr;
 		align-items: center;
 		gap: var(--lp-spacing-300);
-		flex-wrap: wrap;
+
+		& button[data-rac] {
+			grid-column: 2;
+		}
 	}
 
 	& [slot='body'] {
@@ -82,7 +86,8 @@
 	& [slot='subtitle'] {
 		font: var(--lp-text-body-1-regular);
 		color: var(--lp-color-text-ui-secondary);
-		flex-basis: 100%;
+		grid-row: 2;
+		grid-column: 1 / span 2;
 	}
 }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@launchpad-ui/components": patch
 +---
++
 +Remove max-width on `Heading`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@`
`50`	`50`
`51`	`51`	`& [slot='title'] {`
`52`	`52`	`font: var(--lp-text-heading-1-semibold);`
`53`		`- flex-grow: 1;`
	`53`	`+ grid-column: 1;`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`& [role='dialog']:has([slot='body']) {`
`@@ -61,10 +61,14 @@`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`& [slot='header'] {`
`64`		`- display: flex;`
	`64`	`+ display: grid;`
	`65`	`+ grid-template-columns: 1fr;`
`65`	`66`	`align-items: center;`
`66`	`67`	`gap: var(--lp-spacing-300);`
`67`		`- flex-wrap: wrap;`
	`68`	`+`
	`69`	`+ & button[data-rac] {`
	`70`	`+ grid-column: 2;`
	`71`	`+ }`
`68`	`72`	`}`
`69`	`73`
`70`	`74`	`& [slot='body'] {`
`@@ -82,7 +86,8 @@`
`82`	`86`	`& [slot='subtitle'] {`
`83`	`87`	`font: var(--lp-text-body-1-regular);`
`84`	`88`	`color: var(--lp-color-text-ui-secondary);`
`85`		`- flex-basis: 100%;`
	`89`	`+ grid-row: 2;`
	`90`	`+ grid-column: 1 / span 2;`
`86`	`91`	`}`
`87`	`92`	`}`
`88`	`93`