Welcome screen fix

[navedmerchant]

Related GitHub Issue

Closes: #162

Description

The welcome screen (displayed when no task is active) used justify-center on both the outer scroll container and inner content wrapper. This is a well-known CSS flexbox pitfall: when content overflows the container, justify-center positions the content at the geometric center of the flex container, pushing the top portion above the scroll boundary. Since browsers cannot scroll to negative offsets, the top content (RooHero, RooTips) becomes permanently unreachable.

This manifests when HistoryPreview shows 4 task groups (the max it displays via groups.slice(0, 4)), which combined with RooHero and RooTips exceeds the sidebar viewport height.

Fix: Replace justify-center with the my-auto pattern on the inner content wrapper in ChatView.tsx:

• Outer container: Removed justify-center (keeps overflow-y-auto and min-h-0 for scrolling)
• Inner div: Replaced justify-center h-full with my-auto

The my-auto pattern (margin-top: auto; margin-bottom: auto) centers content when it fits within the viewport (auto margins split free space equally), but gracefully falls back to top-alignment when content overflows (auto margins collapse to 0), allowing overflow-y-auto to scroll to all content.

Roadmap alignment: Enhanced User Experience — fixes a friction point where users with task history cannot access the welcome screen hero/tips content.

Test Procedure

1. Unit tests: All 339 chat tests and 11 welcome tests pass
2. Type check: webview-ui passes pnpm run check-types cleanly
3. Manual testing:
   • Open Zoo Code with no active task and 4+ items in task history
   • Verify RooHero and RooTips are visible at the top of the welcome screen
   • Scroll down to verify HistoryPreview items are accessible
   • Verify that with 0-1 history items, the welcome content is still vertically centered

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue ([BUG] Adding more than 4 items to history can make the start screen shift up #162)
• Scope: My changes are focused on the linked issue (one fix per PR)
• Self-Review: I have performed a thorough self-review of my code
• Testing: Existing tests cover this change; no new tests needed as this is a CSS-only fix with no behavioral logic change
• Documentation Impact: No documentation updates required
• Contribution Guidelines: I have read and agree to the Contributor Guidelines

Screenshots / Videos

Documentation Updates

• No documentation updates are required.

Additional Notes

This is a minimal, surgical CSS fix — two class name changes, no logic or component structure modifications. The my-auto pattern is the standard solution for the "flexbox centering overflow" problem (see CSS-Tricks: Flexbox Truncation).

Get in Touch

navedmerchant

---

Summary by CodeRabbit

• Style
  • Adjusted the 'no active task' UI layout container for improved scrollability and element spacing.

[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: d75cd955-c9c2-472b-a118-026df3cee92a

📥 Commits

Reviewing files that changed from the base of the PR and between cff97db and 73391b8.

📒 Files selected for processing (1)

• webview-ui/src/components/chat/ChatView.tsx

---

📝 Walkthrough

Walkthrough

This PR fixes a bug where the welcome screen content is cut off when history exceeds four items. The layout changes the no-task container from a centered layout to a scrollable vertical flex layout with auto-centering, allowing content to scroll rather than overflow outside the viewport.

Changes

Welcome Screen Scrollable Layout

Layer / File(s)	Summary
Welcome screen scrollable layout webview-ui/src/components/chat/ChatView.tsx	Outer container changes from justify-center to overflow-y-auto gap-4 relative for scrollability. Inner container changes from justify-center h-full to items-start gap-2 my-auto for proper alignment within the scrollable parent.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A welcome screen that shifts and bends,
Now scrolls with grace when history grows,
Four items hide but no longer offend—
Content flows free where overflow goes! 📜✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is vague and generic, using only 'Welcome screen fix' without specifying the actual issue (layout/scrolling) or the CSS pattern applied.	Improve title clarity with a specific reference to the layout fix, such as 'Fix welcome screen overflow scrolling with my-auto pattern' or 'Fix inaccessible welcome content when history exceeds viewport'.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is comprehensive, detailed, and well-structured per the template with all required sections (issue link, implementation details, test procedures, checklist) thoroughly filled out with technical context.
Linked Issues check	✅ Passed	The PR fully addresses issue #162: it replaces justify-center with my-auto pattern to fix the CSS flexbox overflow issue, ensures top content (RooHero, RooTips) remains accessible, and allows scrolling when history content overflows.
Out of Scope Changes check	✅ Passed	The PR is narrowly scoped to the CSS layout fix in ChatView.tsx (two class name changes) with no logic modifications, behavioral changes, or unrelated alterations beyond addressing issue #162.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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 welcome_fix

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.

webview-ui/src/components/chat/ChatView.tsx

Oops! Something went wrong! :(

ESLint: 9.28.0

ESLint couldn't find an eslint.config.(js|mjs|cjs) file.

From ESLint v9.0.0, the default configuration file is now eslint.config.js.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

https://eslint.org/docs/latest/use/configure/migration-guide

If you still have problems after following the migration guide, please stop by
https://eslint.org/chat/help to chat with the team.

---

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.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!