fix table ui

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 {