From 513031b85052b965480b72f5ed34319e3c67926f Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Tue, 19 Dec 2023 11:29:18 -0800
Subject: [PATCH] fix: increase area for placeholder (#2921)

allows the input to expand to show a larger placeholder
adds a story for the placeholder attribute
---
 .../src/components/mgt-people-picker/mgt-people-picker.scss   | 4 +++-
 .../peoplePicker/peoplePicker.properties.stories.js           | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss
index 0aa9e505b8..ff93623037 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss
@@ -41,7 +41,9 @@ $people-picker-selected-person-avatar-size: var(--people-picker-selected-person-
     }
 
     &::part(control) {
-      width: min-content;
+      width: auto;
+      flex-grow: 1;
+      min-width: 25%;
       height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
       word-spacing: inherit;
       text-indent: inherit;
diff --git a/stories/components/peoplePicker/peoplePicker.properties.stories.js b/stories/components/peoplePicker/peoplePicker.properties.stories.js
index a64b2246ff..12c432d9e4 100644
--- a/stories/components/peoplePicker/peoplePicker.properties.stories.js
+++ b/stories/components/peoplePicker/peoplePicker.properties.stories.js
@@ -14,6 +14,10 @@ export default {
   decorators: [withCodeEditor]
 };
 
+export const setPlaceholder = () => html`
+<mgt-people-picker placeholder="Select people"></mgt-people-picker>
+`;
+
 export const showPresence = () => html`
 <mgt-people-picker show-presence></mgt-people-picker>
 `;