google
Android - Galaxy 22 and 22 ultra UI issues
Bug Description
Bug bash issue: https://app.asana.com/0/1202258919887896/1202424752772575 please see Asana for background
We should hide the "Site Kit" part of the logo in screens that small.
Steps to reproduce
- Go to '...'
- Click on '....'
- Scroll down to '....'
- See error
Screenshots
Additional Context
- PHP Version:
- OS: [e.g. iOS]
- Browser: [e.g. chrome, safari]
- Plugin Version: [e.g. 22]
- Device: [e.g. iPhone6]
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
Implementation Brief
Test Coverage
QA Brief
Changelog entry
@jimmymadon I think most of the desired outcome is probably obvious here where things are overflowing. We should consider reducing the logo to just the G in portrait-phone viewports though. Last I recall checking this I wasn't able to reproduce, but I also didn't see it with a Galaxy device 😄
@aaemnnosttv I checked this on my personal Galaxy S21 Ultra too (which has the same screen width as the S22 Ultra). Everything looks good as per the below screenshots. The logo does overflow on smaller screens when testing on the browser.
Screenshots
@mohitwp I can reproduce the Logo overflows on smaller screen widths (< 375px). However, I cannot reproduce the overflows in the second screenshot anymore - I believe the Dashboard Sharing popup overflows may have been resolved in another similar issue. Can you please check again?
@aaemnnosttv We don't have a breakpoint smaller than 450px ($width-xsmall). So should we change the logo for all screens below this width? The affected screen widths are approx. < 375px.
@aaemnnosttv just following up here so we can potentially get this one moving. Also ccing @eugene-manuilov if you can help?
@jimmymadon is this the only issue remaining here?
Screenshot
If anything, I wonder if we should hide the "Site Kit" part of the logo in mobile. Thoughts @marrrmarrr ?
@jimmymadon
Actually there are different versions of Galaxy device available on BrowserStack. I checked in Galaxy S21 device which viewports is 360X649. Issue not appearing in Galaxy S22+ which have width >375. So, yes issue coming only in devices <375. Regarding 2nd issue related to Dashboard sharing modal - I'm also not able to reproduce it now. Thank you !
Recapping discussion about this one earlier it seems the only thing left here is the "Site Kit" portion of the logo getting cut off in viewports with a width < 375 px. For our smallest breakpoint we should hide this part of the logo.
Anything else to mention here @jimmymadon ?
QA Update: ✅
Verified:
- Opened SK on mobile with a width <449px and the text part of a logo does not appear.
- Tested on the devices in the ticket and a few other Android and iPhone devices
- Tested on devices with different browsers, i.e. chrrome, firefox, and safari.
