Improve Command Palette on mobile (#10071)

* init * Update _command-palette.scss * Update _command-palette.scss
jenkinsci · Dec 19, 2024 · 9afbe05 · 9afbe05
1 parent 9b15bf9
commit 9afbe05
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/main/scss/base/_typography.scss b/src/main/scss/base/_typography.scss
@@ -1,4 +1,5 @@
 @use "../abstracts/mixins";
+@use "../base/breakpoints";
 
 body,
 p {
@@ -16,11 +17,19 @@ button {
 table,
 td,
 th,
-form,
+form {
+  font-size: var(--font-size-sm);
+}
+
 input,
 textarea,
 select {
   font-size: var(--font-size-sm);
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media (max-width: breakpoints.$tablet-breakpoint) {
+    font-size: var(--font-size-base);
+  }
 }
 
 // Reset monospaced font-size, because browsers reduce it by default to ~81%

diff --git a/src/main/scss/components/_command-palette.scss b/src/main/scss/components/_command-palette.scss
@@ -1,10 +1,11 @@
 @use "../abstracts/mixins";
+@use "../base/breakpoints";
 
 .jenkins-command-palette__dialog {
   background: none;
   border: none;
-  height: 100vw !important;
-  max-height: 100vh !important;
+  height: 100dvh !important;
+  max-height: 100dvh !important;
   width: 100vw !important;
   max-width: 100vw !important;
   margin: 0 !important;
@@ -47,28 +48,39 @@
 }
 
 .jenkins-command-palette__wrapper {
+  --inset: 15vh;
+
   width: 100%;
   height: 100%;
-  max-height: 100vh;
+  max-height: 100dvh;
   overflow: scroll;
-  padding-top: 20vh;
+  padding-top: var(--inset);
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media (max-width: breakpoints.$tablet-breakpoint) {
+    --inset: 10vh;
+  }
 }
 
 .jenkins-command-palette {
   position: relative;
   width: 50vw;
-  min-width: 400px;
   max-width: 650px;
   color: var(--text-color);
   pointer-events: auto;
-  margin: 0 auto 20vh;
+  margin: 0 auto var(--inset);
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media (max-width: breakpoints.$tablet-breakpoint) {
+    width: calc(100% - (var(--section-padding) * 2));
+  }
 
   &__search {
     --search-bar-height: 3rem !important;
 
     background: transparent;
     box-shadow: var(--command-palette-inset-shadow);
-    margin-bottom: 1.5rem;
+    margin-bottom: var(--section-padding);
     border-radius: 1rem;
     transition: var(--standard-transition);
     z-index: 10;