diff --git a/pages/table/sticky-columns.page.tsx b/pages/table/sticky-columns.page.tsx index 7c555245fd..fabda4a541 100644 --- a/pages/table/sticky-columns.page.tsx +++ b/pages/table/sticky-columns.page.tsx @@ -230,7 +230,10 @@ export default () => { {
{
0); - const isFullPageInVisualRefresh = isVisualRefresh && variant === 'full-page'; - // All Classic variants and the "full-page" VR variant of the table with sticky columns should offset the scrollbar - // for it not to overlap interactive elements (such as checkboxes, radio buttons or links in cells) - const shouldOffsetStickyScrollbar = hasStickyColumns && (isVisualRefresh ? isFullPageInVisualRefresh : true); const hasEditableCells = !!columnDefinitions.find(col => col.editConfig); const tableRole = hasEditableCells ? 'grid' : 'table'; @@ -477,7 +473,7 @@ const InternalTable = React.forwardRef( wrapperRef={wrapperRefObject} tableRef={tableRefObject} onScroll={handleScroll} - offsetScrollbar={shouldOffsetStickyScrollbar} + offsetScrollbar={hasStickyColumns} /> diff --git a/src/table/sticky-scrollbar/styles.scss b/src/table/sticky-scrollbar/styles.scss index ad02c5ad2a..1b4713c946 100644 --- a/src/table/sticky-scrollbar/styles.scss +++ b/src/table/sticky-scrollbar/styles.scss @@ -28,7 +28,8 @@ &-offset { // "offset" styles are needed for when sticky columns are enabled. - // We move the scrollbar lower for it not to overlap interactive elements (such as checkboxes or links) + // We move the scrollbar lower, so it doesn't overlap interactive elements (such as checkboxes or links) + z-index: 800; // Higher than sticky columns &:not(.is-visual-refresh) { background-color: awsui.$color-background-container-content; @@ -44,5 +45,5 @@ } .is-visual-refresh { - // Used for decting visual refresh + // Used for detecting Visual Refresh }