@@ -13,6 +13,7 @@ import {
1313 euiCanAnimate ,
1414 euiBackgroundColor ,
1515 logicalCSS ,
16+ mathWithUnits ,
1617} from '../../global_styling' ;
1718import { 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