From 4a2182ce2a4ff6475fad47bda7d6e127613a07cb Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Thu, 5 Mar 2026 12:54:55 +0000
Subject: [PATCH] Fix Proof Detail page responsive layout and button states

- Add min-w-[900px] to root container so content scrolls horizontally below 900px instead of being crushed
- Change grid breakpoint from lg to xl so 3-column layout only fires at 1280px
- Add min-w-0 + truncate to proof title to prevent clipping at narrow widths
- Add flex-wrap to buttons row so buttons wrap rather than overflow
- Add shrink-0/whitespace-nowrap to all action buttons to prevent compression
- Improve button interaction states with hover:shadow-sm, active:scale-95, and transition-all

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/App.tsx                  |  2 +-
 frontend/components/Campaigns.tsx | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/App.tsx b/frontend/App.tsx
index a1dbd34..897063f 100755
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -961,7 +961,7 @@ const AppContent: React.FC<{ msalInstance: any }> = ({ msalInstance }) => {
   const userInfo = getUserInfo(msalInstance);
 
   return (
-    <div className={`flex h-screen ${mainBgColor} font-sans text-gray-800 overflow-hidden`}>
+    <div className={`flex h-screen ${mainBgColor} font-sans text-gray-800 overflow-hidden min-w-[900px]`}>
       <Sidebar
         activeItem={currentView}
         onNavigate={(view) => handleNavigate(view as View)}
diff --git a/frontend/components/Campaigns.tsx b/frontend/components/Campaigns.tsx
index ffa56aa..dc25dd4 100755
--- a/frontend/components/Campaigns.tsx
+++ b/frontend/components/Campaigns.tsx
@@ -1682,8 +1682,8 @@ const ProofDetailView: React.FC<{
                     >
                         <ArrowLeftIcon className="h-6 w-6" />
                     </button>
-                    <div>
-                        <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black">{proof.proofName}</h1>
+                    <div className="min-w-0">
+                        <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black truncate" title={proof.proofName}>{proof.proofName}</h1>
                         <div className="flex items-center gap-2 mt-2 text-sm text-oliver-black/60 font-medium">
                             <span>{proof.channel}</span>
                             <span className="text-grey-300">&bull;</span>
@@ -1699,7 +1699,7 @@ const ProofDetailView: React.FC<{
                 </div>
             </header>
 
-             <div className="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-x-12">
+             <div className="max-w-screen-2xl mx-auto grid grid-cols-1 xl:grid-cols-3 gap-x-12">
                 <div className="lg:col-span-1">
                     <div className="sticky top-8 flex flex-col gap-y-6">
                         <div>
@@ -1714,7 +1714,7 @@ const ProofDetailView: React.FC<{
                         </div>
 
                         <div>
-                            <div className="flex items-center justify-between mb-3 gap-2">
+                            <div className="flex flex-wrap items-center justify-between mb-3 gap-2">
                                 <h3 className="text-xl font-semibold text-oliver-black flex items-center gap-2">
                                     <HistoryIcon className="h-6 w-6 text-oliver-azure"/>
                                     Version History
@@ -1722,7 +1722,7 @@ const ProofDetailView: React.FC<{
                                 <div className="flex items-center gap-2">
                                     <button
                                         onClick={handleDownload}
-                                        className="flex items-center gap-2 text-sm bg-oliver-azure text-white font-semibold py-1.5 px-3 rounded-full border border-transparent hover:bg-oliver-azure/90 transition-colors duration-200"
+                                        className="flex items-center gap-2 text-sm bg-oliver-azure text-white font-semibold py-1.5 px-3 rounded-full border border-transparent hover:bg-oliver-azure/90 hover:shadow-sm active:scale-95 active:bg-oliver-azure/80 transition-all duration-150 shrink-0 whitespace-nowrap"
                                         title={`Download Version ${selectedVersion.version}`}
                                     >
                                         <DownloadIcon className="h-4 w-4" />
@@ -1731,7 +1731,7 @@ const ProofDetailView: React.FC<{
                                     <button
                                         onClick={handleDownloadReport}
                                         disabled={isExporting}
-                                        className="flex items-center gap-2 text-sm bg-white text-oliver-azure font-semibold py-1.5 px-3 rounded-full border-2 border-oliver-azure hover:bg-oliver-azure hover:text-white transition-colors duration-200 disabled:bg-gray-300 disabled:text-oliver-black/60 disabled:border-grey-300 disabled:cursor-wait"
+                                        className="flex items-center gap-2 text-sm bg-white text-oliver-azure font-semibold py-1.5 px-3 rounded-full border-2 border-oliver-azure hover:bg-oliver-azure hover:text-white hover:shadow-sm active:scale-95 transition-all duration-150 disabled:bg-gray-300 disabled:text-oliver-black/60 disabled:border-grey-300 disabled:cursor-wait shrink-0 whitespace-nowrap"
                                         title={`Download Report for Version ${selectedVersion.version}`}
                                     >
                                         {isExporting ? (
@@ -1750,7 +1750,7 @@ const ProofDetailView: React.FC<{
                                         <button
                                             onClick={handleUploadClick}
                                             disabled={isUploadingNewVersion}
-                                            className="flex items-center gap-2 text-sm bg-white text-oliver-azure font-semibold py-1.5 px-3 rounded-full border-2 border-oliver-azure hover:bg-oliver-azure hover:text-white transition-colors duration-200 disabled:bg-gray-300 disabled:text-oliver-black/60 disabled:border-grey-300 disabled:cursor-wait"
+                                            className="flex items-center gap-2 text-sm bg-white text-oliver-azure font-semibold py-1.5 px-3 rounded-full border-2 border-oliver-azure hover:bg-oliver-azure hover:text-white hover:shadow-sm active:scale-95 transition-all duration-150 disabled:bg-gray-300 disabled:text-oliver-black/60 disabled:border-grey-300 disabled:cursor-wait shrink-0 whitespace-nowrap"
                                             title="Upload a new version of this proof"
                                         >
                                             {isUploadingNewVersion ? (
@@ -1801,7 +1801,7 @@ const ProofDetailView: React.FC<{
                         </div>
                     </div>
                 </div>
-                <div className="mt-12 lg:mt-0 lg:col-span-2">
+                <div className="mt-12 xl:mt-0 xl:col-span-2">
                     {selectedVersion.isIdenticalFile && (
                         <div className="mb-6 bg-warning-light border border-warning rounded-[10px] p-4 flex items-start gap-3">
                             <ExclamationTriangleIcon className="w-5 h-5 text-warning flex-shrink-0 mt-0.5" />