Adjust drawer width in small screen

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 43c23c8f435867a3dd5af02238ef37526296e453..c72a0b7bf6c53ce60343a6001fc1cf3de5cf47a3 100644 (file)
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -95,6 +95,9 @@
 .message__reactions {
   max-width: calc(100% - 88px);
   min-width: 0;
+  @media (max-width: 1124px) {
+    max-width: 100%;
+  }
 }
 
 

diff --git a/src/app/molecules/popup-window/PopupWindow.scss b/src/app/molecules/popup-window/PopupWindow.scss
index 8dcf22002bd2eac13c1f4f31de84d02949df3e8c..421c9bbc9d05c78c7dd0c196030e0132141d07f5 100644 (file)
--- a/src/app/molecules/popup-window/PopupWindow.scss
+++ b/src/app/molecules/popup-window/PopupWindow.scss
@@ -7,8 +7,6 @@
 }
 
 .pw {
-  --popup-window-drawer-width: 280px;
-
   width: 100%;
   height: 100%;
   background-color: var(--bg-surface);

diff --git a/src/index.scss b/src/index.scss
index 6807a20a9753ba02edb80e9bdc09d88a57c9f2d9..28a80b86b31723572221d72768aa468bf1d29647 100644 (file)
--- a/src/index.scss
+++ b/src/index.scss
@@ -173,8 +173,14 @@
   --navigation-drawer-width: calc(280px + var(--border-width));
   --navigation-width: calc(var(--navigation-sidebar-width) + var(--navigation-drawer-width));
   --people-drawer-width: calc(268px - var(--border-width));
-  // large size nav drawer & people drawer width => 326px, 312px
-  // medium size nav drawer & people drawer width => 280, 268
+
+  --popup-window-drawer-width: 280px;
+  
+  @media (max-width: 1124px) {
+    --navigation-drawer-width: calc(240px + var(--border-width));
+    --people-drawer-width: calc(256px - var(--border-width));
+    --popup-window-drawer-width: 240px;
+  }
 
   /* transition curves */
   --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
@@ -185,6 +191,7 @@
   --font-secondary: 'Roboto', sans-serif;
 }
 
+
 .silver-theme {
   /* background color | --bg-[background type]: value */
   --bg-surface: hsl(0, 0%, 95%);