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

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)">
-          <IconBolt className="me-1" /> Online-обновление
-        </button>
-      )}
-      {onBackgroundUpdate && (
-        <button className="btn btn-outline-success" onClick={onBackgroundUpdate} title="Фоновое обновление BGP (POST)">
-          <IconPlayerPlay className="me-1" /> Фоновое обновление
-        </button>
+        <span className="vr" />
       )}
+      </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>
   );
 }