Reduce pane padding on smaller screens

oslokommune · Dec 11, 2023 · 246b03b · 246b03b
1 parent 60a55d3
commit 246b03b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,10 @@ All notable changes to this project will be documented in this file. The format
 - "Lifting" objectives are now also allowed during the creation flow, not only
   when edited.
 
+### Changed
+
+- Enhanced the responsiveness of OKR pane views for a better user experience.
+
 ### Fixed
 
 - Fixed disappearing navigation header for mobile users.

diff --git a/src/components/panes/PaneWrapper.vue b/src/components/panes/PaneWrapper.vue
@@ -73,7 +73,15 @@ export default {
 
   &__title {
     min-width: 0;
-    padding: 1rem 0 1rem 2rem;
+    padding: 1rem 0;
+
+    @include bp('phablet-up') {
+      padding-left: 1rem;
+    }
+
+    @include bp('tablet-up') {
+      padding-left: 2rem;
+    }
   }
 
   &__actions {
@@ -87,7 +95,17 @@ export default {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    padding: 0 2.5rem 3rem;
+    padding: 0 1rem 3rem;
+
+    @include bp('phablet-up') {
+      padding-right: 1.5rem;
+      padding-left: 1.5rem;
+    }
+
+    @include bp('tablet-up') {
+      padding-right: 2.5rem;
+      padding-left: 2.5rem;
+    }
   }
 }
 </style>