style: update style

src/module/user/member/ui/tab_list_member.tsx

@@ -1,6 +1,6 @@
 import { currentScroll, globalRole, SkeletonSingle, SkeletonUser, TEMA } from "@/module/_global"
 import { Box, Text, TextInput, Divider, Avatar, Grid, Group, ActionIcon, Skeleton } from "@mantine/core"
-import { useShallowEffect } from "@mantine/hooks"
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { HiMagnifyingGlass } from "react-icons/hi2"
@@ -24,6 +24,7 @@ export default function TabListMember() {
    const tema = useHookstate(TEMA)
    const { value: containerRef } = useHookstate(currentScroll);
    const [isPage, setPage] = useState(1)
+   const isMobile2 = useMediaQuery("(max-width: 438px)");
 
 
    async function getAllUser(loading: boolean) {
@@ -105,8 +106,8 @@ export default function TabListMember() {
                   .fill(null)
                   .map((_, i) => (
                      <Box key={i} mb={10}>
-                     <SkeletonUser/>
-                   </Box>
+                        <SkeletonUser />
+                     </Box>
                   ))
                :
                <Box>
@@ -117,24 +118,41 @@ export default function TabListMember() {
                      :
                      dataMember.map((v, i) => {
                         return (
-                           <Box key={i}>
+                           <Box my={10} key={i}>
                               <Box onClick={() => {
                                  router.push(`/member/${v.id}`)
                               }}>
-                                 <Grid p={10} gutter={{
-                                    base: 60,
-                                    xl: "xs"
-                                 }} align="center">
-                                    <Grid.Col span={2}>
+                                 <Grid p={5} align="center">
+                                    <Grid.Col
+                                       span={{
+                                          base: 1,
+                                          xs: 1,
+                                          sm: 1,
+                                          md: 1,
+                                          lg: 1,
+                                          xl: 1,
+                                       }}
+                                    >
                                        <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size={50} alt="image" />
                                     </Grid.Col>
-                                    <Grid.Col span={9}>
-                                       <Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
-                                       <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
+                                    <Grid.Col
+                                       span={{
+                                          base: 11,
+                                          xs: 11,
+                                          sm: 11,
+                                          md: 11,
+                                          lg: 11,
+                                          xl: 11,
+                                       }}
+                                    >
+                                       <Text fw={'bold'} pl={isMobile2 ? 40 : 30} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
+                                       <Text fw={'lighter'} pl={isMobile2 ? 40 : 30} fz={12}>{v.group + ' - ' + v.position}</Text>
                                     </Grid.Col>
                                  </Grid>
                               </Box>
-                              <Divider my={10} />
+                              <Box mt={10}>
+                                 <Divider size={"xs"} />
+                              </Box>
                            </Box>
                         )
                      })