From 4c9b8a8a8b7c1e717ba2109d079fff7f1a2599d7 Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Tue, 26 Nov 2024 13:23:41 +0100
Subject: [PATCH 1/4] move cell wrap style to cell content

---
 src/table/body-cell/styles.scss    | 11 ++++++-----
 src/table/body-cell/td-element.tsx |  3 +--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index 6fe993a0a1..c1f5b19728 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -131,11 +131,12 @@ $cell-negative-space-vertical: 2px;
 
   &-content {
     box-sizing: border-box;
-  }
-  &:not(.body-cell-wrap) > .body-cell-content {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+
+    &:not(.body-cell-wrap) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
   &:first-child {
     border-inline-start: $border-placeholder;
diff --git a/src/table/body-cell/td-element.tsx b/src/table/body-cell/td-element.tsx
index 22a9def552..8e1b9238e6 100644
--- a/src/table/body-cell/td-element.tsx
+++ b/src/table/body-cell/td-element.tsx
@@ -118,7 +118,6 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
         style={{ ...style, ...stickyStyles.style }}
         className={clsx(
           styles['body-cell'],
-          wrapLines && styles['body-cell-wrap'],
           isFirstRow && styles['body-cell-first-row'],
           isLastRow && styles['body-cell-last-row'],
           isSelected && styles['body-cell-selected'],
@@ -159,7 +158,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           </div>
         )}
 
-        <div className={styles['body-cell-content']}>{children}</div>
+        <div className={clsx(styles['body-cell-content'], wrapLines && styles['body-cell-wrap'])}>{children}</div>
       </Element>
     );
   }

From e04b43909f990f1a0156ea57b6848861cc24b47e Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Tue, 26 Nov 2024 13:36:55 +0100
Subject: [PATCH 2/4] replaces cell style with resizable-style

---
 src/table/body-cell/td-element.tsx   |  9 ++++++---
 src/table/column-widths-utils.ts     |  8 +++++++-
 src/table/header-cell/index.tsx      |  7 ++++---
 src/table/header-cell/th-element.tsx |  7 ++++---
 src/table/internal.tsx               | 14 +++++---------
 src/table/thead.tsx                  |  2 +-
 src/table/use-column-widths.tsx      | 11 ++++-------
 7 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/table/body-cell/td-element.tsx b/src/table/body-cell/td-element.tsx
index 8e1b9238e6..18f3d7da52 100644
--- a/src/table/body-cell/td-element.tsx
+++ b/src/table/body-cell/td-element.tsx
@@ -8,6 +8,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
+import { ColumnWidthStyle } from '../column-widths-utils';
 import { ExpandToggleButton } from '../expandable-rows/expand-toggle-button';
 import { TableProps } from '../interfaces.js';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
@@ -18,7 +19,6 @@ import tableStyles from '../styles.css.js';
 import styles from './styles.css.js';
 
 export interface TableTdElementProps {
-  style?: React.CSSProperties;
   wrapLines: boolean | undefined;
   isRowHeader?: boolean;
   isFirstRow: boolean;
@@ -51,6 +51,7 @@ export interface TableTdElementProps {
   collapseButtonLabel?: string;
   verticalAlign?: TableProps.VerticalAlign;
   resizableColumns?: boolean;
+  resizableStyle?: ColumnWidthStyle;
   isEditable: boolean;
   isEditing: boolean;
   isEditingDisabled?: boolean;
@@ -60,7 +61,6 @@ export interface TableTdElementProps {
 export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(
   (
     {
-      style,
       children,
       wrapLines,
       isRowHeader,
@@ -90,6 +90,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
       collapseButtonLabel,
       verticalAlign,
       resizableColumns,
+      resizableStyle,
       isEditable,
       isEditing,
       isEditingDisabled,
@@ -101,6 +102,8 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
     const Element = isRowHeader ? 'th' : 'td';
     const isVisualRefresh = useVisualRefresh();
 
+    resizableStyle = resizableColumns ? resizableStyle : {};
+
     nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };
 
     const stickyStyles = useStickyCellStyles({
@@ -115,7 +118,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
 
     return (
       <Element
-        style={{ ...style, ...stickyStyles.style }}
+        style={{ ...resizableStyle, ...stickyStyles.style }}
         className={clsx(
           styles['body-cell'],
           isFirstRow && styles['body-cell-first-row'],
diff --git a/src/table/column-widths-utils.ts b/src/table/column-widths-utils.ts
index 088e576e3a..fc7b5a5083 100644
--- a/src/table/column-widths-utils.ts
+++ b/src/table/column-widths-utils.ts
@@ -5,6 +5,12 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { TableProps } from './interfaces';
 
+export interface ColumnWidthStyle {
+  width?: string | number;
+  minWidth?: string | number;
+  maxWidth?: string | number;
+}
+
 export function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>) {
   for (const column of columnDefinitions) {
     checkProperty(column, 'minWidth');
@@ -12,7 +18,7 @@ export function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.Co
   }
 }
 
-export function setElementWidths(element: HTMLElement, styles: React.CSSProperties) {
+export function setElementWidths(element: HTMLElement, styles: ColumnWidthStyle) {
   function setProperty(property: 'width' | 'minWidth' | 'maxWidth') {
     const value = styles[property];
     let widthCssValue = '';
diff --git a/src/table/header-cell/index.tsx b/src/table/header-cell/index.tsx
index 8b17618c0c..063af8c6fb 100644
--- a/src/table/header-cell/index.tsx
+++ b/src/table/header-cell/index.tsx
@@ -13,6 +13,7 @@ import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { KeyCode } from '../../internal/keycode';
 import { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';
+import { ColumnWidthStyle } from '../column-widths-utils';
 import { TableProps } from '../interfaces';
 import { Divider, Resizer } from '../resizer';
 import { StickyColumnsModel } from '../sticky-columns';
@@ -24,7 +25,6 @@ import analyticsSelectors from '../analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 
 export interface TableHeaderCellProps<ItemType> {
-  style?: React.CSSProperties;
   tabIndex: number;
   column: TableProps.ColumnDefinition<ItemType>;
   activeSortingColumn?: TableProps.SortingColumn<ItemType>;
@@ -40,6 +40,7 @@ export interface TableHeaderCellProps<ItemType> {
   colIndex: number;
   updateColumn: (columnId: PropertyKey, newWidth: number) => void;
   resizableColumns?: boolean;
+  resizableStyle?: ColumnWidthStyle;
   isEditable?: boolean;
   columnId: PropertyKey;
   stickyState: StickyColumnsModel;
@@ -53,7 +54,6 @@ export interface TableHeaderCellProps<ItemType> {
 }
 
 export function TableHeaderCell<ItemType>({
-  style,
   tabIndex,
   column,
   activeSortingColumn,
@@ -69,6 +69,7 @@ export function TableHeaderCell<ItemType>({
   colIndex,
   updateColumn,
   resizableColumns,
+  resizableStyle,
   onResizeFinish,
   isEditable,
   columnId,
@@ -120,7 +121,7 @@ export function TableHeaderCell<ItemType>({
 
   return (
     <TableThElement
-      style={style}
+      resizableStyle={resizableStyle}
       cellRef={cellRefCombined}
       sortingStatus={sortingStatus}
       sortingDisabled={sortingDisabled}
diff --git a/src/table/header-cell/th-element.tsx b/src/table/header-cell/th-element.tsx
index 5e4c1c60f3..0bc7c8edcf 100644
--- a/src/table/header-cell/th-element.tsx
+++ b/src/table/header-cell/th-element.tsx
@@ -8,6 +8,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
+import { ColumnWidthStyle } from '../column-widths-utils';
 import { TableProps } from '../interfaces';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
 import { getTableColHeaderRoleProps, TableRole } from '../table-role';
@@ -18,7 +19,7 @@ import tableStyles from '../styles.css.js';
 import styles from './styles.css.js';
 
 export interface TableThElementProps {
-  style?: React.CSSProperties;
+  resizableStyle?: ColumnWidthStyle;
   sortingStatus?: SortingStatus;
   sortingDisabled?: boolean;
   focusedComponent?: null | string;
@@ -37,7 +38,7 @@ export interface TableThElementProps {
 }
 
 export function TableThElement({
-  style,
+  resizableStyle,
   sortingStatus,
   sortingDisabled,
   focusedComponent,
@@ -89,7 +90,7 @@ export function TableThElement({
         },
         stickyStyles.className
       )}
-      style={{ ...style, ...stickyStyles.style }}
+      style={{ ...resizableStyle, ...stickyStyles.style }}
       ref={mergedRef}
       {...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex })}
       tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}
diff --git a/src/table/internal.tsx b/src/table/internal.tsx
index 779eb22307..e536162294 100644
--- a/src/table/internal.tsx
+++ b/src/table/internal.tsx
@@ -621,15 +621,11 @@ const InternalTable = React.forwardRef(
                                     <TableBodyCell
                                       key={getColumnKey(column, colIndex)}
                                       {...sharedCellProps}
-                                      style={
-                                        resizableColumns
-                                          ? {}
-                                          : {
-                                              width: column.width,
-                                              minWidth: column.minWidth,
-                                              maxWidth: column.maxWidth,
-                                            }
-                                      }
+                                      resizableStyle={{
+                                        width: column.width,
+                                        minWidth: column.minWidth,
+                                        maxWidth: column.maxWidth,
+                                      }}
                                       ariaLabels={ariaLabels}
                                       column={column}
                                       item={row.item}
diff --git a/src/table/thead.tsx b/src/table/thead.tsx
index 6797ab3692..9f3c00c0d9 100644
--- a/src/table/thead.tsx
+++ b/src/table/thead.tsx
@@ -124,7 +124,6 @@ const Thead = React.forwardRef(
               <TableHeaderCell
                 {...commonCellProps}
                 key={columnId}
-                style={getColumnStyles(sticky, columnId)}
                 tabIndex={sticky ? -1 : 0}
                 focusedComponent={focusedComponent}
                 column={column}
@@ -137,6 +136,7 @@ const Thead = React.forwardRef(
                 updateColumn={updateColumn}
                 onResizeFinish={() => onResizeFinish(columnWidths)}
                 resizableColumns={resizableColumns}
+                resizableStyle={getColumnStyles(sticky, columnId)}
                 onClick={detail => {
                   setLastUserAction('sorting');
                   fireNonCancelableEvent(onSortingChange, detail);
diff --git a/src/table/use-column-widths.tsx b/src/table/use-column-widths.tsx
index 3e50e64974..db41a79c8c 100644
--- a/src/table/use-column-widths.tsx
+++ b/src/table/use-column-widths.tsx
@@ -5,15 +5,12 @@ import React, { createContext, useContext, useEffect, useRef, useState } from 'r
 import { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
-import { setElementWidths } from './column-widths-utils';
+import { ColumnWidthStyle, setElementWidths } from './column-widths-utils';
 
 export const DEFAULT_COLUMN_WIDTH = 120;
 
-export interface ColumnWidthDefinition {
+export interface ColumnWidthDefinition extends ColumnWidthStyle {
   id: PropertyKey;
-  minWidth?: string | number;
-  maxWidth?: string | number;
-  width?: string | number;
 }
 
 function readWidths(
@@ -61,7 +58,7 @@ function updateWidths(
 }
 
 interface WidthsContext {
-  getColumnStyles(sticky: boolean, columnId: PropertyKey): React.CSSProperties;
+  getColumnStyles(sticky: boolean, columnId: PropertyKey): ColumnWidthStyle;
   columnWidths: Map<PropertyKey, number>;
   updateColumn: (columnId: PropertyKey, newWidth: number) => void;
   setCell: (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => void;
@@ -98,7 +95,7 @@ export function ColumnWidthsProvider({ visibleColumns, resizableColumns, contain
     }
   };
 
-  const getColumnStyles = (sticky: boolean, columnId: PropertyKey): React.CSSProperties => {
+  const getColumnStyles = (sticky: boolean, columnId: PropertyKey): ColumnWidthStyle => {
     const column = visibleColumns.find(column => column.id === columnId);
     if (!column) {
       return {};

From c0e7ae64082fcc8828899becb5b52dd143bcec15 Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Tue, 26 Nov 2024 14:54:20 +0100
Subject: [PATCH 3/4] body cell wrapper inner

---
 pages/table/cell-permutations.page.tsx | 33 ++++++++++++++---
 src/table/body-cell/inline-editor.tsx  |  2 +-
 src/table/body-cell/styles.scss        | 49 ++++++++------------------
 src/table/body-cell/td-element.tsx     | 13 +++++--
 src/table/styles.scss                  |  1 +
 5 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/pages/table/cell-permutations.page.tsx b/pages/table/cell-permutations.page.tsx
index 560eed95ed..2caa481081 100644
--- a/pages/table/cell-permutations.page.tsx
+++ b/pages/table/cell-permutations.page.tsx
@@ -12,6 +12,7 @@ import {
   FormField,
   Header,
   Input,
+  Link,
   Slider,
   SpaceBetween,
   StatusIndicator,
@@ -192,15 +193,37 @@ function TableCellsDemo() {
 
   const columnDefinitions: TableProps.ColumnDefinition<number>[] = columns.map(index => {
     const columnId = index.toString();
-    const cellContent = (item: number) =>
-      editedValues[`${columnId}:${item}`] ??
-      `Body cell content ${item}:${index}${index === 1 ? ` (L=${itemLevels[item]})` : ''}${index === 8 ? ' with longer text' : ''}`;
+    const cellRenderer = (() => {
+      const getText = (item: number) =>
+        editedValues[`${columnId}:${item}`] ??
+        `Body cell content ${item}:${index}${index === 1 ? ` (L=${itemLevels[item]})` : ''}${index === 8 ? ' with longer text' : ''}`;
+      switch (index) {
+        case 1:
+          return { type: 'link', getText, render: (item: number) => <Link>{getText(item)}</Link> };
+        case 3:
+          return {
+            type: 'status',
+            getText,
+            render: (item: number) => <StatusIndicator>{getText(item)}</StatusIndicator>,
+          };
+        case 4:
+          return { type: 'right-align', getText, render: () => <Box textAlign="right">{index}</Box> };
+        case 10:
+          return {
+            type: 'actions',
+            getText,
+            render: () => <Button variant="icon" iconName="ellipsis" ariaLabel="Actions" />,
+          };
+        default:
+          return { type: 'text', getText, render: getText };
+      }
+    })();
     return {
       id: columnId,
       header: `Header cell content ${index}${index === 8 ? ' with longer text' : ''}`,
       sortingField: index === 2 ? 'field-1' : index === 3 ? 'field-2' : undefined,
       activeSorting: index === 3,
-      cell: cellContent,
+      cell: item => cellRenderer.render(item),
       verticalAlign: settings.verticalAlign,
       editConfig: settings.isEditable
         ? {
@@ -216,7 +239,7 @@ function TableCellsDemo() {
               return (
                 <Input
                   autoFocus={true}
-                  value={currentValue ?? cellContent(item)}
+                  value={currentValue ?? cellRenderer.getText(item)}
                   onChange={event => setValue(event.detail.value)}
                 />
               );
diff --git a/src/table/body-cell/inline-editor.tsx b/src/table/body-cell/inline-editor.tsx
index 4c1cd589f7..5c501b0b3e 100644
--- a/src/table/body-cell/inline-editor.tsx
+++ b/src/table/body-cell/inline-editor.tsx
@@ -114,7 +114,7 @@ export function InlineEditor<ItemType>({
         aria-label={ariaLabels?.activateEditLabel?.(column, item)}
         onKeyDown={handleEscape}
       >
-        <form onSubmit={onSubmitClick} className={styles['body-cell-editor-form']}>
+        <form onSubmit={onSubmitClick}>
           <FormField
             stretch={true}
             label={ariaLabel}
diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index c1f5b19728..6be49cc125 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -25,11 +25,10 @@ $edit-button-padding-right: calc(#{awsui.$space-xs} + #{awsui.$space-xxs});
 // Cell vertical padding + xxs space that would normally come from the button.
 $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-with-spacing});
 $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+$editing-cell-padding-inline: awsui.$space-xxs;
+$editing-cell-padding-block: awsui.$space-scaled-xxxs;
 $cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
 
-// Ensuring enough space for absolute-positioned focus outlines of focus-able cell content elements.
-$cell-negative-space-vertical: 2px;
-
 @mixin cell-focus-outline {
   @include styles.focus-highlight(calc(-1 * #{awsui.$space-scaled-xxs}));
 
@@ -99,20 +98,17 @@ $cell-negative-space-vertical: 2px;
 }
 @mixin cell-padding-block($padding) {
   > .body-cell-content {
-    padding-block: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
-    margin-block: calc(-1 * #{$cell-negative-space-vertical});
+    padding-block: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
   }
 }
 @mixin cell-padding-block-start($padding) {
   > .body-cell-content {
-    padding-block-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
-    margin-block-start: calc(-1 * #{$cell-negative-space-vertical});
+    padding-block-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
   }
 }
 @mixin cell-padding-block-end($padding) {
   > .body-cell-content {
-    padding-block-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
-    margin-block-end: calc(-1 * #{$cell-negative-space-vertical});
+    padding-block-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
   }
 }
 
@@ -131,6 +127,12 @@ $cell-negative-space-vertical: 2px;
 
   &-content {
     box-sizing: border-box;
+    block-size: 100%;
+    align-content: center;
+
+    &.body-cell-align-top {
+      align-content: baseline;
+    }
 
     &:not(.body-cell-wrap) {
       white-space: nowrap;
@@ -178,20 +180,10 @@ $cell-negative-space-vertical: 2px;
     &:not(.has-selection):not(.body-cell-editable) {
       border-inline-start: none;
     }
-
-    // Give extra space on the edge to allow slight content overflow.
-    // That is to prevent focus outline on cell content from being cut out.
-    > .body-cell-content {
-      padding-inline-start: awsui.$border-divider-list-width;
-      margin-inline-start: calc(-1 * #{awsui.$border-divider-list-width});
-    }
   }
   &:first-child:not(.is-visual-refresh) {
     @include cell-padding-inline-start($cell-edge-horizontal-padding);
   }
-  &-align-top {
-    vertical-align: top;
-  }
   &-first-row {
     border-block-start: $border-placeholder;
   }
@@ -381,19 +373,6 @@ $cell-negative-space-vertical: 2px;
       color: awsui.$color-text-button-normal-active;
     }
 
-    &-form {
-      margin-block: calc(-1 * #{awsui.$space-xs});
-      margin-inline: calc(-1.5 * #{awsui.$space-xs});
-
-      .is-visual-refresh.body-cell:first-child.has-striped-rows > & {
-        margin-inline-start: calc(-1 * #{awsui.$space-xxs});
-      }
-
-      .is-visual-refresh.body-cell:first-child:not(.has-striped-rows) > & {
-        margin-inline-start: calc(-1 * #{awsui.$space-xxxs});
-      }
-    }
-
     &-row {
       display: flex;
       flex-flow: row nowrap;
@@ -429,9 +408,9 @@ $cell-negative-space-vertical: 2px;
     }
 
     &.body-cell-edit-active {
-      > .body-cell-content {
-        overflow: visible;
-      }
+      @include cell-padding-inline-start($editing-cell-padding-inline);
+      @include cell-padding-inline-end($editing-cell-padding-inline);
+      @include cell-padding-block($editing-cell-padding-block);
     }
 
     &:not(.body-cell-edit-active) {
diff --git a/src/table/body-cell/td-element.tsx b/src/table/body-cell/td-element.tsx
index 18f3d7da52..121f5ca8d1 100644
--- a/src/table/body-cell/td-element.tsx
+++ b/src/table/body-cell/td-element.tsx
@@ -102,7 +102,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
     const Element = isRowHeader ? 'th' : 'td';
     const isVisualRefresh = useVisualRefresh();
 
-    resizableStyle = resizableColumns ? resizableStyle : {};
+    resizableStyle = resizableColumns ? {} : resizableStyle;
 
     nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };
 
@@ -139,7 +139,6 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           hasSuccessIcon && styles['body-cell-has-success'],
           level !== undefined && styles['body-cell-expandable'],
           level !== undefined && styles[`expandable-level-${getLevelClassSuffix(level)}`],
-          verticalAlign === 'top' && styles['body-cell-align-top'],
           stickyStyles.className
         )}
         onClick={onClick}
@@ -161,7 +160,15 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           </div>
         )}
 
-        <div className={clsx(styles['body-cell-content'], wrapLines && styles['body-cell-wrap'])}>{children}</div>
+        <div
+          className={clsx(
+            styles['body-cell-content'],
+            verticalAlign === 'top' && styles['body-cell-align-top'],
+            wrapLines && styles['body-cell-wrap']
+          )}
+        >
+          {children}
+        </div>
       </Element>
     );
   }
diff --git a/src/table/styles.scss b/src/table/styles.scss
index 62bbb1643d..2fe959c372 100644
--- a/src/table/styles.scss
+++ b/src/table/styles.scss
@@ -53,6 +53,7 @@
 
 .table {
   inline-size: 100%;
+  block-size: 100%;
   border-spacing: 0;
   position: relative;
   box-sizing: border-box;

From 9836e895e7c6c2cba12a30a7aec4beb22791356b Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Mon, 9 Dec 2024 16:12:08 +0100
Subject: [PATCH 4/4] fix: Reverted editable cell overflow visible and cell
 negative vertical margin

---
 src/table/body-cell/styles.scss | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index 6be49cc125..a09ce882f5 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -28,6 +28,8 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
 $editing-cell-padding-inline: awsui.$space-xxs;
 $editing-cell-padding-block: awsui.$space-scaled-xxxs;
 $cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
+// Ensuring enough space for absolute-positioned focus outlines of focus-able cell content elements.
+$cell-negative-space-vertical: 2px;
 
 @mixin cell-focus-outline {
   @include styles.focus-highlight(calc(-1 * #{awsui.$space-scaled-xxs}));
@@ -98,17 +100,20 @@ $cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
 }
 @mixin cell-padding-block($padding) {
   > .body-cell-content {
-    padding-block: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
+    padding-block: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
+    margin-block: calc(-1 * #{$cell-negative-space-vertical});
   }
 }
 @mixin cell-padding-block-start($padding) {
   > .body-cell-content {
-    padding-block-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
+    padding-block-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
+    margin-block-start: calc(-1 * #{$cell-negative-space-vertical});
   }
 }
 @mixin cell-padding-block-end($padding) {
   > .body-cell-content {
-    padding-block-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
+    padding-block-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
+    margin-block-end: calc(-1 * #{$cell-negative-space-vertical});
   }
 }
 
@@ -408,6 +413,9 @@ $cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
     }
 
     &.body-cell-edit-active {
+      > .body-cell-content {
+        overflow: visible;
+      }
       @include cell-padding-inline-start($editing-cell-padding-inline);
       @include cell-padding-inline-end($editing-cell-padding-inline);
       @include cell-padding-block($editing-cell-padding-block);