Fix some size related issues

ltouroumov · Sep 27, 2024 · 88726e9 · 88726e9
1 parent 42fddfb
commit 88726e9
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/components/utils/ModalDialog.vue b/components/utils/ModalDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="fade modal" :class="{ show: show }">
-    <div class="modal-dialog modal-xl">
+    <div class="modal-dialog" :class="size ?? 'modal-lg'">
       <div v-if="show" class="modal-content">
         <div class="modal-header">
           <slot name="header" />
@@ -31,6 +31,7 @@ defineEmits<{
 
 defineProps<{
   show: boolean;
+  size?: string;
 }>();
 </script>
 
@@ -58,6 +59,10 @@ div.modal {
     overflow: auto;
     flex-direction: column;
   }
+
+  .modal-80 {
+    --bs-modal-width: 80%;
+  }
 }
 
 // @import '~/assets/css/bootstrap/_config.scss';

diff --git a/components/viewer/ProjectView.vue b/components/viewer/ProjectView.vue
@@ -25,13 +25,18 @@ defineProps<{
 <style lang="scss">
 .project {
   font-family: sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   .rows {
     // Prevents collapsing margins
     display: flex;
     flex-direction: column;
     align-items: stretch;
 
+    max-width: 1200px;
+
     .project-row-wrapper {
       flex: 1 1 100%;
     }

diff --git a/components/viewer/modal/BackpackModal.vue b/components/viewer/modal/BackpackModal.vue
@@ -1,5 +1,9 @@
 <template>
-  <ModalDialog :show="isBackpackVisible" @close="toggleBackpack(false)">
+  <ModalDialog
+    :show="isBackpackVisible"
+    size="modal-80"
+    @close="toggleBackpack(false)"
+  >
     <template #header>
       <h5 class="m-0">Choices</h5>
     </template>

diff --git a/components/viewer/modal/SearchModal.vue b/components/viewer/modal/SearchModal.vue
@@ -1,5 +1,9 @@
 <template>
-  <ModalDialog :show="isSearchVisible" @close="toggleSearch(false)">
+  <ModalDialog
+    :show="isSearchVisible"
+    size="modal-80"
+    @close="toggleSearch(false)"
+  >
     <template #header>
       <h5 class="m-0">Search</h5>
     </template>
@@ -51,6 +55,7 @@
 import { debounce } from 'perfect-debounce';
 import { all, any, includes, isEmpty } from 'ramda';
 
+import ModalDialog from '~/components/utils/ModalDialog.vue';
 import type { Project, ProjectObj, ProjectRow } from '~/composables/project';
 import { useProjectRefs } from '~/composables/store/project';
 import { useViewerRefs, useViewerStore } from '~/composables/store/viewer';
@@ -169,6 +174,10 @@ const preview = (obj: ProjectObj, row: ProjectRow) => {
 <style scoped lang="scss">
 @import '~/assets/css/bootstrap/config';
 
+.modal-80 {
+  width: 80%;
+}
+
 .search-modal {
   flex: 1 1 auto;
   display: grid;
@@ -184,7 +193,7 @@ const preview = (obj: ProjectObj, row: ProjectRow) => {
   &.show-view {
     grid-template:
       'header header' auto
-      'list view' auto
+      'list view' 1fr
       / 2fr 1fr;
   }