Responsive

[hugoponthieu]

Correct responsive bug

The goal is to resolve the following responsive problem.

Prerequisites

https://www.notion.so/Beep-4f3dd311e08a4de38fc1c901bef44322?p=50289ac4b9504ce986dddda99870872a&pm=s

Bug explanation

Visual explanation

When the user is on a screen that is smaller than or equal to lg according to the responsive design guidelines (https://tailwindcss.com/docs/responsive-design), the site display changes. At this point, two buttons appear to allow the user to open the two available menus. However, a problem arises when the user interacts with these buttons to open a menu and then resizes the browser window back to a screen size larger than lg.

In this situation, the central part of the site is no longer displayed correctly, making the layout appear broken. To remedy this situation, the user must perform the following steps immediately: he must return to the screen size less than or equal to lg, close the menu by clicking on the appropriate button, then return to a size of screen larger than lg. At this point the layout becomes correct again.

{width=1080}

Code explanation

Responsiveness on our application is managed by:

• tailwindcss classes
• two states in the application which are stored in Redux

You will be able to find everything related to responsive and which is managed by tailwind thanks to the classes {breakpoint-prefix}:{class} for example lg:hidden.

Concerning the states (Redux) you will be able to find the use of the different methods manageLeftPane, manageRightPane and others of the responsive.slice.ts file.

To understand responsive tailwind, don't forget that it is a mobile first css framework!

But here, we are mainly going to take care of the states because that is why we have this problem.
Initially, whether I am in any screen size (mobile, tablet...) my states showLeftPane and showRightPane are false.
These states will change ONLY when I click on my buttons when I am in a screen size less than or equal to lg.

If I click on this button:

The showLeftPane state goes to true and showRightPane to false (if it was true otherwise does nothing).

When I click on this other button:

The showRightPane state goes to true and showLeftPane to false (if it was true otherwise does nothing).

All this thanks to the manageLeftPane, manageRightPane methods of the responsive.slice.ts file.

When one of the two states is true the central chat is hidden. So if I resize my screen when one of the states is true the screen adapts but the chat is still hidden, so all the css classes no longer consider the chat and everything no longer works as it should.

What you have to code

If you have read everything, the objective is to reset both redux states to false when the screen size becomes greater than lg or 1024px, this should solve the problem (98% sure)

I've never done that so I don't know how to do it, but I think it's possible to do that.

If you need help you can ask dorian grasset