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
WordPress · Aug 15, 2023 · c167bb6 · c167bb6
1 parent b36ac1b
commit c167bb6
Showing 1 changed file with 8 additions and 2 deletions.
diff --git 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;