[MS] Update fill-available to fix cross browser compatibility

- Update megashark-lib
Scille · Nov 18, 2024 · 0586410 · 0586410
1 parent ec5feb4
commit 0586410
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 5 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -50,7 +50,7 @@
         "axios": "^1.7.4",
         "file-type": "^19.6.0",
         "luxon": "^3.4.4",
-        "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#a9430d2cd6d0f481ff4fef3c53682553a1391822",
+        "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#f65a38f9255bb7b4e1fafe1be3b833b6a1a8f1d4",
         "qrcode-vue3": "^1.6.8",
         "uuid": "^9.0.1",
         "vue": "^3.3.8",

diff --git a/client/src/theme/global.scss b/client/src/theme/global.scss
@@ -23,7 +23,11 @@ ion-title {
   overflow-y: auto;
   padding: 0 2rem;
   margin-bottom: 3rem;
+  // multiple lines for cross-browser compatibility
+  height: 100%;
   height: -webkit-fill-available;
+  height: -moz-available;
+  height: stretch;
 
   .list,
   .users-container-grid,

diff --git a/client/src/views/client-area/ClientAreaPage.vue b/client/src/views/client-area/ClientAreaPage.vue
@@ -371,14 +371,26 @@ ion-split-pane {
 
 // -------- main content ------------
 .main-content {
+  // multiple lines for cross-browser compatibility
+  width: 100%;
   width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
 .main-page {
+  // multiple lines for cross-browser compatibility
+  height: 100%;
   height: -webkit-fill-available;
+  height: -moz-available;
+  height: stretch;
+  // multiple lines for cross-browser compatibility
+  width: 100%;
   width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
 }
 </style>
diff --git a/client/src/views/client-area/ClientAreaSidebar.vue b/client/src/views/client-area/ClientAreaSidebar.vue
@@ -433,7 +433,11 @@ async function createOrganization(): Promise<void> {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    // multiple lines for cross-browser compatibility
+    height: 100%;
     height: -webkit-fill-available;
+    height: -moz-available;
+    height: stretch;
   }
 }
 

diff --git a/client/src/views/home/SummaryStep.vue b/client/src/views/home/SummaryStep.vue
@@ -152,7 +152,11 @@ defineProps<{
   flex: 1;
   position: relative;
   gap: 1rem;
+  // multiple lines for cross-browser compatibility
+  width: 100%;
   width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
 
   &::after {
     content: '';

diff --git a/client/src/views/organizations/creation/OrganizationSummaryPage.vue b/client/src/views/organizations/creation/OrganizationSummaryPage.vue
@@ -280,9 +280,13 @@ defineEmits<{
   }
 
   &__button {
+    // multiple lines for cross-browser compatibility
+    height: 100%;
+    height: -webkit-fill-available;
+    height: -moz-available;
+    height: stretch;
     color: var(--parsec-color-light-secondary-text);
     align-self: center;
-    height: --webkit-fill-available;
     margin-left: auto;
   }
 }

diff --git a/client/src/views/workspaces/WorkspaceHistoryPage.vue b/client/src/views/workspaces/WorkspaceHistoryPage.vue
@@ -427,7 +427,11 @@ async function onRestoreClicked(): Promise<void> {
 }
 
 .folder-container {
+  // multiple lines for cross-browser compatibility
+  height: 100%;
   height: -webkit-fill-available;
+  height: -moz-available;
+  height: stretch;
   margin: 1.5rem 2.5rem;
   background: var(--parsec-color-light-secondary-white);
   border-radius: var(--parsec-radius-12);