From c7fc9a152ccafed8f68364a1fae7af7d2fc6b683 Mon Sep 17 00:00:00 2001
From: KazumaOhashi <kazuma0129.work@gmail.com>
Date: Fri, 31 Jan 2025 14:50:18 +0900
Subject: [PATCH] Make the spacing between the qrCode and URL boxes wider

---
 src/App.module.css | 16 +++++-----------
 src/App.tsx        |  6 ++++--
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/App.module.css b/src/App.module.css
index 70d89be..4c11f74 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -8,14 +8,17 @@ body {
   margin: 20px auto;
 }
 
-.liffIdBox {
+.appInfo {
   margin: 40px 0;
-  width: 400px;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
+.liffIdBox {
+  max-width: 400px;
+}
+
 .qrCode {
   max-width: 128px;
   height: auto;
@@ -32,12 +35,3 @@ body {
     padding: 0 15px;
   }
 }
-
-
-@media only screen and (max-width: 480px) {
-  .liffIdBox {
-    width: auto;
-    display: block;
-  }
-}
-
diff --git a/src/App.tsx b/src/App.tsx
index 4335db1..4c6b273 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,8 +29,10 @@ function App() {
             This “LINE MINI App Playground” is available only in Japan.
           </div>
         ) : null}
-        <div className={styles.liffIdBox}>
-          <Input readonly value={`URL: ${appUrl}`} />
+        <div className={styles.appInfo}>
+          <div className={styles.liffIdBox}>
+            <Input readonly value={`URL: ${appUrl}`} />
+          </div>
           <img src={QR_IMG_MAP[filter]} className={styles.qrCode} />
         </div>
         <h1>Client APIs</h1>