Keep button layout stable.

web/src/components/BattlePhase.tsx

@@ -339,7 +339,7 @@ export function BattlePhase({ view, send }: Props) {
             disabled={step === 0}
             title="Previous step"
           >
-            ◀
+            |◀
           </button>
           <button
             className="btn btn-ghost btn-sm"
@@ -347,7 +347,7 @@ export function BattlePhase({ view, send }: Props) {
             disabled={done}
             title={paused ? 'Play' : 'Pause'}
           >
-            {paused ? '▶' : '⏸'}
+            {paused || done ? '▶' : '⏸'}
           </button>
           <button
             className="btn btn-ghost btn-sm"
@@ -355,16 +355,19 @@ export function BattlePhase({ view, send }: Props) {
             disabled={done}
             title="Next step"
           >
-            ▶
+            ▶|
           </button>
           <span className="battle-step">
             {Math.min(step, events.length)} / {events.length}
           </span>
-          {!done && (
-            <button className="btn btn-ghost btn-sm" onClick={() => setStep(events.length)}>
+          <button
+            className="btn btn-ghost btn-sm"
+            onClick={() => setStep(events.length)}
+            disabled={done}
+            title="Skip to the end"
+          >
             Skip ⏭
           </button>
-          )}
         </div>
       </div>