From 8f87ddd744f721de17c518223ad7265a0545f452 Mon Sep 17 00:00:00 2001
From: Praizfotos <praizbusinesshub1@gmail.com>
Date: Tue, 2 Jun 2026 11:03:56 +0000
Subject: [PATCH] fix: mobile-first layout for Verification Page

- Stack input and button vertically with flex column form layout
- Make input and button full-width with box-sizing: border-box
- Switch VerificationBadge from inline-flex to full-width flex
- Consolidate aria-live regions to prevent layout shift on result load
- Add touch-action and larger tap target for one-handed mobile use

Closes #232
---
 frontend/src/components/VerificationBadge.jsx |  3 +-
 frontend/src/pages/VerifyPage.jsx             | 66 +++++++++----------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/VerificationBadge.jsx b/frontend/src/components/VerificationBadge.jsx
index f74773f..3cf02be 100644
--- a/frontend/src/components/VerificationBadge.jsx
+++ b/frontend/src/components/VerificationBadge.jsx
@@ -62,11 +62,12 @@ export default function VerificationBadge({ status, vaccinated, recordCount = 0
       role="status"
       aria-label={label}
       style={{
-        display: 'inline-flex', alignItems: 'center', gap: '0.5rem',
+        display: 'flex', alignItems: 'center', gap: '0.5rem',
         padding: '0.375rem 0.875rem', minHeight: '2rem', borderRadius: '12px',
         backgroundColor: bg, color: '#ffffff',
         fontSize: '0.875rem', fontWeight: '600',
         transition: 'background-color 0.2s ease', cursor: 'default',
+        boxSizing: 'border-box', width: '100%',
       }}
     >
       <span style={{ display: 'flex', alignItems: 'center' }}>{ICONS[key]}</span>
diff --git a/frontend/src/pages/VerifyPage.jsx b/frontend/src/pages/VerifyPage.jsx
index 760b349..fdf60bb 100644
--- a/frontend/src/pages/VerifyPage.jsx
+++ b/frontend/src/pages/VerifyPage.jsx
@@ -8,9 +8,10 @@ import { useToast } from '../hooks/useToast';
 import FeedbackButton from '../components/FeedbackButton';
 
 const styles = {
-  page: { maxWidth: 600, margin: '2rem auto', padding: '0 1rem' },
-  input: { padding: '0.6rem 0.75rem', background: 'var(--input-bg)', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text)', fontSize: '1rem', width: '100%', boxSizing: 'border-box', minHeight: '44px' },
-  btn: { padding: '0.7rem 1.5rem', background: 'var(--btn-primary)', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', marginTop: '0.75rem', minHeight: '44px', cursor: 'pointer' },
+  page: { maxWidth: 600, margin: '2rem auto', padding: '0 1rem', boxSizing: 'border-box' },
+  form: { display: 'flex', flexDirection: 'column', gap: '0.75rem' },
+  input: { padding: '0.6rem 0.75rem', background: 'var(--input-bg)', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text)', fontSize: '1rem', width: '100%', boxSizing: 'border-box', minWidth: 0, minHeight: '44px' },
+  btn: { padding: '0.7rem 1.5rem', background: 'var(--btn-primary)', color: '#fff', border: 'none', borderRadius: 8, fontSize: '1rem', width: '100%', minHeight: '44px', cursor: 'pointer', touchAction: 'manipulation' },
 };
 
 export default function VerifyPage() {
@@ -47,7 +48,7 @@ export default function VerifyPage() {
   return (
     <div style={styles.page}>
       <h2 style={{ marginBottom: '1.5rem', color: 'var(--text)' }}>Verify Vaccination Status</h2>
-      <form onSubmit={(e) => e.preventDefault()}>
+      <form onSubmit={(e) => e.preventDefault()} style={styles.form}>
         <label htmlFor="wallet-input" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>
           Stellar wallet address
         </label>
@@ -78,36 +79,35 @@ export default function VerifyPage() {
         </FeedbackButton>
       </form>
 
-      <div aria-live="polite" aria-atomic="true">
-        {error && <p style={{ color: 'var(--color-error)', marginTop: '1rem' }} role="alert">Error: {error}</p>}
+      <div style={{ marginTop: '1.5rem' }} aria-live="polite" aria-atomic="true">
+        {error && <p style={{ color: 'var(--color-error)', margin: 0 }} role="alert">Error: {error}</p>}
+        {result && (
+          <>
+            <VerificationBadge vaccinated={result.vaccinated} recordCount={result.record_count} />
+            <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginTop: '1rem', wordBreak: 'break-all', display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '0.25rem' }}>
+              Wallet: {wallet}
+              <CopyButton text={wallet} label="wallet address" />
+            </p>
+            <div style={{ marginTop: '1rem' }}>
+              {result.records && result.records.length > 0 ? (
+                result.records.map((r) => <NFTCard key={r.token_id} record={r} />)
+              ) : (
+                <EmptyState
+                  icon="🔍"
+                  heading="No Records Found"
+                  message="This wallet address has no vaccination records. The wallet may not be registered or no vaccinations have been issued yet."
+                  ctaText="Try Another Address"
+                  ctaAction={() => {
+                    setWallet('');
+                    setResult(null);
+                    document.getElementById('wallet-input')?.focus();
+                  }}
+                />
+              )}
+            </div>
+          </>
+        )}
       </div>
-
-      {result && (
-        <div style={{ marginTop: '1.5rem' }} aria-live="polite">
-          <VerificationBadge vaccinated={result.vaccinated} recordCount={result.record_count} />
-          <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginTop: '1rem', wordBreak: 'break-all', display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '0.25rem' }}>
-            Wallet: {wallet}
-            <CopyButton text={wallet} label="wallet address" />
-          </p>
-          <div style={{ marginTop: '1rem' }}>
-            {result.records && result.records.length > 0 ? (
-              result.records.map((r) => <NFTCard key={r.token_id} record={r} />)
-            ) : (
-              <EmptyState
-                icon="🔍"
-                heading="No Records Found"
-                message="This wallet address has no vaccination records. The wallet may not be registered or no vaccinations have been issued yet."
-                ctaText="Try Another Address"
-                ctaAction={() => {
-                  setWallet('');
-                  setResult(null);
-                  document.getElementById('wallet-input')?.focus();
-                }}
-              />
-            )}
-          </div>
-        </div>
-      )}
     </div>
   );
 }