Text Alignment Issue within Table component

[benmcginnis]

Describe the bug When using a Badge or Button (and possibly other components) within a Table Row, the vertical text alignment is off.

To Reproduce Create an isolated reproduction on the CodeSandox: https://codesandbox.io/p/sandbox/nifty-wind-x8g55j

Expected behavior The text alignment for the badge and the button should be able to be baseline aligned with the rest of the text in the table row, (especially within the same cell).

Screenshots as you can see the baseline is not aligned and I can't quite figure out how to do it properly:

Environment (please complete the following information):

• OS: Mac Os 13.4.1
• Browser Firefox
• Version 122

[blvdmitry]

Looking at the example, I've noticed you're using HiddenVisually for the icon button labels. You can try using attributes={{ 'aria-label': 'Next' }} instead to avoid Button adding a gap after the icon

[blvdmitry]

I've looked into your example now and I have a few suggestions. Current implementation doesn't work as expected because of how flexbox works in css (it won't work with the same layout with vanilla html and css too).

Approach 1: Instead of trying to align it based on the baseline, align it to the center vertically. That can be achieved by adding align="center" to the View wrapping the id and the badge. I believe this can be a better approach because the font size is different and badge compensates for that with additional padding.

 <View direction="row" align="center">
   {revision.id}
   <RevisionLabel revision={revision} />
 </View>

Approach 2: In case you do need to align it based on the baseline you can change the composition a bit. Right now it doesn't work as expected because your Badge is wrapped with a View.Item which then ignores the baseline alignment. So a solution here would be to remove the View.Item in the RevisionLabel and use View gap property instead. It will align any id font-size with the badge text baseline.

 <View direction="row" align="baseline" gap={2}>
   {revision.id}
   <RevisionLabel revision={revision} />
 </View>

[benmcginnis]

Ah, thanks for getting back to me. This works for the badge and the rest of the cell (I updated my sandbox) but it doesn't get the table row alignment for the rest of the text in the row (or the action bar buttons on the right) correct. I think the issue is actually that the table cells have vertical-align: top set on them. Is there a proper way to change that?

[blvdmitry]

I don't think supporting a different align would help here since you're trying to align it across multiple cells. The whole misalignment happens because Badge has that additional padding, which causes the id to be displayed lower to have this alignment inside the cell.

I would say probably the best workaround for this right now is to keep everything aligned to the top then (since all text content has the same line height) and apply an additional style either to the badge itself or to its wrapper with inline styles / classname / tailwind:

<Badge color={color} attributes={{ style: { marginTop: -2 } }}>
    {revision.label}
</Badge>

<Badge color={color} className="-mt-[2px]">
    {revision.label}
</Badge>

[blvdmitry]

I'll close this for now, let me know if there is something else you think can be improved 🙌