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

src/components/Elements/MainModal/Main.jsx

@@ -181,20 +181,22 @@ function MainModal({ modalClose, deepLinkData }) {
         canGoBack={canGoBack}
         canGoForward={canGoForward}
       />
-      <Suspense fallback={<ModalLoader />}>
-        <TabComponent
-          key={currentTab}
-          changeTab={handleChangeTab}
-          deepLinkData={deepLinkData}
-          currentTab={currentTab}
-          onSectionChange={handleSectionChange}
-          onProductView={handleProductView}
-          onBreadcrumbsChange={setIframeBreadcrumbs}
-          resetToAll={resetDiscoverToAll}
-          onResetToAll={handleResetDiscoverToAll}
-          navigationTrigger={navigationTrigger}
-        />
-      </Suspense>
+      <div style={{ flex: 1, display: 'flex', overflow: 'hidden', minHeight: 0 }}>
+        <Suspense fallback={<ModalLoader />}>
+          <TabComponent
+            key={currentTab}
+            changeTab={handleChangeTab}
+            deepLinkData={deepLinkData}
+            currentTab={currentTab}
+            onSectionChange={handleSectionChange}
+            onProductView={handleProductView}
+            onBreadcrumbsChange={setIframeBreadcrumbs}
+            resetToAll={resetDiscoverToAll}
+            onResetToAll={handleResetDiscoverToAll}
+            navigationTrigger={navigationTrigger}
+          />
+        </Suspense>
+      </div>
     </div>
   );
 }

src/components/Elements/MainModal/backend/Tabs.jsx

@@ -5,7 +5,13 @@ import ReminderInfo from '../components/ReminderInfo';
 import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';
 import { TAB_TYPES } from '../constants/tabConfig';
 
-const Tabs = ({ children, navbar = false, currentTab: activeTab, onSectionChange, resetToFirst }) => {
+const Tabs = ({
+  children,
+  navbar = false,
+  currentTab: activeTab,
+  onSectionChange,
+  resetToFirst,
+}) => {
   const [currentTab, setCurrentTab] = useState(children[0]?.props.label);
   const [currentName, setCurrentName] = useState(children[0]?.props.name);
   const [showReminder, setShowReminder] = useState(localStorage.getItem('showReminder') === 'true');
@@ -51,7 +57,7 @@ const Tabs = ({ children, navbar = false, currentTab: activeTab, onSectionChange
   const showSidebar = activeTab === TAB_TYPES.SETTINGS || activeTab === TAB_TYPES.DISCOVER;
 
   return (
-    <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
+    <div style={{ display: 'flex', width: '100%', height: '100%', overflow: 'hidden' }}>
       {showSidebar ? (
         <div className="modalSidebar">
           {children.map((tab, index) => (

src/components/Elements/MainModal/scss/index.scss

@@ -31,7 +31,7 @@
   transition-timing-function: ease-in;
   border-radius: map.get($modal, 'border-radius');
   user-select: none;
-  overflow-y: auto;
+  overflow: hidden;
   transform: scale(0);
   transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
 

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 {