Oliver/modcomms
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Proof Detail page responsive layout and button states

Browse source 
- 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>
This commit is contained in:
Vadym Samoilenko 2026-03-05 12:54:55 +00:00
parent 1f2a2e5016
commit 4a2182ce2a
2 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/App.tsx
View file

@ -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)}

16
frontend/components/Campaigns.tsx
View file

@ -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" />