feat: Update mobile layout

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 */