From 36c87276169553fb3e552d47b47f9839257f5b33 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Thu, 1 Jul 2021 12:55:02 +0300
Subject: [PATCH] (layout/settings-drawer) Fixed: Issues on small screen
 devices

---
 src/app/layout/layout.component.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/layout/layout.component.html b/src/app/layout/layout.component.html
index d0053290..42c07400 100644
--- a/src/app/layout/layout.component.html
+++ b/src/app/layout/layout.component.html
@@ -54,7 +54,7 @@
 </div>
 
 <fuse-drawer
-    class="w-100 min-w-100"
+    class="w-screen min-w-screen sm:w-100 sm:min-w-100"
     fixed
     transparentOverlay
     [mode]="'over'"
@@ -74,17 +74,17 @@
 
             <!-- Theme -->
             <div class="text-md font-semibold text-secondary">THEME</div>
-            <div class="grid grid-cols-3 gap-3 mt-6">
+            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
                 <ng-container *ngFor="let theme of themes">
                     <div
-                        class="flex items-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                        class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
                         [class.ring-2]="config.theme === theme[0]"
                         (click)="setTheme(theme[0])">
                         <div
-                            class="w-4 h-4 rounded-full"
+                            class="flex-0 w-3 h-3 rounded-full"
                             [style.background-color]="theme[1].primary"></div>
                         <div
-                            class="ml-2.5 font-medium leading-5"
+                            class="ml-2.5 font-medium leading-5 truncate"
                             [class.text-secondary]="config.theme !== theme[0]">
                             {{theme[0] | titlecase}}
                         </div>