From 729cefb06cebf07b92656625d3736cdd74dfe83b Mon Sep 17 00:00:00 2001
From: Hoan Luu Huu <110280845+xquanluu@users.noreply.github.com>
Date: Mon, 16 Oct 2023 17:51:49 +0700
Subject: [PATCH] fix css for recent calls in small screen (#331)

---
 src/styles/_filters.scss | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/styles/_filters.scss b/src/styles/_filters.scss
index 52602ea..48c331b 100644
--- a/src/styles/_filters.scss
+++ b/src/styles/_filters.scss
@@ -19,14 +19,45 @@
       grid-gap: ui-vars.$px02;
     }
   }
-
+  > :first-child {
+    margin-left: auto;
+  }
   &--multi {
     overflow-x: auto;
     white-space: nowrap;
     grid-gap: ui-vars.$px02;
 
-    > :first-child {
-      margin-left: auto;
+    @media (max-width: 1400px) {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+
+      > * {
+        justify-self: end;
+      }
+    }
+
+    @media (max-width: 1200px) {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      > * {
+        justify-self: end;
+      }
+    }
+
+    @media (max-width: 1000px) {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      > * {
+        justify-self: end;
+      }
+    }
+
+    @media (max-width: 500px) {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+      > * {
+        justify-self: end;
+      }
     }
   }