From d46b046f2da29f257770fb74b1ba25b03f4bddb0 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 26 Dec 2021 16:16:58 +0530
Subject: [PATCH] Adjust drawer width in small screen

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/message/Message.scss          |  3 +++
 src/app/molecules/popup-window/PopupWindow.scss |  2 --
 src/index.scss                                  | 11 +++++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 43c23c8..c72a0b7 100644
--- 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 8dcf220..421c9bb 100644
--- 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 6807a20..28a80b8 100644
--- 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%);