feat: reduce left sidebar width on smaller screens

prose-im · Nov 27, 2024 · c4f689a · c4f689a
1 parent 6fb26a7
commit c4f689a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -18,7 +18,7 @@
         "title": "Prose",
         "width": 1360,
         "height": 940,
-        "minWidth": 1060,
+        "minWidth": 1080,
         "minHeight": 680,
         "resizable": true,
         "maximizable": true,

diff --git a/src/assets/stylesheets/variables/_variables.sizes.scss b/src/assets/stylesheets/variables/_variables.sizes.scss
@@ -14,7 +14,8 @@ $size-common-gradient-height: 6px;
 
 // --> SIDEBAR <--
 
-$size-sidebar-width: 300px;
+$size-sidebar-default-width: 300px;
+$size-sidebar-reduced-width: 240px;
 $size-sidebar-popover-inset-inline-side: -3px;
 
 // --> INBOX <--
@@ -119,3 +120,7 @@ $size-form-select-ultra-large-line-height: $size-form-field-ultra-large-input-li
 
 $size-form-checkbox-small-size: 18px;
 $size-form-checkbox-medium-size: 24px;
+
+// --> SCREEN <--
+
+$size-screen-reduced-width-breakpoint: 1160px;
diff --git a/src/components/base/BaseAlert.vue b/src/components/base/BaseAlert.vue
@@ -428,11 +428,23 @@ $alert-padding-sides: 12px;
   }
 
   &--with-sidebar {
-    padding-inline-start: ($alert-padding-sides + $size-sidebar-width);
+    padding-inline-start: ($alert-padding-sides + $size-sidebar-default-width);
   }
 
   &--with-inbox-details {
     padding-inline-end: ($alert-padding-sides + $size-inbox-details-width);
   }
 }
+
+// --> MEDIA-QUERIES <--
+
+@media (max-width: $size-screen-reduced-width-breakpoint) {
+  #{$c} {
+    &--with-sidebar {
+      padding-inline-start: (
+        $alert-padding-sides + $size-sidebar-reduced-width
+      );
+    }
+  }
+}
 </style>
diff --git a/src/views/app/AppBase.vue b/src/views/app/AppBase.vue
@@ -48,7 +48,7 @@ $c: ".v-app-base";
 
   #{$c}__sidebar {
     border-inline-end: 1px solid rgb(var(--color-border-secondary));
-    width: $size-sidebar-width;
+    width: $size-sidebar-default-width;
     flex: 0 0 auto;
   }
 
@@ -57,4 +57,14 @@ $c: ".v-app-base";
     flex: 1;
   }
 }
+
+// --> MEDIA-QUERIES <--
+
+@media (max-width: $size-screen-reduced-width-breakpoint) {
+  #{$c} {
+    #{$c}__sidebar {
+      width: $size-sidebar-reduced-width;
+    }
+  }
+}
 </style>