UI: Vertical button stack layout

frontend/src/components/ProjectDetail.tsx

@@ -688,21 +688,23 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, uiMode, initia
           <h2>{project?.name ?? 'Project'}</h2>
           <p style={{ color: 'var(--text-dim)' }}>{project?.description || 'No description provided.'}</p>
         </div>
-        <div className="project-actions-container">
-          <div className="action-group">
-            <button className="btn btn-glass btn-sm" onClick={loadProject}>
+        <div className="project-actions-container" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)', alignItems: 'flex-end' }}>
+          <div className="action-group" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-xs)', width: '100%', alignItems: 'flex-end' }}>
+            <button className="btn btn-glass btn-sm" onClick={loadProject} style={{ width: 'fit-content' }}>
               <RefreshCw size={16} />
               Refresh
             </button>
             {tasks.length > 0 && (
-              <button className="btn btn-glass btn-sm" onClick={() => setShowRoadmap(true)}>
+              <button className="btn btn-glass btn-sm" onClick={() => setShowRoadmap(true)} style={{ width: 'fit-content' }}>
                 <MapIcon size={16} />
                 Roadmap
               </button>
             )}
           </div>
 
-          <div className="action-group reports-group">
+          <div style={{ height: 'var(--space-md)' }} /> {/* Separator */}
+
+          <div className="action-group reports-group" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-xs)', width: '100%', alignItems: 'flex-end' }}>
             {allTasksApproved && (
               <>
                 <button 
@@ -713,34 +715,34 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, uiMode, initia
                     background: 'linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%)',
                     boxShadow: '0 4px 15px rgba(124, 58, 237, 0.3)',
                     fontWeight: 700,
-                    padding: '0.6rem 1.2rem'
+                    padding: '0.8rem 1.5rem',
+                    width: '100%',
+                    justifyContent: 'center'
                   }}
                 >
                   <FileText size={18} />
                   {reportLoading ? 'Building...' : 'Final Report'}
                 </button>
-                <div className="report-variants">
-                  <button className="btn btn-glass btn-sm" onClick={() => openFinalReport('brief')} disabled={reportLoading} title="Short Brief">
-                    <FileText size={16} />
-                    Brief
-                  </button>
-                  <button className="btn btn-glass btn-sm" onClick={() => openFinalReport('pessimistic')} disabled={reportLoading} title="Pessimistic Analysis">
-                    <FileText size={16} />
-                    Risks
-                  </button>
-                </div>
+                <button className="btn btn-glass btn-sm" onClick={() => openFinalReport('brief')} disabled={reportLoading} style={{ width: '100%', justifyContent: 'center' }}>
+                  <FileText size={16} />
+                  Brief Summary
+                </button>
+                <button className="btn btn-glass btn-sm" onClick={() => openFinalReport('pessimistic')} disabled={reportLoading} style={{ width: '100%', justifyContent: 'center' }}>
+                  <FileText size={16} />
+                  Risks Analysis
+                </button>
               </>
             )}
             
             {canModifyProject && tasks.some(t => t.status === 'awaiting_approval') && (
-              <button className="btn btn-glass" onClick={handleApproveAll} disabled={approvingAll} style={{ borderColor: 'var(--success)', color: 'var(--success)' }}>
+              <button className="btn btn-glass" onClick={handleApproveAll} disabled={approvingAll} style={{ borderColor: 'var(--success)', color: 'var(--success)', width: '100%', justifyContent: 'center' }}>
                 <CheckCircle2 size={18} />
                 Approve All
               </button>
             )}
             
             {canModifyProject && (
-              <button className="btn btn-primary" onClick={runOrchestrator} disabled={orchestrating}>
+              <button className="btn btn-primary" onClick={runOrchestrator} disabled={orchestrating} style={{ width: '100%', justifyContent: 'center' }}>
                 <PlayCircle size={18} />
                 {orchestrating ? 'Starting...' : retryableTasks > 0 ? `Retry (${retryableTasks})` : 'Run'}
               </button>