fix: Fix table header background for resizable columns in classic (#3649)

Author: Al-Dani

src/table/resizer/index.tsx

@@ -7,6 +7,7 @@ import { useStableCallback, useUniqueId } from '@cloudscape-design/component-too
 import { getIsRtl, getLogicalBoundingClientRect, getLogicalPageX } from '@cloudscape-design/component-toolkit/internal';
 
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';
+import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import { KeyCode } from '../../internal/keycode';
 import handleKey, { isEventLike } from '../../internal/utils/handle-key';
 import { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';
@@ -46,6 +47,8 @@ export function Resizer({
   onWidthUpdate = useStableCallback(onWidthUpdate);
   onWidthUpdateCommit = useStableCallback(onWidthUpdateCommit);
 
+  const isVisualRefresh = useVisualRefresh();
+
   const separatorId = useUniqueId();
   const resizerToggleRef = useRef<HTMLButtonElement>(null);
   const resizerSeparatorRef = useRef<HTMLSpanElement>(null);
@@ -195,7 +198,8 @@ export function Resizer({
         ref={resizerToggleRef}
         className={clsx(
           styles.resizer,
-          (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus']
+          (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus'],
+          isVisualRefresh && styles['is-visual-refresh']
         )}
         onMouseDown={event => {
           if (event.button !== 0) {
@@ -231,7 +235,11 @@ export function Resizer({
         data-focus-id={focusId}
       />
       <span
-        className={clsx(styles['divider-interactive'], isDragging && styles['divider-active'])}
+        className={clsx(
+          styles['divider-interactive'],
+          isDragging && styles['divider-active'],
+          isVisualRefresh && styles['is-visual-refresh']
+        )}
         data-awsui-table-suppress-navigation={true}
         ref={resizerSeparatorRef}
         id={separatorId}

src/table/resizer/styles.scss

@@ -41,6 +41,10 @@ th:not(:last-child) > .divider,
   }
 }
 
+th:last-child > .divider-interactive:not(.is-visual-refresh) {
+  inset-inline-end: calc(#{$handle-width} / 2);
+}
+
 .resizer {
   @include styles.styles-reset;
   border-block: none;
@@ -73,6 +77,10 @@ th:not(:last-child) > .divider,
   }
 }
 
+th:last-child > .resizer:not(.is-visual-refresh) {
+  inset-inline-end: 0;
+}
+
 .tracker {
   display: none;
   position: absolute;