Try another way to prevent background scrolling to top when a modal is open

swift_browser_ui_frontend/src/common/globalFunctions.js

@@ -6,7 +6,6 @@ export function toggleCreateFolderModal(folderName) {
   if (folderName) {
     store.commit("setFolderName", folderName);
   }
-  modifyBrowserPageStyles();
 }
 
 export function toggleEditTagsModal(objectName, containerName) {
@@ -17,7 +16,6 @@ export function toggleEditTagsModal(objectName, containerName) {
   if (containerName) {
     store.commit("setFolderName", containerName);
   }
-  modifyBrowserPageStyles();
 }
 
 export function toggleCopyFolderModal(folderName, sourceProjectId) {
@@ -28,7 +26,6 @@ export function toggleCopyFolderModal(folderName, sourceProjectId) {
   if(sourceProjectId) {
     store.commit("setSourceProjectId", sourceProjectId);
   }
-  modifyBrowserPageStyles();
 }
 
 export function toggleDeleteModal(objects, containerName) {
@@ -39,12 +36,6 @@ export function toggleDeleteModal(objects, containerName) {
   if (containerName) {
     store.commit("setFolderName", containerName);
   }
-  modifyBrowserPageStyles();
-}
-
-export function modifyBrowserPageStyles() {
-  const element = document.getElementById("mainContainer");
-  element.classList.toggle("mainContainer-additionalStyles");
 }
 
 export function getProjectNumber(project) {

swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue

@@ -104,7 +104,6 @@
 <script>
 import {
   toggleCreateFolderModal,
-  modifyBrowserPageStyles,
 } from "@/common/globalFunctions";
 import { mdiInformationOutline } from "@mdi/js";
 
@@ -150,7 +149,6 @@ export default {
     },
     toggleUploadModal: function () {
       this.$store.commit("toggleUploadModal", true);
-      modifyBrowserPageStyles();
     },
     copyProjectId: function () {
       const toastMessage = {

swift_browser_ui_frontend/src/components/ContainerTable.vue

@@ -30,7 +30,6 @@ import {
   getSharedContainers,
   getAccessDetails,
   toggleCopyFolderModal,
-  modifyBrowserPageStyles,
   toggleDeleteModal,
 } from "@/common/globalFunctions";
 
@@ -257,14 +256,12 @@ export default {
                       this.$store.commit("toggleShareModal", true);
                       this.$store.commit(
                         "setFolderName", item.data.name.value);
-                      modifyBrowserPageStyles();
                     },
                     onKeyUp: (event) => {
                       if(event.keyCode === 13) {
                         this.$store.commit("toggleShareModal", true);
                         this.$store.commit(
                           "setFolderName", item.data.name.value);
-                        modifyBrowserPageStyles();
                       }
                     },
                     disabled: item.owner,

swift_browser_ui_frontend/src/components/CopyFolderModal.vue

@@ -25,7 +25,7 @@
         <label
           class="taginput-label"
           label-for="copy-folder-taginput"
-        >  
+        >
           {{ $t('message.tagName') }}
         </label>
         <TagInput
@@ -67,7 +67,6 @@ import {
 import {
   addNewTag,
   deleteTag,
-  modifyBrowserPageStyles,
 } from "@/common/globalFunctions";
 import escapeRegExp from "lodash/escapeRegExp";
 import { useObservable } from "@vueuse/rxjs";
@@ -190,7 +189,6 @@ export default {
       this.$store.commit("setFolderName", "");
       this.folderName = "";
       this.tags = [];
-      modifyBrowserPageStyles();
     },
     replicateContainer: function () {
       // Initiate the container replication operation

swift_browser_ui_frontend/src/components/CreateFolderModal.vue

@@ -82,7 +82,6 @@ import {
 import {
   addNewTag,
   deleteTag,
-  modifyBrowserPageStyles,
   getProjectNumber,
 } from "@/common/globalFunctions";
 import TagInput from "@/components/TagInput.vue";
@@ -141,7 +140,6 @@ export default {
       this.folderName = "";
       this.tags = [];
       this.create = true;
-      modifyBrowserPageStyles();
     },
     addingTag: function (e, onBlur) {
       this.tags = addNewTag(e, this.tags, onBlur);

swift_browser_ui_frontend/src/components/DeleteModal.vue

@@ -8,14 +8,14 @@
       {{ message }}
 
       <c-card-actions justify="end">
-        <c-button 
+        <c-button
           outlined
           @click="toggleDeleteModal"
           @keyup.enter="toggleDeleteModal"
         >
           {{ $t("message.cancel") }}
         </c-button>
-        <c-button 
+        <c-button
           @click="isObject ? deleteObjects() : deleteContainer()"
           @keyup.enter="isObject ? deleteObjects() : deleteContainer()"
         >
@@ -27,13 +27,10 @@
 </template>
 
 <script>
-import { 
+import {
   swiftDeleteObjects,
   swiftDeleteContainer,
 } from "@/common/api";
-import {
-  modifyBrowserPageStyles,
-} from "@/common/globalFunctions";
 
 export default {
   name: "DeleteModal",
@@ -44,17 +41,17 @@ export default {
   },
   computed: {
     title() {
-      return this.isObject 
+      return this.isObject
         ? this.$t("message.objects.deleteObjects")
         : this.$t("message.container_ops.deleteConfirm");
     },
     message() {
-      return this.isObject 
+      return this.isObject
         ? this.$t("message.objects.deleteObjectsMessage")
         : this.$t("message.container_ops.deleteConfirmMessage");
     },
     confirmText() {
-      return this.isObject 
+      return this.isObject
         ? this.$t("message.objects.deleteConfirm")
         : this.$t("message.container_ops.deleteConfirm");
     },
@@ -83,7 +80,6 @@ export default {
       this.$store.commit("toggleDeleteModal", false);
       this.$store.commit("setDeletableObjects", []);
       this.$store.commit("setFolderName", "");
-      modifyBrowserPageStyles();
     },
     deleteContainer: function() {
       document.querySelector("#container-toasts").addToast(

swift_browser_ui_frontend/src/components/EditTagsModal.vue

@@ -44,7 +44,6 @@ import {
 import {
   addNewTag,
   deleteTag,
-  modifyBrowserPageStyles,
 } from "@/common/globalFunctions";
 import TagInput from "@/components/TagInput.vue";
 import { mdiClose } from "@mdi/js";
@@ -135,7 +134,6 @@ export default {
       this.$store.commit("toggleEditTagsModal", false);
       this.$store.commit("setObjectName", "");
       this.$store.commit("setFolderName", "");
-      modifyBrowserPageStyles();
     },
     saveObjectTags: function () {
       let objectMeta = [

swift_browser_ui_frontend/src/components/ShareModal.vue

@@ -139,7 +139,6 @@ import {
 import {
   addNewTag,
   deleteTag,
-  modifyBrowserPageStyles,
 } from "@/common/globalFunctions";
 
 import ShareModalTable from "@/components/ShareModalTable";
@@ -314,7 +313,6 @@ export default {
       this.tags = [];
       this.isShared = false;
       this.isPermissionRemoved = false;
-      modifyBrowserPageStyles();
     },
     closeSharedNotificationWithTimeout() {
       document.getElementById("share-card-modal-content").scrollTo(0, 0);

swift_browser_ui_frontend/src/components/UploadModal.vue

@@ -169,7 +169,6 @@ import {
 } from "@/common/conv";
 
 import {
-  modifyBrowserPageStyles,
   getProjectNumber,
 } from "@/common/globalFunctions";
 
@@ -540,7 +539,6 @@ export default {
       this.ephemeral = true;
       this.files = [];
       this.clearFiles();
-      modifyBrowserPageStyles();
     },
     beginEncryptedUpload() {
       if (this.pubkey.length > 0) {

swift_browser_ui_frontend/src/pages/BrowserPage.vue

@@ -91,6 +91,10 @@ html, body {
   height: 100%;
 }
 
+body {
+  overflow-y: auto;
+}
+
 #mainContainer {
   min-height: 100vh;
   display: flex;
@@ -106,11 +110,6 @@ html, body {
   z-index: 1;
 }
 
-.mainContainer-additionalStyles {
-  position: fixed;
-  width: 100%;
-}
-
 c-modal {
   position: relative;
   margin: 0 auto;