diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx index 119556354c..1d89d7147f 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx @@ -532,6 +532,9 @@ export function OrderRow({ {/* Children (e.g. ToggleExpandButton for parent orders) */} {children} + {/* Add empty cell for child TWAP orders */} + {isTwapTable && isChild && } + {/* Action content menu */} + <> - + ) } diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx index b1f767c27a..50dcfb408b 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx @@ -61,6 +61,22 @@ export const TableHeader = styled.div<{ isHistoryTab: boolean; isRowSelectable: display: grid; gap: 14px; grid-template-columns: ${({ isHistoryTab, isRowSelectable, isTwapTable }) => { + const checkboxColumn = isRowSelectable ? 'var(--checkboxSize)' : '' + + // TWAP table layout - applies to both history and non-history tabs + if (isTwapTable) { + if (isHistoryTab) { + return `minmax(200px, 2.5fr) + repeat(4, minmax(110px, 1fr)) + minmax(80px, 0.8fr) + minmax(120px, 1fr) + minmax(100px, 0.8fr) + 24px` + } + return `${checkboxColumn} minmax(160px,2fr) minmax(120px,1fr) minmax(140px,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(100px,110px) minmax(120px,1fr) minmax(100px,0.8fr) 24px` + } + + // Default layout for history tab if (isHistoryTab) { return `minmax(200px, 2.5fr) repeat(4, minmax(110px, 1fr)) @@ -69,13 +85,6 @@ export const TableHeader = styled.div<{ isHistoryTab: boolean; isRowSelectable: 24px` } - const checkboxColumn = isRowSelectable ? 'var(--checkboxSize)' : '' - - // TWAP table layout - if (isTwapTable) { - return `${checkboxColumn} minmax(160px,2fr) minmax(120px,1fr) minmax(140px,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(100px,110px) minmax(190px,1.6fr) 24px` - } - // Default/Limit orders layout return `${checkboxColumn} minmax(160px,2fr) minmax(120px,1fr) minmax(140px,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(100px,110px) minmax(80px,0.8fr) 24px` }};