From c167bb6fd209d34c6cef4ac9f6a898d1d15c73c9 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 15 Aug 2023 15:26:55 -0400
Subject: [PATCH] Improve command palette rendering on smaller viewports
 (#53661)

* Tweaks for mobile

* Use proper modal border radius

* Ensure width does not clash with viewport edge

* Adjust top position, break-small
---
 packages/commands/src/components/style.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss
index 16db48bac4468..6893a3c3d61d2 100644
--- a/packages/commands/src/components/style.scss
+++ b/packages/commands/src/components/style.scss
@@ -1,9 +1,15 @@
 // dirty hack to clean up modal
 .commands-command-menu {
-	width: 100%;
+	border-radius: $grid-unit-05;
+	width: calc(100% - #{$grid-unit-40});
+	margin: auto;
 	max-width: 420px;
 	position: relative;
-	top: 15%;
+	top: calc(15% + #{$header-height});
+
+	@include break-small() {
+		top: 15%;
+	}
 
 	.components-modal__content {
 		margin: 0;