fix: adjust layout and spacing in Home/SlidableList (#632)

* fix: adjust layout and spacing in Home/SlidableList * fix: update layout for card headers to support 2xl breakpoint * chore: update changeset * fix: tailwind typo
Blobscan · Nov 25, 2024 · b89af3a · b89af3a
1 parent 6512745
commit b89af3a
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 96 deletions.
diff --git a/.changeset/rude-news-glow.md b/.changeset/rude-news-glow.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Improved the home lists spacing
diff --git a/apps/web/src/components/SlidableList.tsx b/apps/web/src/components/SlidableList.tsx
@@ -52,7 +52,7 @@ export const SlidableList: FC<SlidableListProps> = function ({
   }, [itemsProp]);
 
   return (
-    <div className="relative flex h-full w-full flex-col gap-3 overflow-hidden">
+    <div className="relative flex h-full w-full flex-col gap-3">
       {transitions((style, item) => (
         <animated.div
           style={{

diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
@@ -191,7 +191,7 @@ const Home: NextPage = () => {
         <div className="grid grid-cols-1 items-stretch justify-stretch gap-6 lg:grid-cols-3">
           <Card
             header={
-              <div className=" flex flex-wrap items-center justify-between gap-5">
+              <div className="flex-wrap flex flex-col justify-between gap-3 2xl:flex-row 2xl:items-center">
                 <div>Latest Blocks</div>
                 <Button
                   variant="outline"
@@ -203,34 +203,28 @@ const Home: NextPage = () => {
             }
             emptyState="No blocks"
           >
-            <div className="h-[660px] sm:h-[630px]">
-              {latestBlocksLoading ? (
-                <div className="flex flex-col gap-4">
-                  {Array(LATEST_ITEMS_LENGTH)
-                    .fill(0)
-                    .map((_, i) => (
-                      <BlockCard className={CARD_HEIGHT} key={i} />
-                    ))}
-                </div>
-              ) : (
-                <SlidableList
-                  items={blocks?.map((b) => ({
-                    id: b.hash,
-                    element: (
-                      <BlockCard
-                        className={CARD_HEIGHT}
-                        block={b}
-                        key={b.hash}
-                      />
-                    ),
-                  }))}
-                />
-              )}
-            </div>
+            {latestBlocksLoading ? (
+              <div className="flex flex-col gap-4">
+                {Array(LATEST_ITEMS_LENGTH)
+                  .fill(0)
+                  .map((_, i) => (
+                    <BlockCard className={CARD_HEIGHT} key={i} />
+                  ))}
+              </div>
+            ) : (
+              <SlidableList
+                items={blocks?.map((b) => ({
+                  id: b.hash,
+                  element: (
+                    <BlockCard className={CARD_HEIGHT} block={b} key={b.hash} />
+                  ),
+                }))}
+              />
+            )}
           </Card>
           <Card
             header={
-              <div className="flex-warp flex items-center justify-between gap-5">
+              <div className="flex-wrap flex flex-col justify-between gap-3 2xl:flex-row 2xl:items-center">
                 <div>Latest Blob Transactions</div>
                 <Button
                   variant="outline"
@@ -243,48 +237,46 @@ const Home: NextPage = () => {
             }
             emptyState="No transactions"
           >
-            <div className="h-[630px]">
-              {latestBlocksLoading ? (
-                <div className="flex flex-col gap-3">
-                  {Array(LATEST_ITEMS_LENGTH)
-                    .fill(0)
-                    .map((_, i) => (
-                      <BlobTransactionCard
-                        className={CARD_HEIGHT}
-                        compact
-                        key={i}
-                      />
-                    ))}
-                </div>
-              ) : (
-                <SlidableList
-                  items={transactions.map((tx) => ({
-                    id: tx.hash,
-                    element: (
-                      <BlobTransactionCard
-                        className={CARD_HEIGHT}
-                        key={tx.hash}
-                        transaction={{
-                          from: tx.from,
-                          to: tx.to,
-                          hash: tx.hash,
-                          rollup: tx.rollup,
-                          blockTimestamp: tx.blockTimestamp,
-                          blobGasBaseFee: tx.blobGasBaseFee,
-                          blobGasMaxFee: tx.blobGasMaxFee,
-                        }}
-                        blobs={tx.blobs}
-                        compact
-                      />
-                    ),
-                  }))}
-                />
-              )}
-            </div>
+            {latestBlocksLoading ? (
+              <div className="flex flex-col gap-3">
+                {Array(LATEST_ITEMS_LENGTH)
+                  .fill(0)
+                  .map((_, i) => (
+                    <BlobTransactionCard
+                      className={CARD_HEIGHT}
+                      compact
+                      key={i}
+                    />
+                  ))}
+              </div>
+            ) : (
+              <SlidableList
+                items={transactions.map((tx) => ({
+                  id: tx.hash,
+                  element: (
+                    <BlobTransactionCard
+                      className={CARD_HEIGHT}
+                      key={tx.hash}
+                      transaction={{
+                        from: tx.from,
+                        to: tx.to,
+                        hash: tx.hash,
+                        rollup: tx.rollup,
+                        blockTimestamp: tx.blockTimestamp,
+                        blobGasBaseFee: tx.blobGasBaseFee,
+                        blobGasMaxFee: tx.blobGasMaxFee,
+                      }}
+                      blobs={tx.blobs}
+                      compact
+                    />
+                  ),
+                }))}
+              />
+            )}
           </Card>
           <Card
             header={
-              <div className="flex items-center justify-between gap-5">
+              <div className="flex-wrap flex flex-col justify-between gap-3 2xl:flex-row 2xl:items-center">
                 <div>Latest Blobs</div>
                 <Button
                   variant="outline"
@@ -296,36 +288,34 @@ const Home: NextPage = () => {
             }
             emptyState="No blobs"
           >
-            <div className="h-[650px] sm:h-[630px]">
-              {latestBlocksLoading ? (
-                <div className="flex flex-col gap-3">
-                  {Array(LATEST_ITEMS_LENGTH)
-                    .fill(0)
-                    .map((_, i) => (
-                      <BlobTransactionCard
-                        className={CARD_HEIGHT}
-                        compact
-                        key={i}
-                      />
-                    ))}
-                </div>
-              ) : (
-                <SlidableList
-                  items={blobs.map((b) => ({
-                    id: b.versionedHash,
-                    element: (
-                      <BlobCard
-                        blob={b}
-                        transactions={[b.tx]}
-                        compact
-                        key={b.versionedHash}
-                        className={CARD_HEIGHT}
-                      />
-                    ),
-                  }))}
-                />
-              )}
-            </div>
+            {latestBlocksLoading ? (
+              <div className="flex flex-col gap-3">
+                {Array(LATEST_ITEMS_LENGTH)
+                  .fill(0)
+                  .map((_, i) => (
+                    <BlobTransactionCard
+                      className={CARD_HEIGHT}
+                      compact
+                      key={i}
+                    />
+                  ))}
+              </div>
+            ) : (
+              <SlidableList
+                items={blobs.map((b) => ({
+                  id: b.versionedHash,
+                  element: (
+                    <BlobCard
+                      blob={b}
+                      transactions={[b.tx]}
+                      compact
+                      key={b.versionedHash}
+                      className={CARD_HEIGHT}
+                    />
+                  ),
+                }))}
+              />
+            )}
           </Card>
         </div>
       </div>