fix(export): align session sticky columns

src/pages/ExportPage.scss

@@ -2024,26 +2024,29 @@
     flex: 1;
     min-height: var(--contacts-default-list-height);
     height: var(--contacts-default-list-height);
-    overflow: hidden;
+    position: relative;
+    overflow-x: clip;
+    overflow-y: auto;
+    overscroll-behavior: contain;
     padding: 0 0 12px;
     background: var(--bg-secondary);
-  }
-
-  .contacts-virtuoso {
-    height: 100%;
-    width: 100%;
-    overflow-x: clip !important;
-    overflow-y: auto !important;
 
     &::-webkit-scrollbar {
       width: 6px;
     }
 
-    &::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar-track {
-      background: var(--text-tertiary);
+      background: transparent;
-      border-radius: 3px;
-      opacity: 0.3;
     }
+
+    &::-webkit-scrollbar-thumb {
+      background: color-mix(in srgb, var(--text-tertiary) 72%, transparent);
+      border-radius: 999px;
+    }
+  }
+
+  .contacts-virtuoso {
+    width: 100%;
   }
 
   .table-bottom-scrollbar {
@@ -2156,6 +2159,7 @@
     transition: all 0.2s;
     cursor: default;
     background: var(--contacts-row-bg);
+    isolation: isolate;
 
     &:hover {
       --contacts-row-bg: var(--bg-hover);
@@ -2174,18 +2178,7 @@
     width: var(--contacts-left-sticky-width);
     min-width: var(--contacts-left-sticky-width);
     max-width: var(--contacts-left-sticky-width);
-    background: var(--contacts-row-bg);
+    background: inherit;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: calc(-1 * var(--contacts-column-gap));
-      width: var(--contacts-column-gap);
-      background: var(--contacts-row-bg);
-      pointer-events: none;
-    }
   }
 
   .row-select-cell {
@@ -2562,18 +2555,7 @@
   position: sticky;
   right: 0;
   z-index: 10;
-  background: var(--contacts-row-bg);
+  background: inherit;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -8px;
-    width: 8px;
-    pointer-events: none;
-    background: linear-gradient(to right, transparent, var(--contacts-row-bg));
-  }
 
   .row-action-main {
     display: inline-flex;

src/pages/ExportPage.tsx

@@ -1513,6 +1513,7 @@ function ExportPage() {
   const [nowTick, setNowTick] = useState(Date.now())
   const [isContactsListAtTop, setIsContactsListAtTop] = useState(true)
   const [isContactsHeaderDragging, setIsContactsHeaderDragging] = useState(false)
+  const [contactsListScrollParent, setContactsListScrollParent] = useState<HTMLDivElement | null>(null)
   const [contactsHorizontalScrollMetrics, setContactsHorizontalScrollMetrics] = useState({
     viewportWidth: 0,
     contentWidth: 0
@@ -1600,6 +1601,10 @@ function ExportPage() {
     endIndex: -1
   })
 
+  const handleContactsListScrollParentRef = useCallback((node: HTMLDivElement | null) => {
+    setContactsListScrollParent(prev => (prev === node ? prev : node))
+  }, [])
+
   const ensureExportCacheScope = useCallback(async (): Promise<string> => {
     if (exportCacheScopeReadyRef.current) {
       return exportCacheScopeRef.current
@@ -6492,11 +6497,13 @@ function ExportPage() {
                   ) : (
                     <div
                       className="contacts-list"
+                      ref={handleContactsListScrollParentRef}
                       onWheelCapture={handleContactsListWheelCapture}
                     >
                       <Virtuoso
                         ref={contactsVirtuosoRef}
                         className="contacts-virtuoso"
+                        customScrollParent={contactsListScrollParent ?? undefined}
                         data={filteredContacts}
                         computeItemKey={(_, contact) => contact.username}
                         fixedItemHeight={76}