feat(frontend): stabilize scan layout

Author: tranhoangpich

apps/frontend/src/app/globals.css

@@ -238,6 +238,9 @@ body {
   backdrop-filter: blur(12px);
   display: grid;
   gap: 18px;
+  width: 100%;
+  max-width: 520px;
+  justify-self: end;
 }
 
 .card-header {
@@ -269,12 +272,20 @@ body {
   border: 2px dashed rgba(140, 82, 255, 0.25);
   border-radius: 20px;
   padding: 24px;
-  display: grid;
-  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-items: center;
   text-align: center;
   background: rgba(140, 82, 255, 0.06);
 }
 
+.dropzone-content {
+  display: grid;
+  gap: 8px;
+  justify-items: center;
+}
+
 .dropzone span {
   display: block;
   font-size: 12px;
@@ -295,6 +306,10 @@ body {
   gap: 8px;
 }
 
+.upload-actions .primary-button {
+  width: 100%;
+}
+
 .upload-actions button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -333,6 +348,12 @@ body {
 .result-header {
   font-weight: 600;
   margin-bottom: 8px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.result-card summary::-webkit-details-marker {
+  display: none;
 }
 
 .card-footer {
@@ -392,4 +413,8 @@ body {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  .hero-card {
+    justify-self: stretch;
+  }
 }

apps/frontend/src/app/page.tsx

@@ -145,8 +145,8 @@ export default function Home() {
               <span className="chip">Profile: Full</span>
             </div>
             <div className="dropzone">
-              <div className="drop-icon">⬆</div>
-              <div>
+              <div className="dropzone-content">
+                <div className="drop-icon">⬆</div>
                 <strong>Drag &amp; drop your bundle</strong>
                 <span>.ipa or .app, up to 1GB</span>
               </div>
@@ -156,6 +156,7 @@ export default function Home() {
                 type="file"
                 accept=".ipa,.app"
                 onChange={handleFileChange}
+                hidden
               />
               <button className="secondary-button" type="button" onClick={handleChooseFile}>
                 Choose file
@@ -176,10 +177,10 @@ export default function Home() {
             </div>
             {status ? <div className="status-pill">{status}</div> : null}
             {result ? (
-              <div className="result-card">
-                <div className="result-header">Latest report</div>
+              <details className="result-card" open>
+                <summary className="result-header">Latest report</summary>
                 <pre>{result}</pre>
-              </div>
+              </details>
             ) : null}
             <div className="card-footer">
               <div>