Fix: Adjust padding in chat view for better UI

[zhangtony239]

Context

Adjust minimum padding for history card to accommodate small width layouts.

Screenshots

before	after

How to Test

• Run this version
• You'll notice the changes directly on the Roo Code homepage

Get in Touch

Discord: zhangtony239

---

Important

Adjust padding in ChatView.tsx for better UI on small width layouts.

• UI Adjustment:
  • Adjust padding in ChatView.tsx from p-10 to p-3.5 for better accommodation of small width layouts.

^{This description was created by for 44154d50e5f0687af12a6d3734c30eb8f4e362ba. You can customize this summary. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: d1ca3d7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[cte]

CC @sachasayan

[sachasayan]

@zhangtony239 I think padding is useful to give the content some room to breathe on larger widths. Let's try some variation of p-3.5 sm:p-10 — does that sound about right for you?

[zhangtony239]

@zhangtony239 I think padding is useful to give the content some room to breathe on larger widths. Let's try some variation of p-3.5 sm:p-10 — does that sound about right for you?

Indeed, it's time to add a condition to this CSS.

[zhangtony239]

2025-04-29.235736.mp4

@sachasayan How about this?

[sachasayan]

@zhangtony239 Love it. Let's ship this, but one minor nitpick:

Instead of: max-[370px]:p-3.5 p-10

Can you use: p-3.5 min-[370px]:p-10

Keeping responsible styles consistently bottom up means conflicts / bugs later if they occur and we get to build defaults to the narrow sizes. 😇

Sorry to nitpick, and this is a great catch! Thanks for the contribution! 👍

[sachasayan]

@cte @mrubens Ready to ship once p-3.5 min-[370px]:p-10 is in. 🚀

[mrubens]

p-3.5 min-[370px]:p-10

I just noticed that this makes the p-10 take priority over the pt-5 for the top padding - is that intentional?

[mrubens]

Maybe we should just merge this as is

[sachasayan]

@mrubens Let me check it out real quick.

[sachasayan]

@mrubens It's fine as-is. Very little difference. I'll do another pass on this soon. I think you can just merge. :)