`1972` treasury layout update

[Da-Colon]

Fixes #1972

The rework was a little less invasive as I thought. Was able to achieve the correct layout using Grid component. as well as preserve the mobile screen changes easier.

Notable changes:

• Switch to grid for main layout (using minmax)
• Separate NFT and Coin components to separate component to easier read file.

Extra note

• I did not change any logic or reviewed deeper into the components themselves just focused on UI updates as needed.

Screenshot is 1280x1260

[netlify[bot]]

✅ Deploy Preview for decent-interface-dev ready!

Name	Link
🔨 Latest commit	8d43832f08eb23d3bc609b521cba8d5fb4dcb56f
🔍 Latest deploy log	https://app.netlify.com/sites/decent-interface-dev/deploys/66759d6d01748600083e6762
😎 Deploy Preview	https://deploy-preview-2032.app.dev.decentdao.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Da-Colon]

@decentdao/design @decentdao/product.

One noticeable difference between the figma designs and this implementation.

Figma

This PR

This id is quite long 1125995687427581060846379258837315132058982026049890980521328335525525464358

So I used a truncate function to shorten it. with that I also added space between the name and id, instead of pushing it together (which makes things really tricky as far as spacing between longer NFT names. Thoughts on this change?

[tomstuart123]

@Da-Colon - the removal of side scroll works well for large mid and small screens

however, this new PR seems to be creating some issues with the Txs piece.

See below for what I see in the new PR

v.s. what I see in app.dev

Could this be because of the use of grid makes sure the tx hash is kept in (three columns). Before we cut the Tx hash on small devices (i.e. 2 columns)

[Da-Colon]

@Da-Colon - the removal of side scroll works well for large mid and small screens

however, this new PR seems to be creating some issues with the Txs piece.

See below for what I see in the new PR

v.s. what I see in app.dev

Could this be because of the use of grid makes sure the tx hash is kept in (three columns). Before we cut the Tx hash on small devices (i.e. 2 columns)

O weird. My changes shouldn't have affected that. (Nor did I notice that last night.) I will take a look and get fixed up

[Da-Colon]

@tomstuart123 Oookay, I got it. I saw my mistakes here and reenabled scrolling for these tables on the smallest screens. Should be good to go to relook at.

[tomstuart123]

good call @Da-Colon . Transactions hashes work better now and I like adding back in the side scroll back in for the other sections too as they were feeling a bit tight

Approved

[Da-Colon]

good call @Da-Colon . Transactions hashes work better now and I like adding back in the side scroll back in for the other sections too as they were feeling a bit tight

Approved

Blah Sorry yall. made a few more adjustments will push up shortly. Found some stuff I wasn't happy with and almost done fixing it. wasn't quite there yet.