feat: Show resizer for last table column (#3635)

Author: Al-Dani

src/table/header-cell/index.tsx

@@ -128,6 +128,7 @@ export function TableHeaderCell<ItemType>({
       focusedComponent={focusedComponent}
       stuck={stuck}
       sticky={sticky}
+      resizable={resizableColumns}
       hidden={hidden}
       stripedRows={stripedRows}
       colIndex={colIndex}

src/table/header-cell/styles.scss

@@ -224,7 +224,7 @@ settings icon in the pagination slot.
     @include cell-offset(awsui.$space-xxs);
   }
 
-  &:last-child.header-cell-sortable {
+  &:last-child.header-cell-sortable:not(.header-cell-resizable) {
     padding-inline-end: awsui.$space-xxxs;
   }
 

src/table/header-cell/th-element.tsx

@@ -25,6 +25,7 @@ export interface TableThElementProps {
   focusedComponent?: null | string;
   stuck?: boolean;
   sticky?: boolean;
+  resizable?: boolean;
   hidden?: boolean;
   stripedRows?: boolean;
   isSelection?: boolean;
@@ -46,6 +47,7 @@ export function TableThElement({
   focusedComponent,
   stuck,
   sticky,
+  resizable,
   hidden,
   stripedRows,
   isSelection,
@@ -79,6 +81,7 @@ export function TableThElement({
         styles['header-cell'],
         styles[`header-cell-variant-${variant}`],
         sticky && styles['header-cell-sticky'],
+        resizable && styles['header-cell-resizable'],
         stuck && styles['header-cell-stuck'],
         stripedRows && styles['has-striped-rows'],
         isVisualRefresh && styles['is-visual-refresh'],

src/table/resizer/index.tsx

@@ -231,7 +231,7 @@ export function Resizer({
         data-focus-id={focusId}
       />
       <span
-        className={clsx(styles.divider, isDragging && styles['divider-active'])}
+        className={clsx(styles['divider-interactive'], isDragging && styles['divider-active'])}
         data-awsui-table-suppress-navigation={true}
         ref={resizerSeparatorRef}
         id={separatorId}

src/table/resizer/styles.scss

@@ -16,7 +16,8 @@
 $handle-width: awsui.$space-xl;
 $active-separator-width: 2px;
 
-th:not(:last-child) > .divider {
+th:not(:last-child) > .divider,
+.divider-interactive {
   $gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
 
   position: absolute;
@@ -59,10 +60,6 @@ th:not(:last-child) > .divider {
   .resize-active & {
     pointer-events: none;
   }
-  th:last-child > & {
-    inline-size: calc(#{$handle-width} / 2);
-    inset-inline-end: 0;
-  }
   &:hover + .divider {
     border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
   }