fix table ui

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 {