[EuiTableCell] Default table cell alignment in Safari is mixed

[ryankeairns]

In elastic/kibana#92374 , it was noted that the table cell content alignment is inconsistent on Safari. Using the align prop works for right and center, as that applies an explicit class, but left and start appear to have no effect (i.e. they are left to the browser default, I suspect).

In effect, this means you cannot reliably for a left/start alignment on Safari. The likely code in question is below:

eui/src/components/table/_table.scss

Lines 141 to 162 in 5270286

	.euiTableCellContent {
	overflow: hidden; /* 4 */
	display: flex;
	align-items: center; /* 1 */
	padding: $euiTableCellContentPadding; /* 2 */
	}
	.euiTableCellContent__text {
	@include euiTextBreakWord; /* 4 */
	min-width: 0;
	text-overflow: ellipsis;
	}
	.euiTableCellContent--alignRight {
	justify-content: flex-end;
	text-align: right;
	}
	.euiTableCellContent--alignCenter {
	justify-content: center;
	text-align: center;
	}

Screenshot from Safari

[cchaos]

Can we get a copy/paste of the actual implementation code, or at lease the rendered cell DOM? I feel like this may be specific to the inner child.

[ryankeairns]

The linked PR provides more context. There are some interesting details in there.

[cchaos]

In that PR it looks like the root of problem was tracked to the specific content:

The problem appeared when the link was wrapped with additional <div>, which comes from RedirectAppLinks component.

[ryankeairns]

I tinkered with the markup, briefly, and it didn't seem to be the culprit. Also, the first example in the EUI docs site shows the same result on Safari:

[cchaos]

👍 Ugh, just another place where Safari is way too heavy-handed with their default browser styles.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

I'll try to tackle this fix as part of the new Emotion global styles.

[cchaos]

I found that the root of the problem was when we converted the first column from rendering a <td> to a <th> to make it a row header.