fix(components): tweak layout of collection items with icons and descriptions (#1762)

apucacao · web-flow · commit 4434d418a67d · 2025-09-03T16:02:42.000-04:00
diff --git a/.changeset/metal-turtles-own.md b/.changeset/metal-turtles-own.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+tweak layout of collection items with icons and descriptions
diff --git a/package.json b/package.json
@@ -87,11 +87,12 @@
 		"onlyBuiltDependencies": [
 			"@biomejs/biome",
 			"@bundled-es-modules/glob",
+			"@parcel/watcher",
 			"@swc/core",
 			"esbuild",
 			"nx",
-			"style-dictionary",
-			"rolldown"
+			"rolldown",
+			"style-dictionary"
 		],
 		"peerDependencyRules": {
 			"allowedVersions": {
diff --git a/packages/components/src/styles/Menu.module.css b/packages/components/src/styles/Menu.module.css
@@ -66,7 +66,7 @@
 			& .content {
 				grid-template-areas:
 					'label kbd'
-					'desc kbd';
+					'desc -';
 				grid-template-columns: 1fr min-content;
 			}
 		}
@@ -81,6 +81,11 @@
 
 	& [slot='description'] {
 		grid-area: desc;
+		word-break: break-all;
+	}
+
+	&:has([data-icon]) [slot='description'] {
+		padding-inline-start: calc(var(--lp-size-16) + var(--lp-spacing-300));
 	}
 
 	& kbd {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@launchpad-ui/components": patch
 +---
++
 +tweak layout of collection items with icons and descriptions
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`& .content {`
`67`	`67`	`grid-template-areas:`
`68`	`68`	`'label kbd'`
`69`		`- 'desc kbd';`
	`69`	`+ 'desc -';`
`70`	`70`	`grid-template-columns: 1fr min-content;`
`71`	`71`	`}`
`72`	`72`	`}`
`@@ -81,6 +81,11 @@`
`81`	`81`
`82`	`82`	`& [slot='description'] {`
`83`	`83`	`grid-area: desc;`
	`84`	`+ word-break: break-all;`
	`85`	`+ }`
	`86`	`+`
	`87`	`+ &:has([data-icon]) [slot='description'] {`
	`88`	`+ padding-inline-start: calc(var(--lp-size-16) + var(--lp-spacing-300));`
`84`	`89`	`}`
`85`	`90`
`86`	`91`	`& kbd {`