diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 2e59b320..6fb516f6 100644 --- 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 index 9a2dc710..71c505cd 100644 --- 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 index c18aabd6..bc7efdad 100644 --- 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 + ); + } + } +} diff --git a/src/views/app/AppBase.vue b/src/views/app/AppBase.vue index 60a100fd..03df0de6 100644 --- 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; + } + } +}