feat: Update mobile layout

Reviewed-on: #1

server.py

@@ -153,6 +153,7 @@ def hip02(domain: str):
                 "success": True,
                 "address": hip2_record,
                 "method": "hip02",
+                "name": domain,
             }
         )
 
@@ -163,11 +164,13 @@ def hip02(domain: str):
                 "success": True,
                 "address": wallet_record,
                 "method": "wallet_txt",
+                "name": domain,
             }
         )
     return jsonify(
         {
             "success": False,
+            "name": domain,
             "error": "No HIP02 or WALLET record found for this domain",
         }
     )
@@ -185,4 +188,4 @@ def not_found(e):
 
 # endregion
 if __name__ == "__main__":
-    app.run(debug=True, port=5000, host="127.0.0.1")
+    app.run(debug=True, port=5000, host="0.0.0.0")

templates/assets/css/index.css

@@ -109,6 +109,7 @@ section {
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     opacity: 0; /* Start hidden for animation */
+    min-width: 0; /* Prevent grid overflow */
 }
 
 .card:hover {
@@ -159,7 +160,7 @@ section {
 /* Info Grid */
 .info-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
 }
 
@@ -168,6 +169,7 @@ section {
     background: rgba(15, 23, 42, 0.4);
     border-radius: 12px;
     border: 1px solid var(--card-border);
+    min-width: 0; /* Prevent grid overflow */
 }
 
 .info-item.no-border {
@@ -265,6 +267,7 @@ section {
     transition: all 0.2s ease;
     animation: staggerFade 0.4s ease forwards;
     cursor: pointer;
+    min-width: 0; /* Prevent flex overflow */
 }
 
 .tx-item:hover {
@@ -282,6 +285,7 @@ section {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    min-width: 0; /* Prevent flex overflow */
 }
 
 .tx-view-btn {
@@ -388,6 +392,7 @@ section {
     white-space: pre-wrap;
     word-wrap: break-word;
     margin: 0;
+    word-break: break-all;
 }
 
 /* Transaction Details */
@@ -418,6 +423,7 @@ section {
     border: 1px solid var(--card-border);
     border-radius: 8px;
     padding: 1rem;
+    min-width: 0; /* Prevent overflow */
 }
 
 .tx-io-header {
@@ -611,6 +617,7 @@ section {
     font-size: 0.9rem;
     white-space: pre-wrap;
     word-wrap: break-word;
+    word-break: break-all;
 }
 
 .result-box .error {
@@ -622,6 +629,16 @@ section {
     border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
+.success-message {
+    color: var(--success-color);
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    padding: 1rem;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+    word-break: break-all;
+}
+
 /* Scrollbar */
 .result-box::-webkit-scrollbar {
     width: 8px;
@@ -700,6 +717,26 @@ a:hover {
         padding: 0.5rem;
         font-size: 0.85rem;
     }
+
+    .info-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 480px) {
+    .card {
+        padding: 1rem;
+    }
+    
+    .container {
+        padding: 0 1rem;
+    }
+
+    .tx-io-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
 }
 
 /* Loading Animation */

templates/index.html

@@ -1055,7 +1055,7 @@
                     const note = document.createElement('div');
                     note.className = 'success-message';
                     note.style.marginBottom = '1rem';
-                    note.innerHTML = `Resolved alias <strong>${hip02Result.name || address}</strong> to address`;
+                    note.innerHTML = `Resolved <strong>${hip02Result.name || address}</strong> to address <br><span class="mono">${address}</span>`;
                     resultElement.parentNode.insertBefore(note, resultElement);
                     setTimeout(() => note.remove(), 5000);
                 } else {