fix (web components): height clamp box sizing select (#16347)

* add height clamp and box sizing for select * Change files Co-authored-by: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
microsoft · Jan 4, 2021 · 981bbd2 · 981bbd2
1 parent 62d455a
commit 981bbd2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/...web-components-2021-01-04-10-10-23-users-v-sedono-fix-height-clamp-box-sizing-select.json b/...web-components-2021-01-04-10-10-23-users-v-sedono-fix-height-clamp-box-sizing-select.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "add height clamp and box sizing for select",
+  "packageName": "@fluentui/web-components",
+  "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-01-04T18:10:23.659Z"
+}
diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts
@@ -25,8 +25,10 @@ export const SelectStyles = css`
         background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
         border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
+        box-sizing: border-box;
         color: ${neutralForegroundRestBehavior.var};
         contain: contents;
+        height: calc(${heightNumber} * 1px);
         position: relative;
         user-select: none;
         min-width: 250px;