← Back to PRs

#9175: Fix: Constrain webchat 'New messages' icon size to prevent massive scaling

by vishaltandale00 open 2026-02-04 23:50 View on GitHub →
app: web-ui stale
## 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