Column alignment when using a link style button

[PoojMenon]

Hi,

I have a table where I'm using a link-style button in one of the columns to display additional information via a popover. I'm noticing some odd behaviour when I scale the window. The alignment of the column changes from left-aligned to center-aligned? Here is a link to the codesandbox.

Did I get something wrong in the prototype?

Screen.Recording.2021-08-13.at.18.39.15.mov

[nkrantz]

Hey @PoojMenon,

You haven't done anything wrong (excellent prototype by the way!), this is expected behavior. The Buttons are left-aligned in your table, which is why they appear to the left of the column at full width. The reason that they appear center-aligned when the page scales down is that the column becomes as small as the width of the Button (so there's no room on either side of the Button). Button text is always centered within the Button, even at full width when the Button itself is on the left side of the column.

Your post has lead us to reconsider this behavior, and we think it makes sense to update our Link-style Buttons to have left-aligned text. I'm going to start this update today and I'll let you know in this thread once it's merged in.

[PoojMenon]

Ah - that makes sense. Thanks so much for that update @nkrantz!!

[katieporter]

Hey @PoojMenon! Just wanted to give you an update here - Nora didn't have time to tackle this before going OOO, but we're checking with the team now to see if someone else can take this on in the next day or two. We'll keep you updated!

[PoojMenon]

Thanks for that update Katie!

[TheSisb]

Hi @PoojMenon,

Link style buttons will be left-aligned as of today's release. Update your Paste dependencies to see the change in effect.

[PoojMenon]

Hi @TheSisb
Just updated to the twilio-paste/core v10.10.0 on my codesandbox and it looks like I still have the same problem.

[katieporter]

Hey @PoojMenon - sorry about that, looks like the fix didn't quite solve the problem. We are looking into it and will get back to you soon!

[gloriliale]

Hi @PoojMenon! This should be fixed now, update and let us know if you don't see it!

[PoojMenon]

Hi @gloriliale. I updated paste/core to 10.11.0. It seems to still be happening. You can see the behaviour here.

[gloriliale]

Hi @PoojMenon! Could you try clearing your cache for CodeSandbox in your browser settings and trying again? The alignment is showing up as fixed when I click the link, so I think it might be a caching issue. You could also try forking the project to see if that shows the right behavior. Let me know!

[PoojMenon]

That seems to have fixed it. Thanks @gloriliale !