Skip to content

Commit edf83a2

Browse files
committed
[EuiBasicTable][cleanup] Better align expanded rows and custom actions on mobile
1 parent 4b347e5 commit edf83a2

3 files changed

Lines changed: 15 additions & 1 deletion

File tree

278 Bytes
Loading
96 Bytes
Loading

packages/eui/src/components/table/table_row.styles.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
euiCanAnimate,
1414
euiBackgroundColor,
1515
logicalCSS,
16+
mathWithUnits,
1617
} from '../../global_styling';
1718
import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
1819

@@ -82,6 +83,11 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
8283
${euiShadow(euiThemeContext, 's')}
8384
background-color: ${euiBackgroundColor(euiThemeContext, 'plain')};
8485
border-radius: ${euiTheme.border.radius.medium};
86+
87+
&:has(+ .euiTableRow-isExpandedRow) {
88+
${logicalCSS('border-bottom-left-radius', 0)}
89+
${logicalCSS('border-bottom-right-radius', 0)}
90+
}
8591
`,
8692
selected: css`
8793
&,
@@ -116,7 +122,15 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
116122
* Bottom of card - expanded rows
117123
*/
118124
expanded: css`
119-
${logicalCSS('margin-top', `-${mobileSizes.actions.offset}`)}
125+
${logicalCSS(
126+
// On mobile, visually move the expanded row to join up with the
127+
// preceding table row via negative margins
128+
'margin-top',
129+
mathWithUnits(
130+
[cellContentPadding, euiTheme.border.width.thin],
131+
(x, y) => (x + y) * -1
132+
)
133+
)}
120134
/* Padding accounting for the checkbox is already applied via the content */
121135
${logicalCSS('padding-left', cellContentPadding)}
122136

0 commit comments

Comments
 (0)