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

@@ -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"