Fix members btn not visible in small devices

diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 54c9ad8c1b8463b3db2c75527f05a8ef5686fbd4..a1f505149b46700ebc08d939e4cc4af4ea75a760 100644 (file)
--- a/src/app/molecules/message/Message.scss
+++ b/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%;
   }
 }

diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index a4915ad5e49e4d3d07a1638d6408f0d97470865b..849ba14bdce3fa188a85aeee709de6eb3431e5e2 100644 (file)
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/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"

diff --git a/src/app/organisms/room/RoomViewHeader.scss b/src/app/organisms/room/RoomViewHeader.scss
index 267cd11653b5e9a355dc355ee1b5192e5d74ecfd..fc19c064c1c06a4d82044f0d59cb5266274cb3da 100644 (file)
--- a/src/app/organisms/room/RoomViewHeader.scss
+++ b/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));

diff --git a/src/app/partials/_screen.scss b/src/app/partials/_screen.scss
index 6d524f214053001022b5f8739accf8001f73781d..99a0907b52a67ba032fb51c1c4a7ed122ac779eb 100644 (file)
--- a/src/app/partials/_screen.scss
+++ b/src/app/partials/_screen.scss
@@ -1,5 +1,5 @@
 
-$breakpoint-tablet: 900px;
+$breakpoint-tablet: 1124px;
 $breakpoint-mobile: 750px;
 
 @mixin smallerThan($deviceBreakpoint) {

diff --git a/src/index.scss b/src/index.scss
index 0276feae0d90d5a148c234e4c30fd2132e233054..b80353463405a3300046f7c5060cfe96ceb816fc 100644 (file)
--- a/src/index.scss
+++ b/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;