From f35b6e2f9c0d88ba88091a3ae6d6f2105e0f4de4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= <tomalecpub@gmail.com>
Date: Tue, 2 Jan 2024 22:42:19 +0100
Subject: [PATCH] Fix sizing of `<SelectControl>` & UI bug for
 `<ReportFilters>` (#42969)

Fix the style of select control components

Set `box-sizing` to `border-box`, to prevent `<SelectControl>` from being wider than its container.
---
 packages/js/components/changelog/42969-fix-select-style | 4 ++++
 packages/js/components/src/select-control/style.scss    | 1 +
 2 files changed, 5 insertions(+)
 create mode 100644 packages/js/components/changelog/42969-fix-select-style

diff --git a/packages/js/components/changelog/42969-fix-select-style b/packages/js/components/changelog/42969-fix-select-style
new file mode 100644
index 00000000000..ec82878f39a
--- /dev/null
+++ b/packages/js/components/changelog/42969-fix-select-style
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix sizing of `<SelectControl>`.
\ No newline at end of file
diff --git a/packages/js/components/src/select-control/style.scss b/packages/js/components/src/select-control/style.scss
index fc870497a8a..4c936962e68 100644
--- a/packages/js/components/src/select-control/style.scss
+++ b/packages/js/components/src/select-control/style.scss
@@ -4,6 +4,7 @@
 	.components-base-control {
 		height: 56px;
 		display: flex;
+		box-sizing: border-box;
 		align-items: center;
 		border: 1px solid $studio-gray-20;
 		border-radius: 3px;