marciobever/metaads-pro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: tighten campaign table spacing so the actions column fits on screen

Browse source 
The duplicate buttons pushed the Ações column past the viewport edge.
Reduce horizontal cell padding (16px -> 10px across all 10 columns) and
tighten the campaign-row action button gap so the full row fits without
horizontal cutoff.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcio Bevervanso 2026-06-08 14:47:36 -03:00
parent 38f5dc444f
commit 9bda154730
2 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/globals.css
View file

@ -316,7 +316,7 @@ body {
/* ---- Table Styles ---- */ /* ---- Table Styles ---- */
.campaign-table th { .campaign-table th {
padding: 12px 16px; padding: 12px 10px;
text-align: left; text-align: left;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
@ -328,7 +328,7 @@ body {
} }
.campaign-table td { .campaign-table td {
padding: 14px 16px; padding: 12px 10px;
font-size: 14px; font-size: 14px;
border-bottom: 1px solid var(--overlay-04); border-bottom: 1px solid var(--overlay-04);
white-space: nowrap; white-space: nowrap;

2
src/components/dashboard/CampaignTable.tsx
View file

@ -200,7 +200,7 @@ export function CampaignTable({ campaigns, loading, onStatusChange, onBudgetChan
<td className="text-sm" style={{ color: leads > 0 ? '#4ade80' : 'var(--muted-fg)' }}>{leads}</td> <td className="text-sm" style={{ color: leads > 0 ? '#4ade80' : 'var(--muted-fg)' }}>{leads}</td>
<td className="text-sm" style={{ color: roas >= 1 ? '#4ade80' : roas > 0 ? '#fbbf24' : 'var(--muted-fg)' }}>{roas > 0 ? `${roas.toFixed(2)}x` : '—'}</td> <td className="text-sm" style={{ color: roas >= 1 ? '#4ade80' : roas > 0 ? '#fbbf24' : 'var(--muted-fg)' }}>{roas > 0 ? `${roas.toFixed(2)}x` : '—'}</td>
<td className="pr-5"> <td className="pr-5">
<div className="flex items-center gap-2"> <div className="flex items-center gap-1">
<button onClick={() => toggleStatus(c.campaign.id, c.campaign.status)} disabled={isLoading} className={`p-1.5 rounded-lg transition-all ${active ? 'btn-danger' : 'btn-success'}`} title={active ? 'Pausar' : 'Reativar'}> <button onClick={() => toggleStatus(c.campaign.id, c.campaign.status)} disabled={isLoading} className={`p-1.5 rounded-lg transition-all ${active ? 'btn-danger' : 'btn-success'}`} title={active ? 'Pausar' : 'Reativar'}>
{isLoading ? <Spinner size="sm" /> : active ? <Pause size={14} /> : <Play size={14} />} {isLoading ? <Spinner size="sm" /> : active ? <Pause size={14} /> : <Play size={14} />}
</button> </button>