tablelandnetwork / studio

Discover, design, deploy, and manage data driven web3 apps on Tableland.
https://studio.tableland.xyz
4 stars 1 forks source link

(web) update to layout of metric card, and enable click to copy #224

Closed joewagner closed 6 months ago

joewagner commented 6 months ago

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.

railway-app[bot] commented 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.

linear[bot] commented 6 months ago
ENG-823 The table page's table name card has issues with overflow and word break

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.

asutula commented 6 months ago

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. Screenshot 2024-03-15 at 4 10 43 PM Screenshot 2024-03-15 at 3 42 45 PM