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:
@@ -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", () => {
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user