refactor(MainModal): improve layout and styling for better responsiveness

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -8,10 +8,12 @@
   } */
 
   @include themed {
-    padding: 1rem 3rem 3rem;
+    padding: 1rem 3rem 4rem;
     display: flex;
     flex-direction: column;
     width: 100%;
+    height: 100%;
+    overflow-y: auto;
     background: t($modal-background);
 
     margin: 0 1rem;

src/components/Elements/MainModal/scss/modules/_sidebar.scss

@@ -2,16 +2,16 @@
 
 .modalSidebar {
   @include themed {
-    top: 0;
-    left: 0;
-    position: sticky;
+    position: relative;
     margin: 0;
-    padding: 0 5px;
+    padding: 0.5rem 5px 2rem 5px;
     // background: t($modal-sidebar);
     border-radius: 12px 0 0 12px;
-    overflow: hidden auto;
-    height: 80vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
     min-width: 250px;
+    flex-shrink: 0;
 
     svg {
       margin-left: 20px;

src/components/Elements/MainModal/scss/modules/_topBar.scss

@@ -1,20 +1,18 @@
 @use 'scss/variables' as *;
 
 .modalTopBar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
+  position: relative;
+  flex-shrink: 0;
+  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.5rem 1.5rem;
   // width: 100%;
-  
-  @include themed {
-    background: t($modal);
-  }
-  
-  backdrop-filter: blur(10px);
+
+  background-color: rgba(1, 1, 1, 0.9);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(16px) saturate(180%);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
   .topBarLeft {