fix(CommunitiesPortal): Improve responsive layout on small viewports #18959
Conversation
Jenkins BuildsClick to see older builds (42)
|
|
nice improvement, as far as i can see from the mobile pr videos of lately mobile is starting to look pretty good! is it possible to have the ‘join community’ and ‘create community’ buttons stacked as soon as their texts dont fit the width? and then make the texts be visible at all times by either reducing text size or wrap it over multiple lines? might be useful approach for other similar situations as well (if any) if its a quick fix edit: or maybe keep buttons on same line but only wrap text over two lines and adjust size somewhat. and maybe even change copy to ‘create community’ dropping the ‘new’. basically just whatever works to keep button text visible |
Could work... until you involve the translations :) And we recently jumped on that board 💪 |
yeah adjusting copy is probably not the cleanest approach (the translation prs ive seen so far looked pretty cool as well btw, gonna be a banger release) |
alexjba
left a comment
alexjba
left a comment
There was a problem hiding this comment.
Very nice! Just a minor comment
BTW, there's yet another approach we can borrow from the Home Screen. In the Home Screen it really doesn't matter what's the device width. We're setting a min width for the card and a min number of columns. If it doesn't fit we'll scale down the cards. It would probably work even better here because the cards are huge
Yes, you're right, it's a recurring problem, not just for this specific page. Also, as @caybro says, there's the added factor of translations. So yes, I agree that we need to find a generic way to solve it. We'll escalate this to the design team so we can find a generic, uniform, and consistent solution. Thank you very much for the feedback! |
noeliaSD
force-pushed
the
fix/issue-18838
branch
from
850a81b to
ff846ff
Compare
Applied same logic than with |
micieslak
left a comment
micieslak
left a comment
There was a problem hiding this comment.
Code looks good but when testing on my OnePlus Open:
After opening on folded phone:
The grid is not scrollable. All is fixed.
After unfolding:
The view becomes usable, looks ok.
After folding again:
The view is now scrollable, but the first item is misaligned.
Moreover, the view doesn't look correct in windowed mode:
The content is clipped there.
There was a problem hiding this comment.
One another issue, regarding Desktop (not sure if it's regression or old issue) - scrolling by mouse drag is broken:
- only regular tiles are responding to drag (advert tile and placeholders do not respond)
- space around tiles is not draggable
- drag is immediately interrupted (just few pixels of vertical movement only)
Screencast.from.07.10.2025.15.45.35.webm
Yeah.. I can see this issue already on master for both |
noeliaSD
force-pushed
the
fix/issue-18838
branch
2 times, most recently
from
766a901 to
383c34f
Compare
- Slightly reduce card size on compact screens to prevent cuts. - Reorder header in compact mode to prioritize title & primary actions; move secondary info. - No API changes; larger screens unaffected. Fixes #18838
noeliaSD
force-pushed
the
fix/issue-18838
branch
from
383c34f to
88d2feb
Compare
Created separated task for it: #18981 |
micieslak
left a comment
micieslak
left a comment
There was a problem hiding this comment.
Great! After recent changes it works nicely!
6 participants
Fixes #18838
What does the PR do
Quick, low-risk improvement for small screens in the
Communities Portal. It refines layout behavior to keep the UI usable on compact viewports, serving as an interim step while we define the app-wide responsive strategy.Affected areas
Communities PortalArchitecture compliance
My PR is consistent with this document: QML Architecture Guidelines
Screencapture of the functionality
Screen.Recording.2025-10-06.at.11.32.15.mov
Impact on end user
Communities Portallayout fits better on small screen sizesHow to test
Play with different screen sizes on
Communities PortalRisk
None