ui: make nft drops larger with mint button

Author: Adrijan-Petek

app/ClientPage.tsx

@@ -1356,38 +1356,38 @@ export default function ClientPage() {
               <span className={styles.pill}>Owned</span>
             </div>
             <div className={styles.stack}>
-              <div className={styles.dropCard}>
-                <div className={styles.dropLeft}>
-                  <div className={styles.dropThumb}>
+              <div className={styles.dropGrid}>
+                <div className={styles.dropTile}>
+                  <div className={styles.dropTileThumb}>
                     <Image
                       src={INFERNO_PULSE.localImagePath}
                       alt={INFERNO_PULSE.name}
-                      width={96}
-                      height={96}
+                      width={520}
+                      height={520}
                       unoptimized
-                      style={{ width: "100%", height: "100%", objectFit: "contain" }}
+                      style={{
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "contain",
+                      }}
                     />
                   </div>
-                  <div className={styles.dropMeta}>
-                    <div className={styles.dropTitle}>{INFERNO_PULSE.name}</div>
-                    <div className={styles.dropLine}>
+                  <div className={styles.dropTileBody}>
+                    <div className={styles.dropTileTitle}>{INFERNO_PULSE.name}</div>
+                    <div className={styles.dropTileLine}>
                       Kind <code>u{INFERNO_PULSE.kind}</code>
                       {" · "}
                       {infernoFeeUstx === null
                         ? "Price: —"
                         : `Price: ${(infernoFeeUstx / 1_000_000).toFixed(2)} STX`}
                     </div>
-                    <div className={styles.dropLine}>
+                    <div className={styles.dropTileLine}>
                       Metadata:{" "}
-                      <span>
-                        {infernoUri ? "Configured" : "Not configured"}
-                      </span>
+                      <span>{infernoUri ? "Configured" : "Not configured"}</span>
                     </div>
                   </div>
-                </div>
-                <div className={styles.dropRight}>
                   <button
-                    className={styles.button}
+                    className={`${styles.button} ${styles.dropTileButton}`}
                     onClick={mintInfernoPulse}
                     disabled={!address || !infernoUri}
                     type="button"

app/page.module.css

@@ -145,7 +145,7 @@
 
 .panelGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: 1fr;
   gap: 24px;
 }
 
@@ -408,6 +408,81 @@
   background: rgba(0, 0, 0, 0.02);
 }
 
+.dropGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.dropTile {
+  padding: 14px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
+[data-theme="light"] .dropTile {
+  border-color: rgba(0, 0, 0, 0.12);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.dropTileThumb {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+}
+
+[data-theme="light"] .dropTileThumb {
+  border-color: rgba(0, 0, 0, 0.12);
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.dropTileBody {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.dropTileTitle {
+  font-size: 14px;
+  font-weight: 900;
+  color: var(--text);
+}
+
+.dropTileLine {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+.dropTileLine span {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.dropTileLine code {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+.dropTileButton {
+  width: 100%;
+}
+
 .dropLeft {
   display: flex;
   gap: 12px;
@@ -765,6 +840,14 @@
     grid-template-columns: 1fr;
   }
 
+  .nftGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .dropGrid {
+    grid-template-columns: 1fr;
+  }
+
   .statChip {
     min-width: 0;
     flex: 1 1 140px;