🔧 Beautifying the DnD grid

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) ? (
+          <div className="columns">
-            <DnD data={extractedComicBookArchive} />
+            <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>
       ),
     },