From 8753592f4d73ce08ffd70ad63fbde1a52c82d3a8 Mon Sep 17 00:00:00 2001
From: "Ping R." <witcha.rath@gmail.com>
Date: Thu, 26 Dec 2024 17:49:11 +0700
Subject: [PATCH] update styles

---
 src/components/app/dropdown.tsx | 11 +++++++++--
 src/components/app/settings.tsx |  6 +++++-
 src/main.css                    |  3 +++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/app/dropdown.tsx b/src/components/app/dropdown.tsx
index a252881..02d1dab 100644
--- a/src/components/app/dropdown.tsx
+++ b/src/components/app/dropdown.tsx
@@ -6,6 +6,7 @@ import { RadioFilter } from './filter';
 import { DropdownProps, SelectOption } from '../../models/common';
 import { useAtom, useAtomValue } from 'jotai';
 import { appDropdownAtom, dropdownFnAtom, manualFilterAtom } from '../../state/atom';
+import { useMediaQuery } from 'usehooks-ts';
 
 export const Dropdown: FC<DropdownProps> = ({ optionList, type }) => {
   const filterChanged = useAtomValue(manualFilterAtom);
@@ -30,6 +31,8 @@ export const Dropdown: FC<DropdownProps> = ({ optionList, type }) => {
     setOpen(false);
   };
 
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
   useEffect(() => {
     if (type === 'Preset') {
       setValue(dropdownState.preset);
@@ -50,11 +53,15 @@ export const Dropdown: FC<DropdownProps> = ({ optionList, type }) => {
   }, [filterChanged, type, setDropdownState]);
 
   return (
-    <PopoverRoot open={open} onOpenChange={(e) => setOpen(e.open)} positioning={{ placement: 'bottom-start' }}>
+    <PopoverRoot
+      modal={true}
+      open={open}
+      onOpenChange={(e) => setOpen(e.open)}
+      positioning={{ placement: 'bottom-start' }}>
       <PopoverTrigger asChild>
         <Button as={'div'} size="xs" variant="outline" border={0} paddingRight={1}>
           <Text color="gray.500">
-            {type}:{' '}
+            {isMobile && type === 'View' ? `` : `${type}: `}
             <Text as="span" color="black">
               {value.title}
             </Text>
diff --git a/src/components/app/settings.tsx b/src/components/app/settings.tsx
index f374f52..d6a4063 100644
--- a/src/components/app/settings.tsx
+++ b/src/components/app/settings.tsx
@@ -16,7 +16,11 @@ export const Settings: FC<SettingsProps> = () => {
   };
 
   return (
-    <PopoverRoot open={open} onOpenChange={(e) => setOpen(e.open)} positioning={{ placement: 'bottom-end' }}>
+    <PopoverRoot
+      modal={true}
+      open={open}
+      onOpenChange={(e) => setOpen(e.open)}
+      positioning={{ placement: 'bottom-end' }}>
       <PopoverTrigger asChild>
         <IconButton title="Settings" size="xs" variant="outline" border={0}>
           <PiGearBold />
diff --git a/src/main.css b/src/main.css
index 2eaafcd..18a746b 100644
--- a/src/main.css
+++ b/src/main.css
@@ -67,6 +67,9 @@ body {
   text-align: left;
   padding-left: 8px;
   padding-right: 4px;
+  &:last-child {
+    padding-right: 8px;
+  }
 }
 
 .table-header.sort {