fix table ui

src/components/browser-data/AssociatedProfilesModal.vue

@@ -42,7 +42,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
         </button>
       </div>
 
-      <div class="modal-table">
+      <div class="modal-table styled-scrollbar">
         <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>
@@ -51,46 +51,44 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
           <div class="header-cell actions-cell">Action</div>
         </div>
 
-        <div class="modal-list">
+        <article
-          <article
+          v-for="profile in sortedProfiles"
-            v-for="profile in sortedProfiles"
+          :key="profile.id"
-            :key="profile.id"
+          class="modal-table-row modal-grid"
-            class="modal-table-row modal-grid"
+          :class="{ bookmark: isBookmark }"
-            :class="{ bookmark: isBookmark }"
+        >
+          <div class="modal-profile-avatar">
+            <img
+              v-if="profileAvatarSrc(profile, browserFamilyId)"
+              :src="profileAvatarSrc(profile, browserFamilyId) ?? undefined"
+              :alt="`${profile.name} avatar`"
+            />
+            <span v-else>{{ profile.avatarLabel }}</span>
+          </div>
+          <div class="row-cell primary-cell">
+            <strong>{{ profile.name }}</strong>
+          </div>
+          <div class="row-cell">
+            <span class="badge neutral">{{ profile.id }}</span>
+          </div>
+          <div
+            v-if="isBookmark && hasBookmarkPath(profile)"
+            class="row-cell muted-cell"
+            :title="profile.bookmarkPath"
           >
-            <div class="modal-profile-avatar">
+            {{ profile.bookmarkPath }}
-              <img
+          </div>
-                v-if="profileAvatarSrc(profile, browserFamilyId)"
+          <div class="row-cell actions-cell">
-                :src="profileAvatarSrc(profile, browserFamilyId) ?? undefined"
+            <button
-                :alt="`${profile.name} avatar`"
+              class="card-action-button"
-              />
+              type="button"
-              <span v-else>{{ profile.avatarLabel }}</span>
+              :disabled="isOpeningProfile(browserId, profile.id)"
-            </div>
+              @click="emit('openProfile', browserId, profile.id)"
-            <div class="row-cell primary-cell">
-              <strong>{{ profile.name }}</strong>
-            </div>
-            <div class="row-cell">
-              <span class="badge neutral">{{ profile.id }}</span>
-            </div>
-            <div
-              v-if="isBookmark && hasBookmarkPath(profile)"
-              class="row-cell muted-cell"
-              :title="profile.bookmarkPath"
             >
-              {{ profile.bookmarkPath }}
+              {{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
-            </div>
+            </button>
-            <div class="row-cell actions-cell">
+          </div>
-              <button
+        </article>
-                class="card-action-button"
-                type="button"
-                :disabled="isOpeningProfile(browserId, profile.id)"
-                @click="emit('openProfile', browserId, profile.id)"
-              >
-                {{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
-              </button>
-            </div>
-          </article>
-        </div>
       </div>
     </section>
   </div>
@@ -139,10 +137,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 {
@@ -157,9 +155,14 @@ 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.82);
+  background: rgba(248, 250, 252, 0.94);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
 .header-cell {
@@ -180,13 +183,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
   color: var(--text);
 }
 
-.modal-list {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: auto;
-}
-
 .modal-table-row {
   padding: 12px 14px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.12);

src/components/browser-data/BookmarksList.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
 
 <template>
   <section class="table-section">
-    <div v-if="bookmarks.length" class="data-table">
+    <div v-if="bookmarks.length" class="data-table styled-scrollbar">
       <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>
@@ -43,17 +43,20 @@ const emit = defineEmits<{
 <style scoped>
 .table-section {
   padding: 0;
+  height: 100%;
+  min-height: 0;
 }
 
 .data-table {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
+  height: 100%;
+  min-height: 0;
   border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 22px;
   background: var(--panel);
   box-shadow: var(--shadow);
-  overflow: clip;
+  overflow: auto;
 }
 
 .bookmarks-grid {

src/components/browser-data/BrowserDataView.vue

@@ -163,4 +163,13 @@ const emit = defineEmits<{
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.92));
   box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
 }
+
+.content-scroll-area {
+  display: flex;
+}
+
+.content-scroll-area > * {
+  flex: 1;
+  min-height: 0;
+}
 </style>

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">
+    <div v-if="extensions.length" class="data-table styled-scrollbar">
       <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>
@@ -54,17 +54,20 @@ const emit = defineEmits<{
 <style scoped>
 .table-section {
   padding: 0;
+  height: 100%;
+  min-height: 0;
 }
 
 .data-table {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
+  height: 100%;
+  min-height: 0;
   border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 22px;
   background: var(--panel);
   box-shadow: var(--shadow);
-  overflow: clip;
+  overflow: auto;
 }
 
 .extensions-grid {

src/components/browser-data/ProfilesList.vue

@@ -23,7 +23,7 @@ const emit = defineEmits<{
       {{ openProfileError }}
     </div>
 
-    <div v-if="profiles.length" class="data-table">
+    <div v-if="profiles.length" class="data-table styled-scrollbar">
       <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>
@@ -71,17 +71,20 @@ const emit = defineEmits<{
 <style scoped>
 .table-section {
   padding: 0;
+  height: 100%;
+  min-height: 0;
 }
 
 .data-table {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
+  height: 100%;
+  min-height: 0;
   border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 22px;
   background: var(--panel);
   box-shadow: var(--shadow);
-  overflow: clip;
+  overflow: auto;
 }
 
 .profiles-grid {

src/styles/app.css

@@ -86,8 +86,8 @@
 
 .content-scroll-area {
   min-height: 0;
-  overflow: auto;
+  overflow: hidden;
-  padding-right: 2px;
+  padding-right: 0;
 }
 
 .count-pill,
@@ -175,23 +175,24 @@
 }
 
 .browser-nav,
-.content-scroll-area {
+.styled-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
 }
-.content-scroll-area::-webkit-scrollbar {
+.styled-scrollbar::-webkit-scrollbar {
   width: 10px;
+  height: 10px;
 }
-.content-scroll-area::-webkit-scrollbar-track {
+.styled-scrollbar::-webkit-scrollbar-track {
   background: transparent;
 }
-.content-scroll-area::-webkit-scrollbar-thumb {
+.styled-scrollbar::-webkit-scrollbar-thumb {
   border: 3px solid transparent;
   border-radius: 999px;
   background: linear-gradient(180deg, rgba(148, 163, 184, 0.72), rgba(100, 116, 139, 0.58));
   background-clip: padding-box;
 }
-.content-scroll-area::-webkit-scrollbar-thumb:hover {
+.styled-scrollbar::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(180deg, rgba(100, 116, 139, 0.82), rgba(71, 85, 105, 0.72));
   background-clip: padding-box;
 }