diff --git a/src/main/scss/base/_typography.scss b/src/main/scss/base/_typography.scss index 0dceec4624a6..2f26ddb7fb0c 100644 --- 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 index ebd634cb9ce6..beeb436547db 100644 --- 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;