.tanstackTableViewWrapper { display: flex; flex-direction: column; flex: 1; width: 100%; position: relative; min-height: 0; } .tanstackFixedCol { width: 32px; min-width: 32px; max-width: 32px; } .tanstackFillerCol { width: 100%; min-width: 0; } .tanstackActionsCol { width: 0; min-width: 0; max-width: 0; } .tanstackLoadMoreContainer { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 8px 0 12px; flex-shrink: 0; } .tanstackTableVirtuoso { width: 100%; overflow-x: auto; } .tanstackTableFootLoaderCell { text-align: center; padding: 8px 0; } .tanstackTableVirtuosoScroll { flex: 1; width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-slate-300)) transparent; &::-webkit-scrollbar { width: 4px; height: 4px; } &::-webkit-scrollbar-corner { background: transparent; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: var(--tanstack-table-scrollbar-color, var(--bg-slate-300)); border-radius: 9999px; } &::-webkit-scrollbar-thumb:hover { background: var(--tanstack-table-scrollbar-hover-color, var(--bg-slate-200)); } &.cellTypographySmall { --tanstack-plain-cell-font-size: 11px; --tanstack-plain-cell-line-height: 16px; :global(table tr td), :global(table thead th) { font-size: 11px; line-height: 16px; letter-spacing: -0.07px; } } &.cellTypographyMedium { --tanstack-plain-cell-font-size: 13px; --tanstack-plain-cell-line-height: 20px; :global(table tr td), :global(table thead th) { font-size: 13px; line-height: 20px; letter-spacing: -0.07px; } } &.cellTypographyLarge { --tanstack-plain-cell-font-size: 14px; --tanstack-plain-cell-line-height: 24px; :global(table tr td), :global(table thead th) { font-size: 14px; line-height: 24px; letter-spacing: -0.07px; } } } .paginationContainer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; } .paginationPageSize { width: 80px; --combobox-trigger-height: 2rem; } .tanstackLoadingOverlay { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; border-radius: 8px; padding: 8px 16px; background: var(--tanstack-table-loading-overlay-bg, var(--l1-background)); box-shadow: var( --tanstack-table-loading-overlay-shadow, 0 2px 8px rgba(0, 0, 0, 0.15) ); } :global(.lightMode) .tanstackTableVirtuosoScroll { scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300)) transparent; &::-webkit-scrollbar-thumb { background: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300)); } &::-webkit-scrollbar-thumb:hover { background: var( --tanstack-table-scrollbar-hover-color, var(--bg-vanilla-100) ); } }