diff --git a/frontend/src/App.css b/frontend/src/App.css index 6dd7f06..f810da5 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -224,6 +224,25 @@ cursor: pointer; } +/* Header actions toolbar: single row, nice spacing, scroll on overflow */ +.header-actions { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: nowrap; + overflow-x: auto; + padding-bottom: 2px; /* to avoid cutting off focus outline */ +} +.header-actions .btn-group { + display: flex; + align-items: center; + gap: 0.5rem; +} +.header-actions .btn { + display: inline-flex; + align-items: center; +} + /* Custom responsive adjustments */ @media (max-width: 992px) { .page-wrapper { diff --git a/frontend/src/components/PageHeaderActions.jsx b/frontend/src/components/PageHeaderActions.jsx index 6b3d7e1..1ee29cb 100644 --- a/frontend/src/components/PageHeaderActions.jsx +++ b/frontend/src/components/PageHeaderActions.jsx @@ -26,17 +26,25 @@ function PageHeaderActions({ onBackgroundUpdate, }) { return ( -
+
+
+ {onOnlineUpdate && ( + + )} + {onBackgroundUpdate && ( + + )} +
+
{onOnlineUpdate && ( - - )} - {onBackgroundUpdate && ( - + )} +
+
{onPreview && ( )} +
); }