[TB] Enhance Responsiveness of ThemeBuilder Application on Mobile Devices

[Sweetdevil144]

Problem/Concern

Non responsiveness exhibited in small window view.

• This is one of the deployments where I found the issue : link to problem content

Proposed Solution

• Utilization of Hamburger menu for sidebar.
• Utilization of Flex and Grid Layouts wherever required.
  -Introduce media queries to adjust text sizes and layout dynamically based on the screen size.

[aaronreed708]

Thanks for opening the issue @Sweetdevil144! We haven't spent much time working on responsiveness, yet, since it is a design tool that isn't likely to be used on a very small screen. Probably nothing smaller than a tablet. With that in mind, do you have a suggested list of things that we could fix to assure a good user experience on a tablet? So that we can prioritize the work?

[Sweetdevil144]

Here are a few things we could prioritize:

• Optimizing the sidebar: Implementing a collapsible hamburger menu can help free up space and improve navigation.
• Flexible layouts: Using Flexbox and Grid can make the UI more adaptable, ensuring elements scale properly on various tablet sizes.
• Media queries: Adjusting basic UI components like buttons, text sizes, and spacing can greatly improve readability and interaction on smaller devices.

[kburk1997]

As discussed in the 5/16 meeting, this is not exclusively limited to mobile screens - this is an accessibility issue as well.

Web Content Accessibility Guidelines (WCAG) has a success criterion that mentions this - 1.4.10: Reflow:

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

-Vertical scrolling content at a width equivalent to 320 CSS pixels;
-Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content which require two-dimensional layout for usage or meaning.

[Sweetdevil144]

Hey @kburk1997 , you're right. This is an accessibility issue in Whole as per the WCAG guidelines as well. Enhancing the Views may prove beneficial in fixing this issue.

[aaronreed708]

You are all making great points and good suggestions. @Sweetdevil144 would you like me to assign this issue to you?

[Sweetdevil144]

Yeah sure. I'd love to work on this. I'm wrapping up the test Enhancement Issue. So, I'll start with this parallely too.