Merge pull request #42 from line/qr-margin-top

Make the spacing between the qrCode and URL boxes wider

Author: kazuma0129

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;
-  }
-}
-

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>