Adjusted the sidebar width to cover the entire width for small screens #630

abirc8010 · 2024-09-30T14:48:09Z

Brief Title

This PR ensures the sidebar behaves responsively by making it occupy the full screen on devices with a screen width of 780px or smaller. For larger screens, the sidebar retains its original layout.

Acceptance Criteria fulfillment

For small screens (≤ 780px), the sidebar is given position: 'absolute' and a full width of 100%vw

Fixes # (issue)
#629

Video/Screenshots

Before:

Before.webm

After:

Screencast.from.2024-10-01.00-44-23.webm

… size

abirc8010 · 2024-09-30T14:50:32Z

@Spiral-Memory I have made the Sidebar responsive

Spiral-Memory · 2024-09-30T15:02:58Z

packages/react/src/views/Message/Message.styles.js

@@ -75,7 +75,7 @@ export const getMessageDividerStyles = (theme) => {
      line-height: 1rem;
      position: relative;
      display: flex;
-      z-index: 1000;
+      z-index: 1;


Is there any specific reason for changing this? The current structure uses a specific set of z-index values for different elements, so it behaves correctly during integration. Is it necessary to change it? Please look for ways to avoid this change

The z-Index is made 1 so that the date for the messages does not appear over sidebar menu when it gets adjusted to Full Screen

Spiral-Memory · 2024-09-30T15:05:11Z

packages/react/src/views/MessageAggregators/common/MessageAggregator.js

+      setIsSmallScreen(window.innerWidth <= 780);
+    };
+
+    window.addEventListener('resize', handleResize);


I suggest using media queries instead. In my opinion, a resize event listener is not needed at all. Consider how mobile devices work—will they be resizing their screens?

Spiral-Memory · 2024-09-30T15:06:47Z

packages/react/src/views/MessageAggregators/common/MessageAggregator.js

+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const viewComponentStyle = isSmallScreen


Please don't define styles here. There is nothing wrong with it, but we follow a specific structure where all major styles are in the component.style.js file, and only inline styles should be applied in the component.js file. Look at other components and please follow the same pattern.

Spiral-Memory · 2024-09-30T15:07:14Z

packages/react/src/views/RoomInformation/RoomInformation.js

+      setIsSmallScreen(window.innerWidth <= 780);
+    };
+
+    window.addEventListener('resize', handleResize);


Same comment as above !

Spiral-Memory · 2024-09-30T15:07:25Z

packages/react/src/views/RoomInformation/RoomInformation.js

+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const viewComponentStyle = isSmallScreen


Same comment as above !

Spiral-Memory · 2024-09-30T15:07:43Z

packages/react/src/views/RoomMembers/RoomMember.js

+      setIsSmallScreen(window.innerWidth <= 780);
+    };
+
+    window.addEventListener('resize', handleResize);


Same comment as above !

Spiral-Memory · 2024-09-30T15:09:17Z

Thank you so much, @abirc8010 !
The video looks great and is awesome.

However, I’ve suggested a few changes. Please go through them.

Thanks!
Happy contributing

abirc8010 · 2024-09-30T15:40:29Z

@Spiral-Memory then can I change these styles to inline styles ?

Spiral-Memory · 2024-09-30T15:41:59Z

Nope, there are many styles that you have applied for. Please follow the 'component.styles.js' approach like in other components to keep things consistent.

abirc8010 · 2024-09-30T18:52:16Z

@Spiral-Memory, I have
reverted the z-index value to 1000 ,
used media queries to adjust the width of sidebar
removed the resize event listener

Spiral-Memory · 2024-09-30T18:56:40Z

Looks good to me on an initial review, please update your 'after' videos showcasing how it behaves now after the change. I'll review it thoroughly and let you know

Awesome work 👏🎉 @abirc8010

Spiral-Memory · 2024-09-30T18:58:57Z

Hey @abirc8010

Please fix this lint issue and make sure you've formatted everything with prettier:

error Expected 1 empty line after import statement not followed by another import

abirc8010 · 2024-09-30T19:09:14Z

@Spiral-Memory I have fixed the linting issue and updated the after video

Spiral-Memory · 2024-09-30T19:12:50Z

In the video, you haven't shown, whether it behaves like before in normal screen sizes.

abirc8010 · 2024-09-30T19:17:14Z

In the video, you haven't shown, is it behaving like before in normal screen sizes.

I've updated it now

Spiral-Memory · 2024-10-01T07:13:56Z

Hey @abirc8010 ,
There are multiple issues after this merge. I would advise you to fix them as soon as possible; otherwise, I will need to revert this PR.

Some issues include:

After creating multiple threads, the scroll functionality is not working, this is true for all sidebars, after the content exceeds height, the scroll within the sidebar is not working.
On smaller screens, the content is not aligned properly in all sidebars.
On regular screens, the "Not found" messages are not center-aligned in all sidebars.
On smaller screen, in members, while the members are fetching, it is not taking the full space and takes only when it is loaded.

These are the issues I noticed after the PR was deployed, but there could be more. Please address them and thoroughly test PRs under multiple conditions to prevent such issues from recurring.

Thanks for your help.

abirc8010 · 2024-10-01T07:53:15Z

@Spiral-Memory

About the alignment , I think it can be better managed , if I can apply the inline styling to Viewcomponent and maintain a isSmallScreen variable

For rest of the issues, I will address them by today

Spiral-Memory · 2024-10-01T08:26:11Z

Another issue;

Also it has disturbed the popup mode..

I'm reverting this PR.. You can raise a different PR addressing all the concerns.
Thanks

abirc8010 · 2024-10-01T15:21:38Z

@Spiral-Memory Could you please tell me why a high value of z-index is chosen here :

and how to reproduce this :

Spiral-Memory · 2024-10-01T15:33:32Z

@Spiral-Memory Could you please tell me why a high value of z-index is chosen here :

and how to reproduce this :

The zIndex values have been in place since the start of the project. Changing one value can disrupt the project in multiple areas. To prevent this, I have designed other elements with respect to these values, ensuring nothing is affected. It is recommended to follow this pattern. However, if you do change it, you must thoroughly test everything under all possible conditions to ensure it works as expected.

To reproduce the issue, open the sidebar on a standard laptop screen and hover over the message.

Adjusted the sidebar width to cover the entire width for small screen…

1cd83a8

… size

Spiral-Memory requested changes Sep 30, 2024

View reviewed changes

abirc8010 and others added 3 commits September 30, 2024 23:06

Merge branch 'RocketChat:develop' into fix/sidebar-responsiveness

8899246

Merge branch 'develop' into fix/sidebar-responsiveness

666e778

Transferred the styles to styles.js files

3b8fdc9

Fixed Linting Issue

67201f9

Spiral-Memory approved these changes Sep 30, 2024

View reviewed changes

Spiral-Memory merged commit 0aafed8 into RocketChat:develop Sep 30, 2024
3 checks passed

abirc8010 deleted the fix/sidebar-responsiveness branch October 2, 2024 12:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adjusted the sidebar width to cover the entire width for small screens #630

Adjusted the sidebar width to cover the entire width for small screens #630

abirc8010 commented Sep 30, 2024 •

edited by Spiral-Memory

Loading

abirc8010 commented Sep 30, 2024

Spiral-Memory Sep 30, 2024

abirc8010 Sep 30, 2024

Spiral-Memory Sep 30, 2024

Spiral-Memory Sep 30, 2024

Spiral-Memory Sep 30, 2024 •

edited

Loading

Spiral-Memory Sep 30, 2024

Spiral-Memory Sep 30, 2024

Spiral-Memory commented Sep 30, 2024

abirc8010 commented Sep 30, 2024

Spiral-Memory commented Sep 30, 2024

abirc8010 commented Sep 30, 2024

Spiral-Memory commented Sep 30, 2024

Spiral-Memory commented Sep 30, 2024 •

edited

Loading

abirc8010 commented Sep 30, 2024

Spiral-Memory commented Sep 30, 2024 •

edited

Loading

abirc8010 commented Sep 30, 2024 •

edited

Loading

Spiral-Memory commented Oct 1, 2024 •

edited

Loading

abirc8010 commented Oct 1, 2024

Spiral-Memory commented Oct 1, 2024 •

edited

Loading

abirc8010 commented Oct 1, 2024

Spiral-Memory commented Oct 1, 2024

Adjusted the sidebar width to cover the entire width for small screens #630

Adjusted the sidebar width to cover the entire width for small screens #630

Conversation

abirc8010 commented Sep 30, 2024 • edited by Spiral-Memory Loading

Brief Title

Acceptance Criteria fulfillment

Video/Screenshots

abirc8010 commented Sep 30, 2024

Spiral-Memory Sep 30, 2024

Choose a reason for hiding this comment

abirc8010 Sep 30, 2024

Choose a reason for hiding this comment

Spiral-Memory Sep 30, 2024

Choose a reason for hiding this comment

Spiral-Memory Sep 30, 2024

Choose a reason for hiding this comment

Spiral-Memory Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

Spiral-Memory Sep 30, 2024

Choose a reason for hiding this comment

Spiral-Memory Sep 30, 2024

Choose a reason for hiding this comment

Spiral-Memory commented Sep 30, 2024

abirc8010 commented Sep 30, 2024

Spiral-Memory commented Sep 30, 2024

abirc8010 commented Sep 30, 2024

Spiral-Memory commented Sep 30, 2024

Spiral-Memory commented Sep 30, 2024 • edited Loading

abirc8010 commented Sep 30, 2024

Spiral-Memory commented Sep 30, 2024 • edited Loading

abirc8010 commented Sep 30, 2024 • edited Loading

Spiral-Memory commented Oct 1, 2024 • edited Loading

abirc8010 commented Oct 1, 2024

Spiral-Memory commented Oct 1, 2024 • edited Loading

abirc8010 commented Oct 1, 2024

Spiral-Memory commented Oct 1, 2024

abirc8010 commented Sep 30, 2024 •

edited by Spiral-Memory

Loading

Spiral-Memory Sep 30, 2024 •

edited

Loading

Spiral-Memory commented Sep 30, 2024 •

edited

Loading

Spiral-Memory commented Sep 30, 2024 •

edited

Loading

abirc8010 commented Sep 30, 2024 •

edited

Loading

Spiral-Memory commented Oct 1, 2024 •

edited

Loading

Spiral-Memory commented Oct 1, 2024 •

edited

Loading