Closed joewagner closed 6 months ago
This PR was not deployed automatically as @joewagner does not have access to the Railway project.
In order to get automatic PR deploys, please add @joewagner to your team on Railway.
See below for an example of the overflow issues. [Screen Shot 2024-03-07 at 1.06.46 PM.png](https://uploads.linear.app/7cdacd8f-77a8-43b0-862f-4037553d10bb/1580a243-5581-45db-bd95-15be65b21f55/402dc8c0-6e3c-4271-9b34-7209df3a5587) There are quite a few ways we could modify this `Card` component to handle the display of table names and the resulting overflows. Some ideas: * use overflow hidden and let the name be partially hidden * use `word-break: break-all;` or `word-break: break-word;`. These are affectively the same since names are a single word * use `text-overflow: ellipsis;` * use overflow scroll on the x axis with some modifications to scroll bars visibility * continue adding dash characters to the table name in a way that more precisely places the dashes All of the above would still allow the user to click and copy the table name.
Hey @joewagner lots of good stuff in here. I didn't like the copy button next to the main text of the card content, so I moved it to the header. Basically just moved all your code/logic from CardContent
to CardHeader
and made it more general use. Now any card can have a copy button by specifying the needed props in the CardHeader
and you can customize the tooltip text, toast text, etc. I migrated the card that displays the txn hash to use this as well. Looks good I think.
fixes: https://linear.app/tableland/issue/ENG-823/the-table-pages-table-name-card-has-issues-with-overflow-and-word
The metric card on the table page has issues with the layout and you cannot click to copy the table name. This PR updates the layout to handle text overflow with an ellipsis truncation, and it enable the same click to copy functionality as the wallet public key in the header.