Fix overflow in the pane wrapper header

oslokommune · Nov 17, 2023 · e7b2d38 · e7b2d38
1 parent 0e7bef1
commit e7b2d38
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 64 deletions.
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
@@ -7,11 +7,13 @@
       $router.push({ name: 'ObjectiveHome', params: { objectiveId: activeObjective.id } })
     "
   >
-    <pkt-breadcrumbs
-      class="pkt-hide-laptop-up"
-      navigation-type="router"
-      :breadcrumbs="breadcrumbs"
-    />
+    <template #title>
+      <pkt-breadcrumbs
+        class="pkt-hide-laptop-up"
+        navigation-type="router"
+        :breadcrumbs="breadcrumbs"
+      />
+    </template>
 
     <h1 class="key-result-pane__title pkt-txt-18-medium">
       {{ $t('general.keyResult') }}
@@ -328,12 +330,6 @@ export default {
 .key-result-pane {
   background-color: var(--color-gray);
 
-  &__title {
-    @include bp('laptop-up') {
-      margin-top: 2rem;
-    }
-  }
-
   &__details {
     display: flex;
     flex-direction: column;
@@ -388,11 +384,15 @@ export default {
   border: 0;
 }
 
-::v-deep .pkt-breadcrumbs--mobile {
-  width: 100%;
+::v-deep .pkt-breadcrumbs {
+  display: flex;
+
+  &--mobile {
+    width: 100%;
 
-  .pkt-breadcrumbs__text {
-    white-space: nowrap;
+    .pkt-breadcrumbs__text {
+      white-space: nowrap;
+    }
   }
 }
 </style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
@@ -5,11 +5,13 @@
     closable
     @close="$router.push({ name: 'ItemHome' })"
   >
-    <pkt-breadcrumbs
-      class="pkt-hide-laptop-up"
-      navigation-type="router"
-      :breadcrumbs="breadcrumbs"
-    />
+    <template #title>
+      <pkt-breadcrumbs
+        class="pkt-hide-laptop-up"
+        navigation-type="router"
+        :breadcrumbs="breadcrumbs"
+      />
+    </template>
 
     <h1 class="objective-pane__title pkt-txt-18-medium">
       {{ $t('general.objective') }}
@@ -237,12 +239,6 @@ export default {
 .objective-pane {
   background-color: var(--color-gray-light);
 
-  &__title {
-    @include bp('laptop-up') {
-      margin-top: 2rem;
-    }
-  }
-
   &__key-results {
     margin-top: 3rem;
 
@@ -320,11 +316,15 @@ export default {
   background-color: transparent;
 }
 
-::v-deep .pkt-breadcrumbs--mobile {
-  width: 100%;
+::v-deep .pkt-breadcrumbs {
+  display: flex;
+
+  &--mobile {
+    width: 100%;
 
-  .pkt-breadcrumbs__text {
-    white-space: nowrap;
+    .pkt-breadcrumbs__text {
+      white-space: nowrap;
+    }
   }
 }
 </style>
diff --git a/src/components/panes/PaneWrapper.vue b/src/components/panes/PaneWrapper.vue
@@ -1,23 +1,25 @@
 <template>
   <div class="pane">
-    <div class="pane__actions">
-      <slot name="actions" />
-      <pkt-button
-        v-if="closable"
-        v-tooltip="$t('btn.close')"
-        variant="icon-only"
-        skin="tertiary"
-        size="medium"
-        icon-name="close"
-        @onClick="$emit('close')"
-      />
-    </div>
-
     <div class="pane__inner">
-      <div v-if="title || $slots.title" class="pane__header">
-        <slot name="title">
-          <h1 class="pkt-txt-18-medium">{{ title }}</h1>
-        </slot>
+      <div class="pane__header">
+        <div v-if="title || $slots.title" class="pane__title">
+          <slot name="title">
+            <h1 class="pkt-txt-18-medium">{{ title }}</h1>
+          </slot>
+        </div>
+
+        <div class="pane__actions">
+          <slot name="actions" />
+          <pkt-button
+            v-if="closable"
+            v-tooltip="$t('btn.close')"
+            variant="icon-only"
+            skin="tertiary"
+            size="medium"
+            icon-name="close"
+            @onClick="$emit('close')"
+          />
+        </div>
       </div>
 
       <div class="pane__body">
@@ -52,35 +54,40 @@ export default {
 
 <style lang="scss" scoped>
 .pane {
-  position: relative;
-
-  &__actions {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    display: flex;
-    gap: 0.5rem;
-  }
-
   &__inner {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
     height: 0;
-    padding: 1.5rem 2.5rem;
   }
 
   &__header {
     display: flex;
+    gap: 0.5rem;
     align-items: center;
-    justify-content: space-between;
+    padding: 0.5rem;
+
+    @include bp('laptop-up') {
+      padding-bottom: 0;
+    }
+  }
+
+  &__title {
+    min-width: 0;
+    padding: 1rem 0 1rem 2rem;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: auto;
+    white-space: nowrap;
   }
 
   &__body {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    padding-bottom: 3rem;
+    padding: 0 2.5rem 3rem;
   }
 }
 </style>
diff --git a/src/components/panes/TimelinePane.vue b/src/components/panes/TimelinePane.vue
@@ -62,12 +62,14 @@ export default {
 
   ::v-deep .pane__inner {
     height: 100%;
-    padding: 0;
   }
 
   ::v-deep .pane__header {
-    padding: 1.5rem;
-    padding-bottom: 0;
+    padding: 1rem 1rem 0.625rem 1.5rem;
+  }
+
+  ::v-deep .pane__title {
+    padding: 0;
   }
 
   ::v-deep .pane__body {