polar icon indicating copy to clipboard operation
polar copied to clipboard

Published 20 hours ago • verified publisher icon polarsource

UI of many pages showing inconsistencies on different screen sizes.

Open apsinghdev opened this issue 1 year ago • 2 comments
trafficstars

Description

When testing UI of different screen sizes, it's showing some inconsistencies.

Current Behavior

Home page of the website on iPad screens

Screenshot 2024-10-16 at 9 57 05 PM Screenshot 2024-10-16 at 9 57 45 PM

Product page on iPhone screens

Screenshot 2024-10-16 at 10 04 58 PM Screenshot 2024-10-16 at 10 04 18 PM

Expected Behavior

Ideally, the components of the whole UI should adjust according to the screen sizes so that the UI of the page doesn't break.

List of components that are breaking on screen size change (page by page)

  • [ ] Home page
    • [ ] text is coming out from the Revenue, Active Subscriptions, and Finance cards
    • [ ] unnecessary horizontal scrollbar in the sidebar and home page
  • [ ] Products
    • [ ] New Benefit in Benefits collides with Overview.
    • [ ] No space between Products and Overview headings
    • [ ] Description collides with Markdown format in the Edit Product section
  • [ ] Storefront
    • [ ] Subscriptions card in storefront becomes too small to see what it contains
    • [ ] Support section of the footer going right of the screen creating an unnecessary horizontal scrollbar
    • [ ] inconsistent margin of Manage Subscriptions of the Portal of Storefront
    • [ ] Confirmation section of Storefront

I can observe many inconsistencies and will add to this list.

Environment:

  • Operating System: macOS
  • Browser (if applicable): Chrome

@frankie567 Please look at this ticket and let me know if it makes sense. I am interested in making the UI responsive to all screen sizes.

apsinghdev avatar Oct 16 '24 17:10 apsinghdev

Thank you for the detailed research, @apsinghdev 👍 I think @emilwidlund will be more competent than me on this subject 😄

frankie567 avatar Oct 17 '24 07:10 frankie567

Thank you for the detailed research, @apsinghdev 👍 I think @emilwidlund will be more competent than me on this subject 😄

Thanks! There are inconsistencies that can be solved by minimising/folding the text, minimising the margins/paddings, adding breakpoints etc while some inconsistencies will probably require rethinking of design. I can list down all such occurrences if @emilwidlund wants.

apsinghdev avatar Oct 17 '24 12:10 apsinghdev

@birkjernstrom , @frankie567 would love to contribute on this if things are not fixed yet

tanvirraj avatar May 24 '25 12:05 tanvirraj