Filters Bar Not Visible When the Window is Less Than 1266 px Wide

https://github.com/Natixar/natixar-frontend/blob/4aef300952a5d5257cd12d74c276b2fd77c7eb72/src/app-layout/index.tsx#L49

Problem:

The element with all the filters is not displayed when the englobing box is narrower than breakpoint "lg" (992 px).

Since this requires the window to be at last 1266px wide, it makes our software unusable on standard HD screens (1080 x 1024), including most mobile phones (confirmed on mine - Pixel 4a - Full HD screen).

The problem comes from this code:

    <div>
      {!downLG ? (
        <AppBarStyled open={drawerOpen} {...appBar}>
          {mainHeader}
          {!pathnamesOfInterest.includes(pathname) ? null : subHeader}
          {isShowExtraHeader && extraHeader}
        </AppBarStyled>
      ) : (
        <AppBar {...appBar}>{mainHeader}</AppBar>
      )}
    </div>

Steps to Reproduce:

Authenticate and enter the Dashboard
Resize the window until the header bar with all the filters disappears
Observe that there is no way to access the filters unless the window is resized again to be wider than approx 1266px

Desired Behaviour

Filters in the "SubHeaderContent" must always be accessible. It is better if they are called in with a button, a settings wheel or a funnel filter button when the screen is small, but it's impossible to work without access to these controls.

Only the "ExtraHeaderContent", which only contains a "back" button, can be omitted when the screen is small.

Natixar / natixar-frontend