style(web): tweak some web ui details

[anxndsgn]

Related Issue

Resolve #(issue_number)

Description

update ui in sidebar and prompt input for consistency.

Before	After

Checklist

• I have read the CONTRIBUTING document.
• I have linked the related issue, if any.
• I have added tests that prove my fix is effective or that my feature works.
• I have run make gen-changelog to update the changelog.
• I have run make gen-docs to update the user documentation.

---

[devin-ai-integration]

Devin Review found 1 potential issue.

View 5 additional findings in Devin Review.

[devin-ai-integration]

🟡 Removal of base padding in root container causes zero padding on standard (non-notched) devices

The root container's padding was changed from px-[calc(0.75rem+var(--safe-left))] to px-(--safe-left), and similarly for pr, pt, and lg:pb. Since --safe-left (and the other safe-area variables) default to 0px on standard devices without notches (web/src/index.css:82-85), the app container now has zero padding on all standard desktop and laptop screens.

Root Cause and Impact

The CSS variables are defined in web/src/index.css:82-85 as:

--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);

On the vast majority of desktop browsers and non-notched mobile devices, env(safe-area-inset-*, 0px) resolves to 0px.

Old behavior: px-[calc(0.75rem+var(--safe-left))] → padding = 0.75rem + 0px = 0.75rem on standard devices. The 0.75rem provided a consistent base gutter between viewport edges and app content.

New behavior: px-(--safe-left) → padding = var(--safe-left) = 0px on standard devices. The app content (sidebar border, chat panel) is now flush against the browser viewport edges with no gap. The same applies to pr-(--safe-right) (right padding), pt-(--safe-top) (top padding), and lg:pb-(--safe-bottom) (bottom padding on large screens).

Impact: Visual layout regression on all standard (non-notched) devices — the UI loses its outer margins and sits directly against the viewport edges.

Suggested change

	<div className="box-border flex h-dvh flex-col bg-background text-foreground px-(--safe-left) pr-(--safe-right) pt-(--safe-top) pb-1 lg:pb-(--safe-bottom) max-lg:h-svh max-lg:overflow-hidden">
	<div className="box-border flex h-dvh flex-col bg-background text-foreground px-[calc(0.75rem+var(--safe-left))] pr-[calc(0.75rem+var(--safe-right))] pt-[calc(0.75rem+var(--safe-top))] pb-1 lg:pb-[calc(0.75rem+var(--safe-bottom))] max-lg:h-svh max-lg:overflow-hidden">

---

Was this helpful? React with 👍 or 👎 to provide feedback.