FUS-7: keep activity modal on screen

[gsxdsm]

Closes FUS-7

Summary:

• Constrain the activity log modal width to the viewport instead of relying on the fixed modal-lg width alone.
• Cap the modal height against the visible viewport minus overlay padding and hide overflow at the modal shell so the content pane scrolls internally.
• Let the activity log content pane shrink inside the capped shell so it scrolls internally on short desktop viewports.
• Rename the Activity Log layout regression suite so it accurately covers both desktop and mobile layout contracts.

Tests:

• pnpm --filter @fusion/dashboard exec vitest run --project dashboard-app app/tests/activity-log-layout.test.ts app/components/tests/ActivityLogModal.test.tsx --silent=passed-only --reporter=dot

Summary by CodeRabbit

Release Notes

• Style

  • Enhanced Activity Log modal layout with improved responsive width constraints and viewport-aware height calculations for optimal display across screen sizes.

• Tests

  • Updated modal layout regression tests with more comprehensive validation of sizing and scrolling behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 03e898b0-6361-4b1b-8a4d-8fb243b69ae7

📥 Commits

Reviewing files that changed from the base of the PR and between 28187cf and bf21b6b.

📒 Files selected for processing (2)

• packages/dashboard/app/__tests__/activity-log-layout.test.ts
• packages/dashboard/app/components/ScriptsModal.css

---

📝 Walkthrough

Walkthrough

The PR updates Activity Log modal CSS sizing to use viewport-relative constraints (min(95vw, 640px) width, calc(100dvh - ...) height) with flexbox layout, reduces content area min-height to enable scrolling, and updates corresponding test assertions to validate the new width, height, and overflow behavior.

Changes

Modal viewport-safe sizing and layout

Layer / File(s)

Summary

Modal viewport-safe sizing CSS and test validation packages/dashboard/app/components/ScriptsModal.css, packages/dashboard/app/__tests__/activity-log-layout.test.ts

.activity-log-modal adds width: min(95vw, 640px) with max-width: 95vw, switches max-height to calc(100dvh - var(--overlay-padding-top, 10vh) - 16px), and applies display: flex, flex-direction: column, overflow: hidden. .activity-log-content min-height changes from 300px to 0. Test suite is renamed to "Activity Log modal layout" and three new assertions validate desktop width, height/overflow, and content scrolling behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A modal's viewport dance so neat,
No more 80vh—now our height is fleet,
From fixed to flex, the sizing flows,
Tests validate how the layout grows! 🎨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: constraining the activity modal to stay on screen with viewport-based sizing, which aligns with the core objective to keep the modal within viewport bounds.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch agent/ceo/960946e0

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/dashboard/app/components/ScriptsModal.css`:
- Around line 1183-1189: The modal's tight max-height plus overflow:hidden is
causing the internal .activity-log-content (which enforces min-height: 300px) to
be clipped on short viewports; update the modal styles (the block with width:
min(95vw, 640px); max-height: calc(100dvh - var(--overlay-padding-top, 10vh) -
16px); overflow: hidden) and the .activity-log-content rule so they cooperate:
either remove overflow: hidden and use overflow: auto on the modal, or relax the
modal max-height calculation to ensure it can shrink below
.activity-log-content's min-height (or replace the fixed min-height in
.activity-log-content with a responsive max/min-height using min(300px, X) /
max-height), making sure to reference and adjust the modal selector shown and
the .activity-log-content selector so the modal keeps on-screen and content
scrolls internally rather than being clipped.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5a9a587b-9894-4ad7-b584-c66ead4e50e9

📥 Commits

Reviewing files that changed from the base of the PR and between 045a74d and 28187cf.

📒 Files selected for processing (2)

• packages/dashboard/app/__tests__/activity-log-mobile-layout.test.ts
• packages/dashboard/app/components/ScriptsModal.css

[greptile-apps]

Greptile Summary

This PR fixes the Activity Log modal so it stays within the visible viewport by replacing the hard 80vh cap with a viewport-aware calc(100dvh - var(--overlay-padding-top, 10vh) - 16px) formula (matching the pattern used by other modals in the codebase), constraining width via min(95vw, 640px), and changing the content pane's min-height from 300px to 0 so it can properly shrink and scroll inside the capped modal. The test file is also renamed from activity-log-mobile-layout.test.ts to activity-log-layout.test.ts to reflect its expanded desktop + mobile scope.

• CSS (ScriptsModal.css): .activity-log-modal gets viewport-bounded width (min(95vw, 640px)) and height (calc(100dvh - var(--overlay-padding-top, 10vh) - 16px)) plus overflow: hidden; .activity-log-content drops min-height: 300px in favour of min-height: 0 to allow internal scrolling.
• Tests (activity-log-layout.test.ts): File renamed from the mobile-only name; three new desktop viewport-sizing assertions are added alongside the existing mobile regression tests.

Confidence Score: 5/5

Safe to merge — the CSS change is a targeted, well-scoped fix that follows the same viewport-bounded modal pattern already used by SettingsModal, GitHubImportModal, and several other modals in the codebase.

Both changed files are low-risk: the CSS update replaces a fixed 80vh cap with the same calc formula already proven across multiple modals, and the test rename + additions cleanly extend existing regression coverage without removing any existing assertions.

No files require special attention.

Important Files Changed

Filename	Overview
packages/dashboard/app/components/ScriptsModal.css	Viewport-bounded sizing applied to .activity-log-modal; pattern matches other modals in the codebase. max-width: 95vw is redundant alongside width: min(95vw, 640px) but causes no functional regression.
packages/dashboard/app/tests/activity-log-layout.test.ts	File renamed from activity-log-mobile-layout.test.ts; doc-comment, describe label, and scope updated to reflect both desktop and mobile coverage. New desktop sizing assertions are clean.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[".modal-overlay<br/>padding-top: var(--overlay-padding-top, 10vh)"] --> B[".modal.modal-lg<br/>width: 640px (base)"]
    B --> C[".activity-log-modal overrides<br/>width: min(95vw, 640px)<br/>max-height: calc(100dvh - var(--overlay-padding-top, 10vh) - 16px)<br/>overflow: hidden"]
    C --> D[".activity-log-header<br/>(fixed height)"]
    C --> E[".activity-log-content<br/>flex: 1 / overflow-y: auto<br/>min-height: 0"]
    subgraph Mobile ["@media max-width: 768px"]
      F[".activity-log-modal<br/>max-height: 100dvh (full screen)"]
    end
    C -.-> F

Loading

_{Reviews (2): Last reviewed commit: "FUS-7 address activity modal review" | Re-trigger Greptile}