search

KlimaDAO / klimadao

Monorepo for the official KlimaDAO site, dApp, components and design system.
https://klimadao.finance
MIT License
92 stars 74 forks source link

[provenance] fix layout issues with GridContainer #2274

Closed 0xMakka closed 7 months ago

0xMakka commented 7 months ago

Description

GridContainer is used for the page layouts and after the recent navigation changes, the page layout has changed. Grid container by default is setting display: grid, in this instance using display: unset resolves the page issues.

Note: I'd like to relook at these pages that use GridContainer in a follow up ticket and see can they now be replaced with the Container component from material-ui. I've briefly checked if it works, it does apart from the footer needs some work to span the full screen.

Related Ticket

Closes #2273

How to Test

  1. Ensure the layout isn't breaking on desktop/mobile.
  2. Ensure the retirements page layout is also working as expected.

Screenshots:

Screenshot 2024-02-15 at 15 33 20 Screenshot 2024-02-15 at 15 33 34
vercel[bot] commented 7 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
carbon ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 15, 2024 7:20pm
carbonmark ✅ Ready (Inspect) Visit Preview Feb 15, 2024 7:20pm
carbonmark-api ✅ Ready (Inspect) Visit Preview Feb 15, 2024 7:20pm
demo-integration ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 15, 2024 7:20pm
klimadao-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 15, 2024 7:20pm
0xtapi commented 7 months ago

Almost there, but I did find something: bug

Layout breaks (wrong alignments, text overflow) when the browser window is too small. To reproduce, make your browser window small enough so CM switches to mobile layout.

(This PR also fixes the retirements page btw, which is broken in the same way the provenance page is.)

0xMakka commented 7 months ago

Almost there, but I did find something: bug

Layout breaks (wrong alignments, text overflow) when the browser window is too small. To reproduce, make your browser window small enough so CM switches to mobile layout.

(This PR also fixes the retirements page btw, which is broken in the same way the provenance page is.)

Thanks @0xtapi I thought I had covered all bases with the initial, apologies. I've made some more changes to hopefully address the issues mentioned, it should be good to retest again.

0xtapi commented 7 months ago

One more small fix and this is good to go: Screenshot 2024-02-15 174846

"1 tonnes" should be aligned to the right side of that element, right? It does seem to do that for large numbers (like here: https://carbonmark-git-makka-2273-fix-page-layout-issues-klimadao.vercel.app/retirements/0x65a5076c0ba74e5f3e069995dc3dab9d197d995c/8/provenance) but not small ones.