fix: Add inline padding to Select (#2062)

Co-authored-by: Ricardo Jaime Gil Simões <[email protected]> Co-authored-by: Chris Swithinbank <[email protected]>
withastro · Jun 28, 2024 · 5ac0ac6 · 5ac0ac6
1 parent 3ee1a94
commit 5ac0ac6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/angry-pots-yawn.md b/.changeset/angry-pots-yawn.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Increase theme and language select inline padding
diff --git a/packages/starlight/components/Select.astro b/packages/starlight/components/Select.astro
@@ -31,6 +31,7 @@ interface Props {
 	label {
 		--sl-label-icon-size: 0.875rem;
 		--sl-caret-size: 1.25rem;
+		--sl-inline-padding: 0.5rem;
 		position: relative;
 		display: flex;
 		align-items: center;
@@ -62,8 +63,9 @@ interface Props {
 	select {
 		border: 0;
 		padding-block: 0.625rem;
-		padding-inline: calc(var(--sl-label-icon-size) + 0.25rem) calc(var(--sl-caret-size) + 0.25rem);
-		width: var(--sl-select-width);
+		padding-inline: calc(var(--sl-label-icon-size) + var(--sl-inline-padding) + 0.25rem) calc(var(--sl-caret-size) + var(--sl-inline-padding) + 0.25rem);
+		margin-inline: calc(var(--sl-inline-padding) * -1);
+		width: calc(var(--sl-select-width) + var(--sl-inline-padding) * 2);
 		background-color: transparent;
 		text-overflow: ellipsis;
 		color: inherit;