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
}