Fix members btn not visible in small devices

src/app/molecules/message/Message.scss

@@ -1,6 +1,7 @@
 @use '../../atoms/scroll/scrollbar';
 @use '../../partials/text';
 @use '../../partials/dir';
+@use '../../partials/screen';
 
 .message,
 .ph-msg {
@@ -95,7 +96,7 @@
 .message__reactions {
   max-width: calc(100% - 88px);
   min-width: 0;
-  @media (max-width: 1124px) {
+  @include screen.smallerThan(tabletBreakpoint) {
     max-width: 100%;
   }
 }

src/app/organisms/room/RoomViewHeader.jsx

@@ -95,6 +95,7 @@ function RoomViewHeader({ roomId }) {
       </button>
       <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
       <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
+      <IconButton className="room-header__members-btn" onClick={() => toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} />
       <IconButton
         onClick={openRoomOptions}
         tooltip="Options"

src/app/organisms/room/RoomViewHeader.scss

@@ -32,6 +32,11 @@
     display: none;
   }
 }
+.room-header__members-btn {
+  @include screen.biggerThan(tabletBreakpoint) {
+    display: none;
+  }
+}
 
 .room-header__back-btn {
   @include dir.side(margin, 0, var(--sp-tight));

src/app/partials/_screen.scss

@@ -1,5 +1,5 @@
 
-$breakpoint-tablet: 900px;
+$breakpoint-tablet: 1124px;
 $breakpoint-mobile: 750px;
 
 @mixin smallerThan($deviceBreakpoint) {

src/index.scss

@@ -1,3 +1,5 @@
+@use './app/partials/screen';
+
 :root {
 
   /* background color | --bg-[background type]: value */
@@ -179,7 +181,7 @@
 
   --popup-window-drawer-width: 280px;
   
-  @media (max-width: 1124px) {
+  @include screen.smallerThan(tabletBreakpoint) {
     --navigation-drawer-width: calc(240px + var(--border-width));
     --people-drawer-width: calc(256px - var(--border-width));
     --popup-window-drawer-width: 240px;