Adjust QR preview layout for mobile and desktop (#8)

On mobile, the QR code preview will now be shown first and then the form to edit the QR code details.

Author: rodrigogiraoserrao

qr.html

@@ -34,16 +34,17 @@
         }
 
         .layout {
-            display: grid;
+            display: flex;
+            flex-direction: column;
             gap: clamp(1.5rem, 3vw, 2.5rem);
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         }
 
         form {
             display: flex;
             flex-direction: column;
             gap: clamp(1rem, 2.5vw, 1.5rem);
             padding: clamp(1.1rem, 2vw, 1.75rem);
+            order: 2;
         }
 
         .form-section {
@@ -94,6 +95,7 @@
             gap: 1rem;
             align-items: center;
             padding: clamp(1.1rem, 2vw, 1.75rem);
+            order: 1;
         }
 
         .preview-wrapper {
@@ -157,6 +159,23 @@
                 grid-template-columns: 1fr 1fr;
             }
         }
+
+        @media (min-width: 920px) {
+            .layout {
+                flex-direction: row;
+                align-items: flex-start;
+            }
+
+            form {
+                order: 1;
+                flex: 1;
+            }
+
+            .preview-card {
+                order: 2;
+                flex: 0 0 auto;
+            }
+        }
     </style>
 </head>