From 711e2fc5d6f8e86edaf7792909d7abd7e599bfef Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Tue, 22 Sep 2026 10:14:51 +0700
Subject: [PATCH] web: the history arrows sit with the name they undo

Undo and redo were on the far side of the spacer, past RESET, SAVE PHOTO
and EXPORT. They belong next to what they step through: the header now
reads mark, page name, preset name, the two arrows, then the actions.
---
 docker/frontend/src/ui/TopBar.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docker/frontend/src/ui/TopBar.tsx b/docker/frontend/src/ui/TopBar.tsx
index 93c2281..b39829a 100644
--- a/docker/frontend/src/ui/TopBar.tsx
+++ b/docker/frontend/src/ui/TopBar.tsx
@@ -66,10 +66,10 @@ export function TopBar({
       </a>
       <b className="page-name">{t('nav.studio')}</b>
       <span className="recipe-name">{recipeName}</span>
-      <span className="spacer" />
 
       {/* Both arrows are one icon wide, so the pair reads as one control: the
-          counter-clockwise arrow steps back, the clockwise one forward. */}
+          counter-clockwise arrow steps back, the clockwise one forward. They sit
+          with the name they would take back — after the mark and the preset. */}
       <button
         type="button"
         className="btn ghost icon"
@@ -92,6 +92,8 @@ export function TopBar({
       >
         ↻
       </button>
+      <span className="spacer" />
+
       <button type="button" className="btn ghost" onClick={onReset}>{t('act.reset')}</button>
       <button
         type="button"