fix scrollbar

src/components/browser-data/AssociatedProfilesModal.vue

@@ -42,7 +42,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
         </button>
       </div>
 
-      <div class="modal-table styled-scrollbar">
+      <div class="modal-table">
         <div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }">
           <div class="header-cell icon-cell">Avatar</div>
           <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button>
@@ -50,7 +50,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
           <div v-if="isBookmark" class="header-cell">Bookmark Path</div>
           <div class="header-cell actions-cell">Action</div>
         </div>
-
+        <div class="modal-table-body styled-scrollbar">
           <article
             v-for="profile in sortedProfiles"
             :key="profile.id"
@@ -90,6 +90,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
             </div>
           </article>
         </div>
+      </div>
     </section>
   </div>
 </template>
@@ -137,10 +138,10 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
   display: flex;
   flex-direction: column;
   min-height: 0;
-  overflow: auto;
   border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 18px;
   background: var(--panel-strong);
+  overflow: hidden;
 }
 
 .modal-grid {
@@ -155,9 +156,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
 }
 
 .modal-table-header {
-  position: sticky;
-  top: 0;
-  z-index: 2;
   padding: 10px 14px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.14);
   background: rgba(248, 250, 252, 0.94);
@@ -165,6 +163,11 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
   -webkit-backdrop-filter: blur(12px);
 }
 
+.modal-table-body {
+  min-height: 0;
+  overflow: auto;
+}
+
 .header-cell {
   color: var(--muted);
   font-size: 0.81rem;

src/components/browser-data/BookmarksList.vue

@@ -14,13 +14,13 @@ const emit = defineEmits<{
 
 <template>
   <section class="table-section">
-    <div v-if="bookmarks.length" class="data-table styled-scrollbar">
+    <div v-if="bookmarks.length" class="data-table">
       <div class="data-table-header bookmarks-grid">
         <button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button>
         <button class="header-cell sortable" :class="{ active: sortKey === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button>
         <div class="header-cell actions-cell">Profiles</div>
       </div>
-
+      <div class="data-table-body styled-scrollbar">
         <article v-for="bookmark in bookmarks" :key="bookmark.url" class="data-table-row bookmarks-grid">
           <div class="row-cell primary-cell">
             <strong>{{ bookmark.title }}</strong>
@@ -34,6 +34,7 @@ const emit = defineEmits<{
           </div>
         </article>
       </div>
+    </div>
     <div v-else class="empty-card">
       <p>No bookmarks were discovered for this browser.</p>
     </div>
@@ -56,6 +57,11 @@ const emit = defineEmits<{
   border-radius: 22px;
   background: var(--panel);
   box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.data-table-body {
+  min-height: 0;
   overflow: auto;
 }
 

src/components/browser-data/ExtensionsList.vue

@@ -15,7 +15,7 @@ const emit = defineEmits<{
 
 <template>
   <section class="table-section">
-    <div v-if="extensions.length" class="data-table styled-scrollbar">
+    <div v-if="extensions.length" class="data-table">
       <div class="data-table-header extensions-grid">
         <div class="header-cell icon-cell">Icon</div>
         <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -23,7 +23,7 @@ const emit = defineEmits<{
         <div class="header-cell">Version</div>
         <div class="header-cell actions-cell">Profiles</div>
       </div>
-
+      <div class="data-table-body styled-scrollbar">
         <article v-for="extension in extensions" :key="extension.id" class="data-table-row extensions-grid">
           <div class="extension-icon table-icon" :class="{ filled: Boolean(extension.iconDataUrl) }">
             <img v-if="extension.iconDataUrl" :src="extension.iconDataUrl" :alt="`${extension.name} icon`" />
@@ -45,6 +45,7 @@ const emit = defineEmits<{
           </div>
         </article>
       </div>
+    </div>
     <div v-else class="empty-card">
       <p>No extensions were discovered for this browser.</p>
     </div>
@@ -67,6 +68,11 @@ const emit = defineEmits<{
   border-radius: 22px;
   background: var(--panel);
   box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.data-table-body {
+  min-height: 0;
   overflow: auto;
 }
 

src/components/browser-data/ProfilesList.vue

@@ -23,7 +23,7 @@ const emit = defineEmits<{
       {{ openProfileError }}
     </div>
 
-    <div v-if="profiles.length" class="data-table styled-scrollbar">
+    <div v-if="profiles.length" class="data-table">
       <div class="data-table-header profiles-grid">
         <div class="header-cell icon-cell">Avatar</div>
         <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -31,7 +31,7 @@ const emit = defineEmits<{
         <button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="emit('update:sortKey', 'id')">Profile ID</button>
         <div class="header-cell actions-cell">Action</div>
       </div>
-
+      <div class="data-table-body styled-scrollbar">
         <article v-for="profile in profiles" :key="profile.id" class="data-table-row profiles-grid">
           <div class="profile-avatar table-avatar">
             <img
@@ -62,6 +62,7 @@ const emit = defineEmits<{
           </div>
         </article>
       </div>
+    </div>
     <div v-else class="empty-card">
       <p>No profile directories were found for this browser.</p>
     </div>
@@ -84,6 +85,11 @@ const emit = defineEmits<{
   border-radius: 22px;
   background: var(--panel);
   box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.data-table-body {
+  min-height: 0;
   overflow: auto;
 }