fix(FN-1340): reposition settings icon to right of stop button in header

- Move settings icon placement from its previous position to directly right of the stop button in the Header component
- Update Header component layout to reflect the new icon ordering
- Update Header tests to match the new element ordering
This commit is contained in:
gsxdsm
2026-04-08 22:51:53 -07:00
parent f9608b41b1
commit 237fe861e0
2 changed files with 13 additions and 23 deletions

View File

@@ -883,7 +883,7 @@ describe("Header", () => {
});
describe("action ordering", () => {
it("Settings is the last inline user-facing action on desktop (before pause/stop)", () => {
it("Settings is the last inline action on desktop (after stop button)", () => {
const { container } = renderHeader({
onOpenUsage: noop,
onOpenActivityLog: noop,
@@ -906,23 +906,13 @@ describe("Header", () => {
// Settings must exist
expect(settingsIdx).toBeGreaterThanOrEqual(0);
// Settings must come before pause/stop (engine controls come after Settings)
if (pauseIdx >= 0) {
expect(settingsIdx).toBeLessThan(pauseIdx);
}
if (stopIdx >= 0) {
expect(settingsIdx).toBeLessThan(stopIdx);
}
// Settings must come after pause and stop (engine controls come before Settings)
expect(settingsIdx).toBeGreaterThan(pauseIdx);
expect(settingsIdx).toBeGreaterThan(stopIdx);
// Settings must be the last button before pause/stop — no other user-facing btn-icon after it
// Settings must be the very last button — no buttons after it
const buttonsAfterSettings = inlineButtons.slice(settingsIdx + 1);
const userFacingAfterSettings = buttonsAfterSettings.filter(
(btn) => btn.title !== "Pause scheduling" &&
btn.title !== "Resume scheduling" &&
btn.title !== "Stop AI engine" &&
btn.title !== "Start AI engine"
);
expect(userFacingAfterSettings).toHaveLength(0);
expect(buttonsAfterSettings).toHaveLength(0);
});
it("Settings is the last item in the mobile overflow menu", () => {

View File

@@ -542,13 +542,6 @@ export function Header({
/>
)}
{/* Settings - always inline on desktop only (overflow on mobile/tablet) */}
{!isCompact && (
<button className="btn-icon" onClick={onOpenSettings} title="Settings">
<Settings size={16} />
</button>
)}
{/* Pause button (soft pause) - always inline */}
<button
className={`btn-icon${enginePaused ? " btn-icon--paused" : ""}`}
@@ -568,6 +561,13 @@ export function Header({
{globalPaused ? <Play size={16} /> : <Square size={16} />}
</button>
{/* Settings - always inline on desktop, placed after engine controls */}
{!isCompact && (
<button className="btn-icon" onClick={onOpenSettings} title="Settings">
<Settings size={16} />
</button>
)}
{/* Compact overflow menu trigger (mobile + tablet) */}
{isCompact && !hideFullNav && (
<button