From 38c49fc6e0a2ea450f2a9fd6bfe097a97d9af712 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Tue, 19 May 2026 12:17:30 +0900
Subject: [PATCH] Improve amiibo mobile grid layout

---
 index.html | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 0491ff6..2498889 100644
--- a/index.html
+++ b/index.html
@@ -176,6 +176,7 @@
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 14px;
+        width: 100%;
         max-width: 970px;
       }
 
@@ -209,12 +210,14 @@
         margin: 0;
         font-size: 1rem;
         line-height: 1.35;
+        overflow-wrap: anywhere;
       }
 
       .series {
         color: #64748b;
         font-size: 0.82rem;
         line-height: 1.35;
+        overflow-wrap: anywhere;
       }
 
       .price-row {
@@ -261,6 +264,7 @@
         color: #475569;
         font-size: 0.84rem;
         line-height: 1.45;
+        overflow-wrap: anywhere;
       }
 
       .meta strong {
@@ -293,6 +297,10 @@
         .filters {
           position: static;
         }
+
+        .grid {
+          max-width: none;
+        }
       }
 
       @media (max-width: 520px) {
@@ -300,13 +308,28 @@
           padding-inline: 12px;
         }
 
+        .result-head {
+          align-items: flex-start;
+          flex-direction: column;
+        }
+
+        .grid {
+          grid-template-columns: minmax(0, 1fr);
+        }
+
         .card {
-          grid-template-columns: 72px minmax(0, 1fr);
+          grid-template-columns: 68px minmax(0, 1fr);
+          gap: 10px;
+          padding: 10px;
         }
 
         .card img {
-          width: 72px;
-          height: 104px;
+          width: 68px;
+          height: 96px;
+        }
+
+        .price {
+          font-size: 1.1rem;
         }
       }
     </style>