Fixed UI issues for Sidebar

[abirc8010]

Brief Title

This PR fixes UI issues for Sidebar making it responsive

Acceptance Criteria fulfillment

• Introduced a variable isSmallScreen to detect if the width of screen is <= 780px and adjusts the style of the component accordingly
• For small screens , styled the Sidebar with position: absolute and covering entire width by setting width to 100%

Fixes # (issue)
#629

Video/Screenshots

Screencast.from.2024-10-02.02-07-54.webm

Popup Mode:

popup.webm

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-634 after approval.

[abirc8010]

@Spiral-Memory do I need to test it on some more cases ?

[Spiral-Memory]

Really loved the thorough testing done by you in the attached video, I'll review the PR and test myself once and let you know.

Thank you so much for your contribution ❤️

[Spiral-Memory]

Once go to design variants, modern design and check if popup mode is working fine after this change and attach a video

[abirc8010]

I've attached the popup mode video ,
I haven't made any changes for the popup mode for now though , I introduced a conditional statement so that the styles are applied for the Sidebar component only

[abirc8010]

Hey @Spiral-Memory , are any more tests required ?

[Spiral-Memory]

I haven't tested it yet, let the pr preview auto deployment feature get implemented, afterwards, I'll test and let you know if any changes are required

[Spiral-Memory]

Hey @abirc8010,

I noticed two issues. Please fix them:

1. In normal mode, the sidebar title is properly visible, but when switching to a smaller screen (with less height), the title is not visible. Ensure that in both modes, the title aligns at the same height.

2. While in dev mode, the switch does not happen automatically when changing screen sizes. I have to manually open and close the sidebar to reflect the changes, which is not the intended behavior.

[abirc8010]

2. While in dev mode, the switch does not happen automatically when changing screen sizes. I have to manually open and close the sidebar to reflect the changes, which is not the intended behavior.

To fix this issue, I have to add resize event listener , will that be ok ?

[Spiral-Memory]

2. While in dev mode, the switch does not happen automatically when changing screen sizes. I have to manually open and close the sidebar to reflect the changes, which is not the intended behavior.

To fix this issue, I have to add resize event listener , will that be ok ?

But why do we need listeners ? Why can't we use media queries to handle it properly ?

[abirc8010]

But why do we need listeners ? Why can't we use media queries to handle it properly ?

The Sidebar component accepts a style prop in the form of a css object, which makes it difficult to implement media queries effectively. That's why I am considering using a resize event listener instead .
Do you have any suggestions?

[Spiral-Memory]

But why do we need listeners ? Why can't we use media queries to handle it properly ?

The Sidebar component accepts a style prop in the form of a css object, which makes it difficult to implement media queries effectively. That's why I am considering using a resize event listener instead . Do you have any suggestions?

It is not recommended to use event listeners in this use case. Try using only media queries. You can still write the CSS in the style.js file and pass it. Try to figure out a solution using media queries.

[abirc8010]

@Spiral-Memory , I have fixed the issues

[Spiral-Memory]

The approach seems fine; you are trying to add it to the global styles. However, why can't we add similar media queries and pass them directly to the sidebars, without overriding class styles globally?

[abirc8010]

I noticed that the Sidebar component from the embeddedChat ui-element only accepts style prop as JavaScript objects, which doesn't allow for media queries. As a result, I had to apply the styles using the classname in global styles .

[Spiral-Memory]

As far as I'm aware, you can set media queries in a style object as well, or try using the css attribute with Emotion/React. I'll have to look into it to confirm.

[Spiral-Memory]

Approving to test !

[Spiral-Memory]

@devanshkansagra

Could you please check, if we can use media queries in style object ?.

[Spiral-Memory]

Unnecessary spacing !

[abirc8010]

Hey @Spiral-Memory , I fixed the issue

[Spiral-Memory]

Approving to test !

[abirc8010]

Approving to test !

@Spiral-Memory do I need to make any changes?