#9175: Fix: Constrain webchat 'New messages' icon size to prevent massive scaling
app: web-ui
stale
Cluster:
Web UI Enhancements and Fixes
## Summary
Fixes #9169 - The 'New messages' scroll-to-bottom arrow icon was rendering at massive scale (60%+ of viewport) on mobile Safari and Firefox.
## Problem
The SVG icon in the chat-new-messages button had and rules, but these were being overridden or ignored on certain browsers/viewports, causing the icon to scale up dramatically and fill most of the screen.
## Solution
Added explicit size constraints to :
- `!important` flags on width/height to ensure precedence
- `min-width`, `min-height`, `max-width`, `max-height` all set to 16px
- These redundant constraints ensure the icon stays at exactly 16x16px across all browsers and viewports
## Changes
- `ui/src/styles/chat/layout.css` - Enhanced size constraints for .chat-new-messages svg selector
## Impact
✅ Icon now renders at consistent 16x16px size
✅ Works on mobile Safari (iOS PWA mode)
✅ Works on Firefox desktop
✅ No breaking changes - purely defensive CSS
## Testing
The fix adds defensive CSS constraints that enforce the intended 16x16px size. While I don't have a mobile Safari environment to test directly, the added constraints (`!important`, min/max rules) follow CSS best practices for ensuring fixed dimensions across browsers.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
<!-- greptile_comment -->
<h2>Greptile Overview</h2>
<h3>Greptile Summary</h3>
This PR updates the webchat chat layout styles to hard-constrain the `.chat-new-messages svg` icon to a 16×16px box. It does so by adding `!important` on `width`/`height` and also setting `min-*` and `max-*` width/height to 16px, preventing browsers (notably mobile Safari/Firefox per the report) from scaling the “New messages” scroll-to-bottom SVG to an oversized viewport-filling size. The change is localized to `ui/src/styles/chat/layout.css` and only affects the SVG inside the new-messages indicator pill.
<h3>Confidence Score: 5/5</h3>
- This PR is safe to merge with minimal risk.
- Change is a small, localized CSS tweak that constrains an SVG’s dimensions; it does not alter application logic, APIs, or runtime behavior beyond icon sizing, and it is unlikely to introduce regressions outside the affected selector.
- No files require special attention
<!-- greptile_other_comments_section -->
<!-- /greptile_comment -->
Most Similar PRs
#9122: fix(webchat): constrain .chat-new-messages to button size
by ridermw · 2026-02-04
84.8%
#9432: fix(ui): improve Firefox/Gecko compatibility for chat layout
by dbottme · 2026-02-05
79.4%
#9411: Fix: Web UI long message overflow causing unreadable text
by vishaltandale00 · 2026-02-05
79.3%
#6521: fix: addressed style issue for chat compose and thread on mobile
by spencer-rafada · 2026-02-01
79.2%
#16742: fix: prevent iOS Safari zoom on input focus and fix outer shell scr...
by alewcock · 2026-02-15
78.6%
#22333: Fix webchat inline image rendering and size handling
by AIflow-Labs · 2026-02-21
78.5%
#20347: fix(webchat): resolve streaming scroll race condition
by ndaemy · 2026-02-18
75.9%
#7522: fix(webchat): auto-scroll when message queue changes
by alsoknownasfoo · 2026-02-02
75.6%
#6812: fix(ui): make topbar height flexible to avoid header/title overlap
by x0m4ek · 2026-02-02
74.4%
#8284: Fix: Webchat images now persist after sending
by vishaltandale00 · 2026-02-03
74.4%