') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); fix(desktop): let the whole Settings pane scroll by chihumyum · Pull Request #3453 · apache/maka · GitHub
Skip to content

fix(desktop): let the whole Settings pane scroll - #3453

Merged
Astro-Han merged 1 commit into
apache:mainfrom
chihumyum:fix/settings-page-scroll-area
Aug 22, 2026
Merged

fix(desktop): let the whole Settings pane scroll#3453
Astro-Han merged 1 commit into
apache:mainfrom
chihumyum:fix/settings-page-scroll-area

Conversation

@chihumyum

@chihumyumchihumyum commented Aug 21, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

  • Move vertical scroll ownership from the centered Settings content column to the whole rounded main pane.
  • Let wheel input over either wide gutter scroll the page and keep the native scrollbar at the pane's outer edge.
  • Preserve the existing 920px content width and mirror the production scroll structure in Storybook.
  • Add Electron E2E coverage for wide-gutter wheel scrolling and scroll ownership.

Before / after

before.mp4
after.mp4

Draft status

The current three-way merge against #3450 auto-merges the production TSX/CSS changes. Only apps/desktop/e2e/settings.spec.ts conflicts because both branches append a test at the end of the file; resolving it means keeping both tests.

Verification

  • npx biome check apps/desktop/e2e/settings.spec.ts apps/desktop/src/renderer/settings/settings-surface.tsx apps/desktop/src/renderer/styles/settings/nav-sidebar.css apps/desktop/stories/settings/provider-settings.stories.tsx
  • npm --workspace @maka/desktop run typecheck
  • npm --workspace @maka/desktop run e2e -- e2e/settings.spec.ts — 3/3 passed
  • npm --workspace @maka/desktop run build-storybook
  • npm --workspace @maka/desktop run smoke:storybook — 160/160 stories passed
  • git diff --check

Manual/native visual acceptance and screenshots were intentionally skipped for this draft.

AI use

Select exactly one:

  • No generative tool made a substantive contribution
  • Generative tooling made a substantive contribution

Tool(s) and scope:

OpenAI Codex — investigated the scroll owner, implemented the renderer/CSS/Storybook changes, added Electron E2E coverage, verified the branch, checked overlap with #3450, and prepared this Draft PR. The human contributor reviewed the intended behavior and authorized publication.

Checklist

  • Tests cover the change and fail without it
  • Lint, format, typecheck and the affected suites pass locally

Does this PR entail a change in behavior?

  • Yes — described under Summary above
  • No

@chihumyum
fix(desktop): let the whole Settings pane scroll
b69a89b
Move vertical scroll ownership from the centered content column to the rounded Settings main pane so wide gutters accept wheel input and the native scrollbar stays at the pane edge. Keep the page column width and mirror the production layout in Storybook.
Generated-by: Codex
@chihumyum
chihumyum marked this pull request as ready for review August 21, 2026 19:12
jackwener
jackwener reviewed Aug 21, 2026
View reviewed changes

@jackwenerjackwener left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Automated review of exact head b69a89b8a08ba5bd848ae97270d753d808195fff against current main@d62857a8357e9160926726a2a13096bc2dc2b91d.

The defect remains on main: .settingsMainPane clips overflow while Astryx LayoutContent owns overflow: auto, so the centered 920px column is the only scroll target and wide pane gutters do not receive wheel scrolling. This patch moves the single scroll owner to the rounded pane, opts the inner content out of scrolling, and keeps the Storybook frame structurally aligned. The E2E asserts both ownership and actual gutter-wheel behavior. I found no actionable P0-P2 defect; git diff --check is clean.

Required conclusions:

  1. Optimal for the actual problem: yes; one outer scroll owner fixes both inert gutters and scrollbar placement without adding event forwarding.
  2. Production code to delete: none beyond the replaced inner scroll ownership; none further identified.
  3. Tests to delete/replace: none identified.
  4. Deeper refactor: no.
  5. Ready to merge: not yet. No hosted test check is reported on this exact head, and automated review is not approval.
  6. Residual risks/gaps: the scroll-owner change is user-visible and still needs the promised human visual/native acceptance; the PR body also still describes itself as Draft even though GitHub currently marks it ready for review, and it records a pending rebase/combined-test resolution after #3450.

This affects user-visible layout, so CONTRIBUTING.md requires independent human judgment on the exact head.

Astro-Han
Astro-Han approved these changes Aug 22, 2026
View reviewed changes

@Astro-HanAstro-Han left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, Clean and small fix.

@Astro-Han
Astro-Han merged commit f1f4e71 into apache:mainAug 22, 2026
1 check passed
@chihumyum
chihumyum deleted the fix/settings-page-scroll-area branch August 22, 2026 06:07
@chihumyumchihumyum mentioned this pull request Aug 22, 2026
Merged
6 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jackwenerjackwenerjackwener left review comments
@Astro-HanAstro-HanAstro-Han approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@chihumyum@jackwener@Astro-Han