From f5b82308ee8acb610e4b1a0a46385fd9d5785562 Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Wed, 9 Oct 2024 22:27:50 +0000
Subject: [PATCH] [Dashboard] Fix minor layer issues (#4928)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before:
![image](https://github.com/user-attachments/assets/5429077d-24ee-4641-8025-137a67ab187d)

After:
![image](https://github.com/user-attachments/assets/72784965-1708-48a9-b614-970697ad40b9)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the layout and styling of components in the `supply-cards.tsx` and `page.tsx` files to enhance the visual structure and responsiveness of the dashboard interface.

### Detailed summary
- In `supply-cards.tsx`, changed the layout from a row (`flex-row`) to a column (`flex-col`) for better alignment.
- In `page.tsx`, modified the layout to use `flex-col` with additional styling adjustments, including:
  - Updated heading class from `font-bold text-xl` to `font-semibold text-2xl tracking-tight`.
  - Adjusted the container to use a grid layout for better responsiveness.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../src/contract-ui/tabs/nfts/components/supply-cards.tsx   | 2 +-
 apps/dashboard/src/contract-ui/tabs/nfts/page.tsx           | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/supply-cards.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/supply-cards.tsx
index 74fcf749cbe..8c69caa4171 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/supply-cards.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/supply-cards.tsx
@@ -23,7 +23,7 @@ export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
   ).toString();
 
   return (
-    <div className="flex flex-row gap-3 md:gap-6">
+    <div className="flex flex-col gap-3 md:flex-row md:gap-6">
       <Card as={Stat}>
         <StatLabel mb={{ base: 1, md: 0 }}>Total Supply</StatLabel>
         <Skeleton isLoaded={totalSupplyQuery.isSuccess}>
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/page.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/page.tsx
index fadfe7cb8eb..7eef52679f1 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/page.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/page.tsx
@@ -53,9 +53,9 @@ export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex flex-row items-center justify-between">
-        <h2 className="font-bold text-xl">Contract NFTs</h2>
-        <div className="flex flex-col gap-2 md:flex-row">
+      <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+        <h2 className="font-semibold text-2xl tracking-tight">Contract NFTs</h2>
+        <div className="grid grid-cols-2 gap-2 md:flex">
           {isRevealable && <NFTRevealButton contract={contract} />}
           {isERC721ClaimToSupported && (
             /**