refactor: Reorganized the report header layout in ReportContent.tsx and refined the ShareButton component's layout, button padding, and expiration date display.

Author: 403errors

src/app/report/[scan_id]/ReportContent.tsx

@@ -196,41 +196,19 @@ export function ReportContent({
     return (
         <div className="min-h-screen bg-black text-white p-4 md:p-8 selection:bg-indigo-500/30">
             <div className="max-w-4xl mx-auto space-y-8" ref={reportRef}>
-                <div className="space-y-4">
-                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-                        <div className="flex items-center gap-2 text-indigo-400">
-                            <Shield className="w-6 h-6" />
-                            <h1 className="text-xl font-medium tracking-tight">
-                                {isSharedView ? "RepoMind Shared Security Report" : "RepoMind Security Report"}
-                            </h1>
-                        </div>
-                        <div className="flex flex-wrap items-center gap-2 print:hidden">
-                            <button
-                                onClick={() => router.push(`/chat?q=${encodeURIComponent(`${scan.owner}/${scan.repo}`)}`)}
-                                className="flex items-center justify-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-white rounded-xl text-sm font-medium transition-all border border-white/5 whitespace-nowrap"
-                            >
-                                <MessageCircle className="w-4 h-4" />
-                                Open Repo Chat
-                            </button>
-                            {canShareReport && (
-                                <ShareButton
-                                    scanId={scan.id}
-                                    canGenerateOutreach={canGenerateOutreach}
-                                    shareMode={shareMode}
-                                    reportExpiresAt={reportExpiresAt}
-                                />
-                            )}
-                        </div>
-                    </div>
-
-                    <div className="p-6 bg-zinc-900 border border-white/10 rounded-2xl shadow-xl flex flex-col md:flex-row md:items-center justify-between gap-4">
-                        <div>
-                            <div className="flex items-center gap-2 mb-1">
-                                <h2 className="text-2xl font-semibold text-white">
-                                    <span className="text-zinc-500 font-normal">{scan.owner} / </span>
-                                    {scan.repo}
-                                </h2>
+                <div className="p-6 bg-zinc-900 border border-white/10 rounded-2xl shadow-xl">
+                    <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-5">
+                        <div className="space-y-3">
+                            <div className="flex items-center gap-2 text-indigo-400">
+                                <Shield className="w-5 h-5" />
+                                <span className="text-sm font-medium tracking-wide uppercase">
+                                    {isSharedView ? "Shared Security Report" : "Security Report"}
+                                </span>
                             </div>
+                            <h1 className="text-2xl md:text-3xl font-semibold text-white tracking-tight">
+                                <span className="text-zinc-500 font-normal">{scan.owner} / </span>
+                                {scan.repo}
+                            </h1>
                             <div className="text-sm text-zinc-400 flex flex-wrap items-center gap-3">
                                 <span>Scanned on {date.toLocaleDateString()} at {date.toLocaleTimeString()}</span>
                                 <span className="hidden sm:inline">•</span>
@@ -244,11 +222,27 @@ export function ReportContent({
                                 )}
                             </div>
                         </div>
-                        <div className="print:hidden md:self-start">
+                        <div className="print:hidden flex flex-col gap-3 lg:items-end">
+                            <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+                                <button
+                                    onClick={() => router.push(`/chat?q=${encodeURIComponent(`${scan.owner}/${scan.repo}`)}`)}
+                                    className="flex items-center justify-center gap-2 px-3.5 py-2 bg-zinc-800 hover:bg-zinc-700 text-white rounded-lg text-sm font-medium transition-all border border-white/10 whitespace-nowrap"
+                                >
+                                    <MessageCircle className="w-4 h-4" />
+                                    Open Repo Chat
+                                </button>
+                                {canShareReport && (
+                                    <ShareButton
+                                        scanId={scan.id}
+                                        canGenerateOutreach={canGenerateOutreach}
+                                        shareMode={shareMode}
+                                        reportExpiresAt={reportExpiresAt}
+                                    />
+                                )}
+                            </div>
                             <ExportButtons scan={scan} />
                         </div>
                     </div>
-
                 </div>
 
                 <div className="grid grid-cols-2 md:grid-cols-5 gap-4">

src/app/report/[scan_id]/ShareButton.tsx

@@ -142,11 +142,11 @@ export default function ShareButton({
     };
 
     return (
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
             <button
                 onClick={handleShare}
                 disabled={isSharing}
-                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-500 hover:bg-indigo-600 rounded-lg transition-all shadow-md hover:shadow-lg active:scale-95 disabled:opacity-60"
+                className="flex items-center gap-2 px-3.5 py-2 text-sm font-medium text-white bg-indigo-500 hover:bg-indigo-600 rounded-lg transition-all shadow-md hover:shadow-lg active:scale-95 disabled:opacity-60"
                 title={`Report expires on ${expiryLabel}`}
             >
                 <Share2 className="w-4 h-4" />
@@ -156,7 +156,7 @@ export default function ShareButton({
                 <button
                     onClick={handleCopyOutreachPack}
                     disabled={isGeneratingOutreach}
-                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-zinc-200 bg-zinc-800 hover:bg-zinc-700 rounded-lg transition-all border border-white/10 disabled:opacity-60"
+                    className="flex items-center gap-2 px-3.5 py-2 text-sm font-medium text-zinc-200 bg-zinc-800 hover:bg-zinc-700 rounded-lg transition-all border border-white/10 disabled:opacity-60"
                 >
                     <Megaphone className="w-4 h-4" />
                     {isGeneratingOutreach ? "Building..." : "Outreach Pack"}
@@ -182,9 +182,11 @@ export default function ShareButton({
                     Copy Outreach
                 </button>
             )}
-            <span className="text-xs text-zinc-400 border border-white/10 rounded-full px-2.5 py-1">
-                Expires on {expiryLabel}
-            </span>
+            {activeLink && (
+                <span className="text-xs text-zinc-400 border border-white/10 rounded-full px-2.5 py-1">
+                    Expires on {new Date(activeLink.expiresAt).toLocaleDateString()}
+                </span>
+            )}
         </div>
     );
 }