update styles

iamping · Dec 26, 2024 · 8753592 · 8753592
1 parent df93c03
commit 8753592
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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
@@ -67,6 +67,9 @@ body {
   text-align: left;
   padding-left: 8px;
   padding-right: 4px;
+  &:last-child {
+    padding-right: 8px;
+  }
 }
 
 .table-header.sort {