From c61b51641025fd742c92d5844ecdf5b2356fca8c Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Thu, 16 Apr 2026 18:20:14 -0400
Subject: [PATCH] fix table ui

---
 src/components/browser-data/BookmarksList.vue | 21 ++++++++++++++-----
 .../browser-data/ExtensionsList.vue           | 21 ++++++++++++++-----
 src/components/browser-data/ProfilesList.vue  | 21 ++++++++++++++-----
 3 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/src/components/browser-data/BookmarksList.vue b/src/components/browser-data/BookmarksList.vue
index 436edc9..e383267 100644
--- a/src/components/browser-data/BookmarksList.vue
+++ b/src/components/browser-data/BookmarksList.vue
@@ -13,7 +13,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <section class="content-section">
+  <section class="table-section">
     <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>
@@ -41,13 +41,19 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
+.table-section {
+  padding: 0;
+}
+
 .data-table {
   display: flex;
   flex-direction: column;
+  min-height: 100%;
   border: 1px solid rgba(148, 163, 184, 0.18);
-  border-radius: 18px;
-  background: var(--panel-strong);
-  overflow: hidden;
+  border-radius: 22px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  overflow: clip;
 }
 
 .bookmarks-grid {
@@ -58,9 +64,14 @@ const emit = defineEmits<{
 }
 
 .data-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 {
diff --git a/src/components/browser-data/ExtensionsList.vue b/src/components/browser-data/ExtensionsList.vue
index 689e4f7..5636ba0 100644
--- a/src/components/browser-data/ExtensionsList.vue
+++ b/src/components/browser-data/ExtensionsList.vue
@@ -14,7 +14,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <section class="content-section">
+  <section class="table-section">
     <div v-if="extensions.length" class="data-table">
       <div class="data-table-header extensions-grid">
         <div class="header-cell icon-cell">Icon</div>
@@ -52,13 +52,19 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
+.table-section {
+  padding: 0;
+}
+
 .data-table {
   display: flex;
   flex-direction: column;
+  min-height: 100%;
   border: 1px solid rgba(148, 163, 184, 0.18);
-  border-radius: 18px;
-  background: var(--panel-strong);
-  overflow: hidden;
+  border-radius: 22px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  overflow: clip;
 }
 
 .extensions-grid {
@@ -69,9 +75,14 @@ const emit = defineEmits<{
 }
 
 .data-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 {
diff --git a/src/components/browser-data/ProfilesList.vue b/src/components/browser-data/ProfilesList.vue
index f55c55c..df6b278 100644
--- a/src/components/browser-data/ProfilesList.vue
+++ b/src/components/browser-data/ProfilesList.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <section class="content-section">
+  <section class="table-section">
     <div v-if="openProfileError" class="inline-error">
       {{ openProfileError }}
     </div>
@@ -63,13 +63,19 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
+.table-section {
+  padding: 0;
+}
+
 .data-table {
   display: flex;
   flex-direction: column;
+  min-height: 100%;
   border: 1px solid rgba(148, 163, 184, 0.18);
-  border-radius: 18px;
-  background: var(--panel-strong);
-  overflow: hidden;
+  border-radius: 22px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  overflow: clip;
 }
 
 .profiles-grid {
@@ -80,9 +86,14 @@ const emit = defineEmits<{
 }
 
 .data-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 {