Merge pull request #949 from oslokommune/responsive-drawer

Improve drawer responsiveness

CHANGELOG.md

@@ -12,6 +12,8 @@ All notable changes to this project will be documented in this file. The format
 ### Changed
 
 - Enhanced the responsiveness of OKR pane views for a better user experience.
+- Enhanced the responsiveness of all drawers. They are now more compact and fill
+  the entire viewport on mobile.
 - Drag and drop ordering of measurements and key results are now triggered by
   using a specific handle (the "drag icon"). This prevents accidental dragging,
   especially on mobile devices.

src/components/drawers/PagedDrawerWrapper.vue

@@ -16,7 +16,7 @@
       >
         {{ $t('general.step', { step: pageIndex, steps: pageCount }) }}
       </span>
-      <h1 class="pkt-txt-30-medium">
+      <h1 class="paged-drawer__title">
         <slot name="title" v-bind="slotProps" />
       </h1>
     </template>
@@ -117,6 +117,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
 .paged-drawer {
   &--done {
     ::v-deep .sliderContainer__footer {
@@ -134,6 +137,14 @@ export default {
     }
   }
 
+  &__title {
+    @include get-text('pkt-txt-22-medium');
+
+    @include bp('phablet-up') {
+      @include get-text('pkt-txt-30-medium');
+    }
+  }
+
   &__step-indicator {
     color: var(--color-grayscale-60);
   }

src/components/drawers/SliderContainer.vue

@@ -84,22 +84,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
+
 .sliderContainer {
   position: fixed;
   top: 0;
   right: 0;
   z-index: 200;
   display: flex;
   flex-direction: column;
-  width: calc(100vw - 4rem);
+  width: 100vw;
   max-width: 37.5rem;
   height: 100vh;
   background-color: var(--color-white);
 
+  @include bp('phablet-up') {
+    width: calc(100vw - 4rem);
+  }
+
   &__closeButtonContainer {
-    margin: 1rem;
+    margin: 0.5rem;
     text-align: right;
 
+    @include bp('phablet-up') {
+      margin: 1rem 1rem 0;
+    }
+
     svg {
       --fg-color: var(--color-primary);
       height: 1.5rem;
@@ -111,9 +121,13 @@ export default {
     flex-direction: column;
     gap: 1.5rem;
     height: 100%;
-    padding: 2.5rem;
+    padding: 1.5rem;
     padding-top: 0;
     overflow-y: auto;
+
+    @include bp('phablet-up') {
+      padding: 2.5rem;
+    }
   }
 
   &__footer {