Pending reg message fix

src/components/innovision/AdminDashboard.tsx

@@ -753,20 +753,36 @@ export default function AdminDashboard({
         </div>
       )}
 
-      {/* Top Bar */}
+      {/* Top Bar. The dialog clips overflow, so tabs that don't fit must wrap or scroll, never run off-screen (that hid
+          OPEN SCANNER on phones). Wide screens wrap the tabs; below 860px they get their own row that scrolls sideways,
+          with the scanner link first. */}
+      <style>{`
+        .adm-nav > * { flex-shrink: 0; white-space: nowrap; }
+        @media (max-width: 860px) {
+          .adm-head { flex-wrap: wrap; padding-top: 12px !important; padding-bottom: 0 !important; }
+          .adm-left { display: contents !important; }
+          .adm-brand { flex: 1 1 0 !important; }
+          .adm-title { font-size: 15px !important; }
+          .adm-nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: thin; margin: 0 calc(-1 * clamp(16px, 3vw, 40px)) !important; padding: 0 clamp(16px, 3vw, 40px) 2px; scroll-padding-inline: clamp(16px, 3vw, 40px); }
+          .adm-nav > * { min-height: 44px; }
+          .adm-scan { order: -1; }
+        }
+      `}</style>
       <header
+        className="adm-head"
         style={{
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
+          gap: '12px 16px',
           padding: '18px clamp(16px, 3vw, 40px)',
           borderBottom: '1px solid rgba(236,232,223,0.12)',
           background: 'rgba(16,15,14,0.95)',
           backdropFilter: 'blur(10px)',
         }}
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <div className="adm-left" style={{ display: 'flex', alignItems: 'center', gap: '16px', flex: '1 1 auto', minWidth: 0 }}>
+          <div className="adm-brand" style={{ display: 'flex', alignItems: 'center', gap: '10px', minWidth: 0, flexShrink: 0 }}>
             <span
               style={{
                 width: '10px',
@@ -777,19 +793,23 @@ export default function AdminDashboard({
               }}
             />
             <span
+              className="adm-title"
               style={{
                 fontFamily: 'var(--font-display)',
                 fontWeight: 400,
                 fontSize: 'clamp(18px, 1.8vw, 22px)',
                 letterSpacing: '.06em',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
               }}
             >
               COMMAND CENTER · {currentUser.role.toUpperCase()}
             </span>
           </div>
 
           {/* Navigation Tabs */}
-          <nav style={{ display: 'flex', gap: '8px', marginLeft: '24px' }}>
+          <nav className="adm-nav" aria-label="Dashboard sections" style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '24px', minWidth: 0 }}>
             {canReviewRegistrations && (
             <button
               id="tab-registrations"
@@ -899,6 +919,7 @@ export default function AdminDashboard({
             {canReviewRegistrations && (
               <a
                 id="open-scanner-link"
+                className="adm-scan"
                 href="/admin/scan"
                 target="_blank"
                 rel="noopener"
@@ -928,6 +949,8 @@ export default function AdminDashboard({
             alignItems: 'center',
             gap: '8px',
             padding: '8px 16px',
+            flexShrink: 0,
+            whiteSpace: 'nowrap',
             border: '1px solid rgba(236,232,223,0.24)',
             background: 'transparent',
             color: '#ECE8DF',

src/components/innovision/AuthOverlay.tsx

@@ -5,6 +5,7 @@
 import React, { useState } from 'react';
 import type { V } from './types';
 import { Logo } from './icons';
+import EntryPassCard from './EntryPassCard';
 
 export default function AuthOverlay({ v }: { v: V }) {
   const [userCollege, setUserCollege] = useState<string | null>(null);
@@ -278,6 +279,7 @@ export default function AuthOverlay({ v }: { v: V }) {
                           <span style={{ position: "absolute", inset: "0", overflow: "hidden", pointerEvents: "none" }}><span data-scan="pass" style={{ position: "absolute", inset: "0", opacity: "0" }}><span style={{ position: "absolute", left: "0", right: "0", top: "-64px", height: "64px", background: "linear-gradient(rgba(220,183,106,0),rgba(220,183,106,.3))" }}></span><span style={{ position: "absolute", left: "0", right: "0", top: "0", height: "2px", background: "#F3DFA8" }}></span></span></span>
                         </div>
                       </div>
+                      {v.passQr ? <EntryPassCard key={`${v.passId}-${v.passStatus}`} /> : null}
                       <p data-s-in="" style={{ margin: "0", fontSize: "15px", lineHeight: "1.55", color: "rgba(236,232,223,.78)", textWrap: "pretty", overflowWrap: "anywhere" }}>{v.passNote}</p>
                       <div data-s-in="" style={{ display: "flex", flexWrap: "wrap", gap: "12px" }}>
                         <a href="#/worlds/takeoff" onClick={v.exploreFromPass} onMouseEnter={v.hover} style={{ flex: "1", display: "inline-flex", alignItems: "center", justifyContent: "center", minHeight: "58px", padding: "0 28px", textDecoration: "none", fontWeight: "700", fontSize: "15px", letterSpacing: ".08em", whiteSpace: "nowrap", color: "#141312", background: "#ECE8DF", clipPath: "polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)", transition: "background-color .4s" }} style-hover="background:oklch(0.8 0.12 85)"><span data-scr="">EXPLORE THE WORLDS</span></a>

src/components/innovision/Innovision.tsx

@@ -2514,7 +2514,13 @@ export class Innovision extends Component<Props, State> {
       submitLbl: s.busyLbl || (am === 'login' ? 'LOG IN' : ['CONTINUE TO PAYMENT', "I'VE PAID", 'SUBMIT REGISTRATION'][st] || 'CONTINUE'),
       busy: !!s.busyLbl, busyO: s.busyLbl ? .72 : 1,
       passName: P.name || '', passCollege: P.college || '', passCollegeD: P.college ? 'block' : 'none', passId: P.id || P.registration_id || '', passStatus: P.status ? P.status.toUpperCase() : 'PAYMENT UNDER REVIEW',
-      passNote: P.status === 'CONFIRMED' ? 'Show this pass at the registration desk when you arrive at NIT Rourkela.' : (P.status === 'REJECTED' ? 'Your registration was declined. Please contact the helpdesk.' : 'We will email ' + (P.email || 'you') + ' once your payment is verified by the IT-Team.'),
+      // Mounted only while the pass is open, so the QR is fetched then and not on every page load.
+      passQr: !!s.auth && am === 'pass' && !!s.user,
+      passNote: P.status === 'CONFIRMED'
+        ? 'You are confirmed. Download your entry pass now and show the QR with your college ID at the registration desk, so entry at NIT Rourkela is quick.'
+        : P.status === 'REJECTED'
+        ? 'Your registration could not be approved. Please contact the helpdesk.'
+        : 'Your payment is being verified and your registration will be approved soon. Keep checking MY PASS: once approved, your entry QR appears here, ready to download.',
       exploreFromPass: this.exploreFromPass,
       googleLogin: this.googleLogin, gBusy: s.gBusy, gErr: s.gErr, gLbl: s.gBusy ? 'Waiting for Google…' : 'Continue with Google',
       gNote: reg && st === 0 && s.user ? 'Signed in as ' + s.user.email + (isInternal ? ' (NIT RKL Student)' : '') + '.' : '',

src/components/innovision/ProfileOverlay.tsx

@@ -403,9 +403,9 @@ export default function ProfileOverlay({
               <div>
                 <p style={{ margin: '0 0 16px', fontSize: '14px', lineHeight: 1.5, color: 'rgba(236,232,223,0.8)' }}>
                   {registration.status === 'confirmed'
-                    ? 'Your registration has been approved. Your boarding pass is verified for entry at the gate.'
+                    ? 'Your registration is confirmed. Download your entry pass below and show the QR with your college ID at the registration desk.'
                     : registration.status === 'pending'
-                    ? 'Your registration details & payment proof are under review by the Registration Team. Your pass will unlock upon confirmation.'
+                    ? 'Your payment is being verified and your registration will be approved soon. Keep checking MY PASS: your entry QR will appear there once approved.'
                     : 'Your registration could not be verified. Please visit the helpdesk or contact the event administrators.'}
                 </p>