diff --git a/website/client/src/components/ui/drawer.vue b/website/client/src/components/ui/drawer.vue index 8c65d6e58a..7143e562a2 100644 --- a/website/client/src/components/ui/drawer.vue +++ b/website/client/src/components/ui/drawer.vue @@ -61,6 +61,18 @@ left: calc((100% + 236px - 978px) / 2); right: 0%; } + + @media screen and (max-width: 575px) { + max-width: none; + left: 3%; + right: 3%; + } + + .message { + @media screen and (max-width: 450px) { + width: 100%; + } + } } .drawer-toggle-icon { @@ -136,7 +148,7 @@ color: $white !important; text-decoration: none !important; border-bottom: 2px solid transparent; - padding: 0.5rem; + padding: 8px; &-active, &:hover { color: $white !important; @@ -157,17 +169,19 @@ } .drawer-slider { - padding: 12px 0 0 8px; + padding: 0; white-space: nowrap; position: relative; + width: 100%; & .message { display: flex; align-items: center; justify-content: center; + margin: auto; top: calc(50% - 30px); - left: 24px; + left: 0; right: 0; position: absolute; diff --git a/website/client/src/components/ui/drawerHeaderTabs.vue b/website/client/src/components/ui/drawerHeaderTabs.vue index 12d7889045..e2fb4480d4 100644 --- a/website/client/src/components/ui/drawerHeaderTabs.vue +++ b/website/client/src/components/ui/drawerHeaderTabs.vue @@ -51,7 +51,7 @@ .header-tabs { display: grid; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: max-content; } // MS Edge diff --git a/website/client/src/components/ui/drawerSlider.vue b/website/client/src/components/ui/drawerSlider.vue index b31ac9f94c..f693aaf36b 100644 --- a/website/client/src/components/ui/drawerSlider.vue +++ b/website/client/src/components/ui/drawerSlider.vue @@ -34,12 +34,6 @@