Centralising breakpoints

[Keshav-0907]

Increasing Access

Having a centralised approach for breakpoints will enhance the code readability, collaboration, and scalability. It will ensure a consistent and efficient approach to handling responsiveness in our project.

Feature enhancement details

The current code appears to be decentralized regarding breakpoints, which may impact maintainability and consistency
By consolidating breakpoints in a dedicated file, we can streamline development, making it easier to manage and update responsive design across the editor.

Approch

Using a centralised breakpoints.js

const breakpoints = {
  mobile: 767,
  tablet: 1024, //  Just for reference, as we don't have distinct breakpoints for tablets now
};

Importing the breakpoints in the components where we need to use media queries.

import breakpoints from './breakpoints';

const aRandomComponent = () => {
  const isMobile = useMediaQuery({ maxWidth: breakpoints.mobile });

  ....
};

I want to work on this issue

[lindapaiste]

I absolutely agree and you'll find some comments from me in the code like //TODO: centralize breakpoints.

We can create and export a useIsMobile hook that returns a boolean.

Note that there are some places on the code where used non-standard breakpoints on purpose based on the size of the content and what fits. These aren't a problem, IMO. But we do want our standard breakpoint(s) to be declared in one place instead of everywhere.

[Keshav-0907]

To handle custom breakpoints, we can pass a 'customBreakpoint' parameter to 'useIsMobile' hook.

And if the customBreakpoint is provided ---> use that value;
Otherwise --> use the default value of 767.