Skip to content

fix: LanguageSelector dropdown z-index stacking context for Settings … - #86

Merged
qnbs merged 9 commits into
mainfrom
fix/language-selector-zindex-dropdown
Jun 7, 2026
Merged

fix: LanguageSelector dropdown z-index stacking context for Settings …#86
qnbs merged 9 commits into
mainfrom
fix/language-selector-zindex-dropdown

Conversation

@qnbs

@qnbs qnbs commented Jun 7, 2026

Copy link
Copy Markdown
Owner

User description

…page

  • Add z-50 and isolate to LanguageSelector container to create proper stacking context above Card components
  • Change dropdown z-index from var(--sc-z-docked) to 100 to ensure visibility over PWA install card and other settings cards
  • Fixes dropdown being clipped/hidden behind subsequent cards in Settings

CodeAnt-AI Description

Keep the language dropdown visible above other settings cards

What Changed

  • The language selector now stays above surrounding cards when opened on the Settings page
  • The dropdown menu is given a higher stacking order so it no longer gets hidden or clipped behind nearby content
  • This applies to both the compact header version and the full Settings page version

Impact

✅ Fewer hidden dropdowns on Settings
✅ Clearer language switching
✅ Fewer clicks caused by clipped menus

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

…page

- Add z-50 and isolate to LanguageSelector container to create proper
  stacking context above Card components
- Change dropdown z-index from var(--sc-z-docked) to 100 to ensure
  visibility over PWA install card and other settings cards
- Fixes dropdown being clipped/hidden behind subsequent cards in Settings
@codeant-ai

codeant-ai Bot commented Jun 7, 2026

Copy link
Copy Markdown

CodeAnt AI is reviewing your PR.


Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@vercel

vercel Bot commented Jun 7, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
storycraft-studio Ready Ready Preview, Comment Jun 7, 2026 7:37pm

@codeant-ai codeant-ai Bot added the size:XS This PR changes 0-9 lines, ignoring generated files label Jun 7, 2026
@codeant-ai

codeant-ai Bot commented Jun 7, 2026

Copy link
Copy Markdown

CodeAnt AI finished reviewing your PR.

qnbs added 8 commits June 7, 2026 17:33
Update test assertions to work with the new custom dropdown Select
instead of native <select> elements:
- BookPreviewView: use userEvent.click on dropdown button + option
- AccessibilitySection: query by label, click dropdown option
- AiSections: check combobox presence instead of text match
- EditorSections: improve Select mock, use fireEvent.change
… dropdown refactor

Add Select mock (native <select> shim) to 13 test files so existing
getByRole('combobox') / selectOptions assertions keep working after
the Select component was refactored from native <select> to custom
dropdown. Also mocks LanguageSelector in GeneralSections tests.

Files updated:
- CharacterInterviewsView, ConsistencyCheckerView, TensionCurvePanel
- ToolsPanel, WriterView, MindMapNodeEditor
- settings/GeneralSections, NotificationsSection, PrivacyAndNotificationsSection
- settings/SettingsSections, VoiceSettingsSection, WebLlmPanel
- writing/ContextPanel, ToolInputs
…Select

The Select component refactor replaced native <select> with a custom
button + listbox dropdown. Update the E2E helper to:
- click the trigger button to open the dropdown
- find options via [role=option] instead of <option> tags
- click the first enabled option instead of using selectOption()

Fixes E2E failures in export, project-import, snapshots and writer specs.
…pers

- selectFirstEnabledWriterSection: click trigger + select [role=option]
  instead of native <option> + selectOption()
- project-import: verify selected text on button instead of locating
  <option> elements that no longer exist in custom dropdown
Replace text-white with text-[var(--sc-text-on-accent)] in CommandPalette
active/selected option styling to guarantee WCAG 2 AA contrast ratio
(4.5:1) against --sc-accent backgrounds. axe-core was reporting 4.16:1
with computed fgColor #e5e4f4, failing the color-contrast rule.
Playwright's standard click() fails with 'subtree intercepts pointer
events' when the custom dropdown listbox overlaps with the Writer
textarea. Use evaluate(el => el.click()) to bypass the overlay check
and reliably select the first enabled option.
…atterns

- UI-MODERNIZATION.md: Mark Select as complete in Phase 2, add Select component docs
- Design-System.md: Add Select and Input to UI Primitives table
- ACCESSIBILITY.md: Document Select/LanguageSelector ARIA patterns
- BEST-PRACTICES.md: Add custom Select testing guidance
- CLAUDE.md: Add mock pattern for Select/LanguageSelector in tests
@qnbs
qnbs force-pushed the fix/language-selector-zindex-dropdown branch from 1e84523 to 055eff1 Compare June 7, 2026 19:36
@qnbs
qnbs merged commit 85502f8 into main Jun 7, 2026
16 checks passed
@qnbs
qnbs deleted the fix/language-selector-zindex-dropdown branch June 7, 2026 19:59
qnbs added a commit that referenced this pull request Sep 10, 2026
…raph (#682)

* fix(security): eliminate extract-zip from the Lighthouse dependency graph

Dependabot #86 flagged extract-zip@2.0.1 (GHSA-7pqw-9j4j-h8q3, high;
GHSA-jmr9-qjv8-65gv, already-accepted), reachable only via @lhci/cli's
hard-pinned lighthouse@12.6.1 -> puppeteer-core -> @puppeteer/browsers@2.x
devDependency chain. No patched extract-zip release exists, but
@puppeteer/browsers 3.x (pulled in by lighthouse 13.x's puppeteer-core
^25.x) replaced extract-zip with modern-tar entirely.

@lhci/cli@0.15.1 is the latest published release and hard-pins
lighthouse to an exact version, so no parent-package upgrade alone
reaches the fix. A pnpm-workspace.yaml overrides.lighthouse: ">=13.4.1"
entry forces the whole chain onto the modern, extract-zip-free stack.

Verified @lhci/cli invokes lighthouse via CLI subprocess (stable
--output json --output-path contract), not an internal API import, and
lighthouse 13.4.1 keeps the identical package-layout convention as
12.6.1. pnpm why extract-zip now returns nothing; the package has zero
occurrences in pnpm-lock.yaml. Functionally validated: lhci healthcheck
passes, and a real lighthouse CLI audit against a live URL (Chrome
launch, navigation, full performance audit, valid JSON output)
succeeded end-to-end.

Removes both now-obsolete extract-zip IgnoredVulns entries from
src-tauri/osv-scanner.toml, and corrects two historical AUDIT.md
entries that had misattributed the chain to Playwright instead of
Lighthouse CI's own Puppeteer stack.

* fix(security): raise Node floor to 22.19, exact-pin lighthouse, record override

Three review findings addressed together:

- lighthouse@13.4.1 requires Node >=22.19, but package.json declared
  >=22.0.0 with engineStrict: true - a real contract mismatch. Raised
  engines.node to >=22.19.0 and reconciled CONTRIBUTING.md's Windows
  setup step and docs/DEPLOYMENT.md's Vercel prerequisite to match.
  .nvmrc stays "22" deliberately: actions/setup-node's node-version-file
  resolution always picks the latest available 22.x release, which
  mechanically satisfies >=22.19 without needing an exact pin there.
- Tightened the lighthouse override from ">=13.4.1" to the exact
  "13.4.1" actually compatibility-tested in this PR - @lhci/cli@0.15.1
  is untested against later Lighthouse majors, so an unbounded range
  could silently resolve to an incompatible 14.x/15.x during an
  unrelated future lockfile reconciliation.
- Added a lighthouse row to AUDIT.md's Known Overrides Table, matching
  its existing schema, and updated the two prose mentions of the old
  ">=13.4.1" range to reflect the exact pin.

Also carries forward the deferred Cubic P3 from #681: TODO.md's sprint
status marker was still "in progress" despite every deliverable being
done.

Re-verified after the changes: lighthouse resolves to exactly 13.4.1,
extract-zip remains fully absent, @puppeteer/browsers stays on 3.x,
pnpm audit reports only the separate adm-zip finding, lhci healthcheck
passes, and a real Lighthouse CLI audit against a live URL still
succeeds end-to-end.

* docs: synchronize remaining Node prerequisite mentions to >=22.19

Codex found four more current-state setup/troubleshooting references
still advertising plain Node >=22 after the engine floor was raised:
CONTRIBUTING.md's cross-platform prerequisites line, three README.md
mentions (quick-start, deployment prerequisites, install comment), and
infra/low-end-ci/INSTALL.md's fnm troubleshooting row (also switched to
`fnm install 22 --latest` since a stale locally-installed 22.x would
still fail engineStrict).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XS This PR changes 0-9 lines, ignoring generated files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant