fix(picker): prevent diacritic text cutoff (#2914)

.changeset/nasty-moose-act.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/picker": patch
+---
+
+Changes picker margin to padding in order to accommodate text with diacritics that may be cut off vertically.

components/picker/index.css

@@ -358,8 +358,8 @@
 	text-overflow: ellipsis;
 	text-align: start;
 
-	margin-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text));
-	margin-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
+	padding-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text));
+	padding-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
 
 	&.is-placeholder {
 		font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight));

components/picker/stories/picker.stories.js

@@ -207,7 +207,7 @@ const Variants = (args) => html`
 					...args,
 					isOpen: false,
 					withSwitch: true,
-					placeholder: "Select your contry of origin",
+					placeholder: "Select your country of origin",
 					isQuiet: true,
 				})}
 		</div>
@@ -220,7 +220,7 @@ const Variants = (args) => html`
 				isQuiet: true,
 				fieldLabelStyle: {"max-width": "90px"},
 				label: "Enter country, text should wrap",
-				placeholder: "Select your contry of origin"
+				placeholder: "Select your country of origin"
 			})}
 		</div>
 	</div>