mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 11:37:58 +00:00
fix: Inconsistent widget bubble focus outline shape (#11345)
# Pull Request Template ## Description This PR resolves the issue where the focus outline for the standard bubble type appears as a square in Safari, while it appears circular in Chrome. Fixes [CW-4252](https://linear.app/chatwoot/issue/CW-4252/v41-circle-around-campaign-pop-up-warped), https://github.com/chatwoot/chatwoot/issues/11327 **Cause** In Chrome, the focus outline for the standard bubble type is circular, but in Safari, it appears square. This is due to a 20px margin on the SVG inside the bubble. **Solution** The `20px` margin was removed from the SVG, fixing the focus outline to appear circular in Safari browser. ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### Loom Video https://www.loom.com/share/cc4244f369f84b98afaef539b79abcfe?sid=e957df16-1a53-4349-8bdc-705b2ed82d45 ### Screenshots **Before** https://www.loom.com/share/e858417722c64df6801ea87e4b89779f?sid=81a0acec-c5f0-4daa-832c-1f23289e2352 <img width="100" alt="image" src="https://github.com/user-attachments/assets/19c6b62c-96da-485b-9fe8-223065415369" /> **After** https://www.loom.com/share/3946546382884a33a8fef89f81faf7c2?sid=feeaf18c-2b3d-4d4f-bcdf-70335b456dd1 <img width="100" alt="image" src="https://github.com/user-attachments/assets/0e83d9e3-3153-47ef-9f2d-0a2f7270935c" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
This commit is contained in:
@@ -135,7 +135,6 @@ export const SDK_CSS = `
|
||||
.woot-widget-bubble svg {
|
||||
all: revert;
|
||||
height: 24px;
|
||||
margin: 20px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user