Skip to content

Make Settings dialog box size match Plugins#661

Merged
leszko merged 1 commit intomainfrom
settings-size
Mar 12, 2026
Merged

Make Settings dialog box size match Plugins#661
leszko merged 1 commit intomainfrom
settings-size

Conversation

@thomshutt
Copy link
Copy Markdown
Contributor

@thomshutt thomshutt commented Mar 11, 2026

It's getting cramped as we add more things in. This change makes it match the Plugins box in size and take more advantage of screen size on larger screens.

On my Macbook Air:

Screenshot 2026-03-11 at 11 38 51

Summary by CodeRabbit

  • Style
    • Settings dialog layout updated to better utilize larger screens with expanded maximum widths for desktop and wide displays.
    • Scrollable content area height increased for improved visibility and reduced need for nested scrolling, preserving existing overflow and scrollbar behavior.

@thomshutt thomshutt requested a review from leszko March 11, 2026 11:40
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 11, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f9b38cd4-ad2b-42f6-b3b3-48cc869cb94c

📥 Commits

Reviewing files that changed from the base of the PR and between e28c16f and 7e767fd.

📒 Files selected for processing (1)
  • frontend/src/components/SettingsDialog.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • frontend/src/components/SettingsDialog.tsx

📝 Walkthrough

Walkthrough

The SettingsDialog component's responsive width breakpoints are expanded to support larger screens (lg: 800px, xl: 960px) and the scrollable content area height is increased from 40vh to 80vh; changes are presentational only.

Changes

Cohort / File(s) Summary
Dialog Layout Adjustments
frontend/src/components/SettingsDialog.tsx
Added lg:max-w-[800px] and xl:max-w-[960px] to DialogContent width; increased scrollable content height from h-[40vh] to h-[80vh] (applied for default and lg/xl breakpoints).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A dialog stretches, broad and bright,
Breakpoints added, sizing just right,
From forty to eighty the scrolls now roam,
A cozier canvas, a wider home. 🎉

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly relates to the main change: expanding the Settings dialog size to match the Plugins dialog dimensions for better screen space utilization.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch settings-size

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
frontend/src/components/SettingsDialog.tsx (1)

158-158: Remove the duplicated height utilities.

Line 158 sets the same 80vh height at every breakpoint, so the lg: and xl: variants can be dropped with no behavior change.

♻️ Small cleanup
-          <div className="flex-1 min-w-0 p-4 pt-10 h-[80vh] lg:h-[80vh] xl:h-[80vh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
+          <div className="flex-1 min-w-0 p-4 pt-10 h-[80vh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/SettingsDialog.tsx` at line 158, The className on the
scrollable container in SettingsDialog (the div with "flex-1 min-w-0 p-4 pt-10
...") redundantly repeats h-[80vh] for lg: and xl: breakpoints; remove the
lg:h-[80vh] and xl:h-[80vh] tokens so only a single h-[80vh] remains, leaving
all other utility classes untouched.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/src/components/SettingsDialog.tsx`:
- Line 158: The className on the scrollable container in SettingsDialog (the div
with "flex-1 min-w-0 p-4 pt-10 ...") redundantly repeats h-[80vh] for lg: and
xl: breakpoints; remove the lg:h-[80vh] and xl:h-[80vh] tokens so only a single
h-[80vh] remains, leaving all other utility classes untouched.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 12a3aed0-e64c-490f-9b54-bc2fb646781d

📥 Commits

Reviewing files that changed from the base of the PR and between 4cba0a9 and e28c16f.

📒 Files selected for processing (1)
  • frontend/src/components/SettingsDialog.tsx

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 11, 2026

🚀 fal.ai Preview Deployment

App ID daydream/scope-pr-661--preview
WebSocket wss://fal.run/daydream/scope-pr-661--preview/ws
Commit 7e767fd

Testing

Connect to this preview deployment by running this on your branch:

uv run build && SCOPE_CLOUD_APP_ID="daydream/scope-pr-661--preview/ws" uv run daydream-scope

🧪 E2E tests will run automatically against this deployment.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 11, 2026

✅ E2E Tests passed

Status passed
fal App daydream/scope-pr-661--preview
Run View logs

Test Artifacts

Check the workflow run for screenshots.

@leszko leszko merged commit fc905d8 into main Mar 12, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants