diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss index fa701f6..9bd1ddd 100644 --- a/src/pages/ExportPage.scss +++ b/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 { - background: var(--text-tertiary); - border-radius: 3px; - opacity: 0.3; + &::-webkit-scrollbar-track { + background: transparent; } + + &::-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); - - &::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; - } + background: inherit; } .row-select-cell { @@ -2562,18 +2555,7 @@ position: sticky; right: 0; z-index: 10; - background: var(--contacts-row-bg); - - &::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)); - } + background: inherit; .row-action-main { display: inline-flex; diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx index 31c7ab8..cd5183f 100644 --- a/src/pages/ExportPage.tsx +++ b/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(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 => { if (exportCacheScopeReadyRef.current) { return exportCacheScopeRef.current @@ -6492,11 +6497,13 @@ function ExportPage() { ) : (
contact.username} fixedItemHeight={76}