feat: Implement header actions toolbar with improved button grouping and layout for enhanced user interaction

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 {

frontend/src/components/PageHeaderActions.jsx

@@ -26,17 +26,25 @@ function PageHeaderActions({
   onBackgroundUpdate,
 }) {
   return (
-    <div className="btn-list">
+    <div className="header-actions">
+      <div className="btn-group">
+        {onOnlineUpdate && (
+          <button className="btn btn-outline-warning" onClick={onOnlineUpdate} title="Online-обновление BGP (WebSocket)">
+            <IconBolt className="me-1" /> Online-обновление
+          </button>
+        )}
+        {onBackgroundUpdate && (
+          <button className="btn btn-outline-success" onClick={onBackgroundUpdate} title="Фоновое обновление BGP (POST)">
+            <IconPlayerPlay className="me-1" /> Фоновое обновление
+          </button>
+        )}
+      </div>
+      <div className="btn-group">
       {onOnlineUpdate && (
-        <button className="btn btn-outline-warning" onClick={onOnlineUpdate} title="Online-обновление BGP (WebSocket)">
+        <span className="vr" />
-          <IconBolt className="me-1" /> Online-обновление
-        </button>
-      )}
-      {onBackgroundUpdate && (
-        <button className="btn btn-outline-success" onClick={onBackgroundUpdate} title="Фоновое обновление BGP (POST)">
-          <IconPlayerPlay className="me-1" /> Фоновое обновление
-        </button>
       )}
+      </div>
+      <div className="btn-group">
       {onPreview && (
         <button className="btn btn-outline-secondary" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
           <IconEye className="me-1" /> Предпросмотр
@@ -79,6 +87,7 @@ function PageHeaderActions({
       {onHistory && (
         <button className="btn btn-outline-secondary" onClick={onHistory} title="История версий">История</button>
       )}
+      </div>
     </div>
   );
 }