From 339af88a5b25198e254b5bcc672a019ddce323b5 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 5 Oct 2021 16:40:10 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Beautifying=20the=20DnD=20grid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/ComicDetail.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index a9bfffd..6239df6 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -246,11 +246,24 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
           <button className="button is-warning" onClick={unpackComicArchive}>
             Unpack comic archive
           </button>
-          {!isEmpty(extractedComicBookArchive) ? (
-            <DnD data={extractedComicBookArchive} />
-          ) : (
-            "..."
-          )}
+          <div className="columns">
+            <div className="mt-4">
+              {!isEmpty(extractedComicBookArchive) ? (
+                <DnD data={extractedComicBookArchive} />
+              ) : (
+                "..."
+              )}
+            </div>
+            {!isEmpty(extractedComicBookArchive) ? (
+              <div className="column">
+                <div className="card">
+                  <div className="card-content">
+                    {extractedComicBookArchive.length} pages
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </div>
         </div>
       ),
     },