Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

UI polish: fix project header more menu popover blowout, and reflect ChatGPT/Codex in Settings runtime

Open
  • Is something wrong?
#606 2 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@PelikanFix16 is already working on this.

Since Oct 18, 2026.

  • #617 by @PelikanFix16 — open

Assessment

This issue has not been assessed yet.

Description

agent:review bug enhancement

Founder direction (Hubert, 2026-10-17). Testing the running application revealed UI breakdown in the project header More menu and incomplete runtime representation in Settings:

What I see

  1. Project header 3-dots menu blowout: Clicking the ••• button in the top right corner of the project header (HeaderParts.tsx: MoreMenu) causes the texts to severely break and spread across the header (mocno teksty sie rozjezdzaja). The menu .top__more-menu and .newmenu__menu lack popover styles (position: absolute, background: var(--el), shadow, border, border-radius, padding, z-index, width bounds), and .newmenu__item lacks row styling (flex, padding, alignment, hover state), so the items render as inline elements directly inside the header bar, stretching and breaking the layout.
  2. General UI alignment & popover polish: Multiple UI popovers and action areas lack consistent popover styling and alignment according to Spokój / Prostota standards (proper popover shadow, border tokens, concentric radii).
  3. Settings runtime naming (ChatGPT/Codex vs Claude Code): In Settings → Agents and AI (RuntimeSection.tsx), the section title says "Claude Code in Flux · not signed in" even when Codex (ChatGPT) is enabled or when both are enabled. Notes and statuses refer exclusively to Claude Code ("Signed out of Claude Code in Flux", "Your Claude Code space was removed"), ignoring that users can sign in with their ChatGPT / Codex subscriptions. The heading and cards should clearly and accurately reflect both supported subscription agents.

Acceptance criteria

  • AC-1: The project header ••• More menu (.top__more-menu, HeaderParts.tsx) renders as a clean, floating popover aligned below the button's right edge (position: absolute, background: var(--el), popover shadow token, --line border, radius 14/18px, z-index), without stretching or displacing the one-row project header layout.
  • AC-2: Each menu item (.newmenu__item) inside MoreMenu has a full-width flex layout, proper padding (touch targets >= 44px on coarse pointers, compact 32px on desktop), hover state (--hov), and aligned keyboard shortcut pills (kbd).
  • AC-3: In Settings → Agents and AI (RuntimeSection.tsx), the section heading and status truthfully represent the enabled subscription client(s): when Codex is enabled (or both Codex and Claude Code are enabled), the header and status cards do not falsely label the entire runtime solely as "Claude Code". Both ChatGPT (Codex) and Claude Code sign-in states and statuses are clearly and accurately presented.
  • AC-4: Add browser regression test(s) verifying that clicking the project header ••• opens a popover within the viewport without horizontal header displacement or text blowout, and that Settings displays the accurate runtime heading when Codex or both runtimes are enabled.

Owner: PelikanFix16 (codex-hubert). Evaluator: Zamojski5 (claude-maurycy).
Refs #500, #505, #513, #336, #281.

Ownership, 2026-10-18: reassigned under Hubert’s batching direction to the codex-hubert side for one logical #605/#606 UI batch. No issue-specific active implementation or PR was found at transfer. Existing #608 and its author’s branch stay with Maurycy; integrate its motion changes when composing the batch. This is ready-queue ownership; implementation starts when a current WIP slot is available. All original criteria and dependencies remain required.

Dominant language
TypeScript
Stars
3
Forks
0
Avg merge
19h 9m
Merged PRs (30d)
334

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ColdPhase/flux

All issues in ColdPhase/flux

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.