Sidebar not responsive as per the screen size, post scroll fix

[sagemihir]

Current behaviour

Post the fix of the sidebar position="fixed" to be static and not scroll with the right side of the page, the sidebar is not responsive and is not able to settle at the bottom, please refer the video.

Expected behaviour

CodeSandbox or Storybook URL

https://codesandbox.io/s/dreamy-night-4nqw2q?file=/src/index.js:928-1013

JIRA Ticket (Sage Only)

SBS-32854

Suggested Solution

No response

Carbon Version

110.2.0

Design Tokens Version

No response

What browsers are you seeing the problem on?

Firefox, Chrome

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[mkrds]

Hi @sagemihir, could you please provide a codesandbox example that replicates the issue shown in the first video? I assume you're not using the Sidebar component provided by this library?

[Parsium]

Hi @sagemihir, please could you amend the codesandbox to show an example of responsive behaviour you would expect to work? Currently the codesandbox you linked in the issue is not a responsive example, as it will always show the two Boxes side by side. You can achieve the responsive behaviour you are looking for using our custom useMediaQuery hook to create a breakpoint for small screen sizes. If there is a problem with this hook, please let us know.

[TSageSpencer]

Hi, @sagemihir and @Parsium,

Just wondering where this is up to?

[sagemihir]

Hi @TSageSpencer ,

Would try to look into this issue asap, the only question I have is with the current implementation, if the sidebar is not "fixed"it works fine and is responsive. Should it not behave the same with the current implementation and keep the sidebar fixed ?

Thanks

[TSageSpencer]

Hi @sagemihir,

I believe that is what we want correct: We want the implementation to be responsive exactly the same but the side bar just you be fixed so that when the user scrolls they aren't cutting the figures head off

[Parsium]

Hi @sagemihir, do you have any further updates regarding this issue? Does using the useMediaQuery hook solve your issue?

[sagemihir]

Hi @Parsium , as I mentioned in the previous messages, the current implementation of the sidebar does not require the use of useMediaQuery and the sidebar is adaptive as per the screen sized without using them. I doubt if this should change when the side bars vertical scroll is fixed ?.

[Parsium]

Update on this issue - upon investigating the problem with @sagemihir in their project - this seemed to be a local CSS issue. I have proposed a solution for this on their project repository for further consideration.

Given this no longer requires a carbon fix, I will close this issue, but of course feel free to contact me @sagemihir if you and your team encounter any further problems 👍🏼