Fix Table Admin Preview Desktop

Seeder Menu Kesehatan
2026-01-13 11:45:55 +08:00
parent 903dc74cca
commit 184854d273
115 changed files with 1508 additions and 695 deletions
--- a/src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx
@@ -102,8 +102,10 @@ function ListKategoriBerita({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0}>
            <TableThead>
              <TableTr>
                <TableTh w="50%">
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx
@@ -79,8 +79,10 @@ function ListBerita({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0}>
+        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover
+            layout="fixed" // 🔥 PENTING
+            withColumnBorders={false} miw={0}>
            <TableThead>
              <TableTr>
                <TableTh w="50%">Judul</TableTh>
--- a/src/app/admin/(dashboard)/desa/gallery/foto/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/foto/page.tsx
@@ -85,8 +85,10 @@ function ListFoto({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh>Judul Foto</TableTh>
--- a/src/app/admin/(dashboard)/desa/gallery/video/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/video/page.tsx
@@ -87,66 +87,66 @@ function ListVideo({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Box style={{ overflowX: 'auto' }}>
-            <Table highlightOnHover striped verticalSpacing="sm">
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul Video</TableTh>
-                  <TableTh>Tanggal</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Aksi</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.length > 0 ? (
-                  filteredData.map((item) => (
-                    <TableTr key={item.id}>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
-                          {item.name}
-                        </Text>
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Text fz="sm" c="dimmed" lh={1.45}>
-                          {new Date(item.createdAt).toLocaleDateString('id-ID', {
-                            day: 'numeric',
-                            month: 'long',
-                            year: 'numeric',
-                          })}
-                        </Text>
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Text fz="sm" lh={1.45} truncate="end" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Button
-                          variant="light"
-                          color="blue"
-                          onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}
-                          fz="sm"
-                          px="xs"
-                        >
-                          <IconDeviceImac size={18} />
-                          <Text ml={5}>Detail</Text>
-                        </Button>
-                      </TableTd>
-                    </TableTr>
-                  ))
-                ) : (
-                  <TableTr>
-                    <TableTd colSpan={4}>
-                      <Center py={24}>
-                        <Text c="dimmed" fz="sm" lh={1.4}>
-                          Tidak ada video yang cocok
-                        </Text>
-                      </Center>
+        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm">
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul Video</TableTh>
+                <TableTh>Tanggal</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Text fz="sm" c="dimmed" lh={1.45}>
+                        {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                          day: 'numeric',
+                          month: 'long',
+                          year: 'numeric',
+                        })}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Text fz="sm" lh={1.45} truncate="end" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}
+                        fz="sm"
+                        px="xs"
+                      >
+                        <IconDeviceImac size={18} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
                    </TableTd>
                  </TableTr>
-                )}
-              </TableTbody>
-            </Table>
-          </Box>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={24}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada video yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
        </Box>

        {/* Mobile Cards */}
--- a/src/app/admin/(dashboard)/desa/layanan/ajukan_permohonan/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/ajukan_permohonan/page.tsx
@@ -76,8 +76,10 @@ function ListAjukanPermohonan({ search }: { search: string }) {
        </Title>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0}>
            <TableThead>
              <TableTr>
                <TableTh fz="sm" fw={600} lh={1.4}>Nama</TableTh>
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx
@@ -99,7 +99,9 @@ function ListSuratKeterangan({ search }: { search: string }) {

        {/* Desktop Table */}
        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh fz="sm" fw={600} ta="left">
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/page.tsx
@@ -85,8 +85,10 @@ function ListPelayananTelunjukSakti({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh fz="sm" fw={600} ta="left" c="gray.8" w="30%">
--- a/src/app/admin/(dashboard)/desa/penghargaan/page.tsx
+++ b/src/app/admin/(dashboard)/desa/penghargaan/page.tsx
@@ -81,8 +81,10 @@ function ListPenghargaan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh w="35%">Nama</TableTh>
--- a/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/page.tsx
@@ -116,8 +116,10 @@ function ListKategoriPengumuman({ search }: { search: string }) {
            </Stack>
          </Box>

-          <Box visibleFrom="md">
-            <Table highlightOnHover striped withRowBorders>
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+           <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped withRowBorders>
              <TableThead>
                <TableTr>
                  <TableTh w="60%">
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx
@@ -83,8 +83,10 @@ function ListPengumuman({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh fz="sm" fw={600} ta="left">
--- a/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/page.tsx
@@ -96,8 +96,10 @@ function ListKategoriPotensi({ search }: { search: string }) {
          </Group>

          {/* Desktop Table */}
-          <Box visibleFrom="md">
-            <Table highlightOnHover striped withRowBorders miw={700}>
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+           <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped withRowBorders miw={700}>
              <TableThead>
                <TableTr>
                  <TableTh w="60%">
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx
@@ -90,8 +90,10 @@ function ListPotensi({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={700}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={700}>
            <TableThead>
              <TableTr>
                <TableTh w="20%">
--- a/src/app/admin/(dashboard)/desa/profil/profil-perbekel-dari-masa-ke-masa/page.tsx
+++ b/src/app/admin/(dashboard)/desa/profil/profil-perbekel-dari-masa-ke-masa/page.tsx
@@ -80,8 +80,10 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0}>
            <TableThead>
              <TableTr>
                <TableTh fz="sm" fw={600} ta="left" c="dark.9">Nama Perbekel</TableTh>
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/page.tsx
@@ -98,7 +98,7 @@ function ListAPBDesa({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/page.tsx
@@ -114,7 +114,7 @@ function ListBelanja({ search }: { search: string }) {
          </Button>
        </Group>

-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/page.tsx
@@ -108,7 +108,7 @@ function ListPembiayaan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            striped
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/page.tsx
@@ -111,7 +111,7 @@ function ListPendapatan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/page.tsx
@@ -104,7 +104,7 @@ function ListPegawaiBumdes({ search }: { search: string }) {
        </Group>

        {/* Desktop: Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/page.tsx
@@ -105,7 +105,7 @@ function ListPosisiOrganisasiBumDes({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx
@@ -129,7 +129,7 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/page.tsx
@@ -112,7 +112,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx
@@ -152,7 +152,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx
@@ -133,7 +133,7 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
          </Group>

          {/* Desktop Table */}
-          <Box visibleFrom="md">
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
            <Table
              highlightOnHover
              miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/page.tsx
@@ -99,7 +99,7 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/page.tsx
@@ -82,7 +82,7 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/page.tsx
@@ -94,7 +94,7 @@ function ListKategoriProduk({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/page.tsx
@@ -81,7 +81,7 @@ function ListPasarDesa({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx
@@ -109,7 +109,7 @@ function ListProgramKemiskinan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx
@@ -106,7 +106,7 @@ function ListSektorUnggulanDesa({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
@@ -73,7 +73,9 @@ function ListAjukanIdeInovatif({ search }: { search: string }) {
      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
        <Title order={4}>Daftar Ide Inovatif</Title>
        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh style={{ width: '20%' }}>Nama</TableTh>
--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx
@@ -83,7 +83,7 @@ function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/page.tsx
@@ -84,7 +84,7 @@ function ListKolaborasiInovasi({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/page.tsx
@@ -103,7 +103,7 @@ function ListMitraKolaborasi({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/administrasi-online/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/administrasi-online/page.tsx
@@ -70,7 +70,7 @@ function ListAdministrasiOnline({ search }: { search: string }) {
        </Title>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-layanan/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-layanan/page.tsx
@@ -90,7 +90,7 @@ function ListJenisLayanan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-pengaduan/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-pengaduan/page.tsx
@@ -96,7 +96,7 @@ function ListJenisPengaduan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/pengaduan-masyarakat/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/pengaduan-masyarakat/page.tsx
@@ -79,7 +79,7 @@ function ListPengaduanMasyarakat({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx
@@ -132,7 +132,7 @@ function ListProgramKreatifDesa({ search }: { search: string }) {
              </Button>
            </Group>

-            <Box visibleFrom="md">
+           <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
              <Table
                highlightOnHover
                miw={0}
--- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
@@ -93,8 +93,10 @@ function ListKeamananLingkungan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}
            miw={0}
            style={{ tableLayout: 'fixed', width: '100%' }}>
            <TableThead>
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/page.tsx
@@ -93,7 +93,7 @@ function ListKontakItem({ search }: { search: string }) {
        </Group>

        {/* Desktop: Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/page.tsx
@@ -92,7 +92,7 @@ function ListKontakDaruratKeamanan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx
@@ -88,7 +88,7 @@ function ListLaporanPublik({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx
@@ -92,7 +92,7 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx
@@ -89,7 +89,7 @@ function ListPolsekTerdekat({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx
@@ -85,7 +85,7 @@ function ListTipsKeamanan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/page.tsx
@@ -84,7 +84,9 @@ function ListArtikelKesehatan({ search }: { search: string }) {

        {/* Tabel */}
        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh style={{ minWidth: 200 }}>Judul</TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/page.tsx
@@ -81,8 +81,10 @@ function ListDokterTenagaMedis({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh><Text fz="sm" fw={600} lh={1.4}>Nama Dokter</Text></TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/page.tsx
@@ -170,8 +170,10 @@ function ListFasilitasKesehatan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh>Fasilitas Kesehatan</TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/page.tsx
@@ -94,8 +94,10 @@ function ListTarifLayanan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/page.tsx
@@ -85,8 +85,10 @@ function ListJadwalKegiatan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh fz="sm" fw={600} lh={1.2}>Nama</TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/page.tsx
@@ -147,8 +147,10 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh>Nama</TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/page.tsx
@@ -99,8 +99,10 @@ function ListKelahiran({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover fz="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} fz="md">
            <TableThead>
              <TableTr>
                <TableTh><Text fz="sm" fw={600} lh={1.4}>Nama</Text></TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/page.tsx
@@ -95,8 +95,10 @@ function ListKematian({ search }: { search: string }) {
        </Group>

        {/* Tabel untuk desktop */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh><Text fz="sm" fw={600} lh={1.2}>Nama</Text></TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/page.tsx
@@ -234,7 +234,7 @@ function GrafikPersentaseKelahiranKematian() {


                {/* Desktop: Table */}
-                <Box visibleFrom="md">
+               <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
                  <Table striped withTableBorder highlightOnHover>
                    <Table.Thead>
                      <Table.Tr>
--- a/src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx
@@ -93,7 +93,9 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {

        {/* Desktop Table */}
        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh>Judul</TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/edit/page.tsx
@@ -159,8 +159,8 @@ function EditKontakDarurat() {
          <TextInput
            value={formData.whatsapp}
            onChange={(e) => setFormData(prev => ({ ...prev, whatsapp: e.target.value }))}
-            label="Whatsapp"
-            placeholder="Masukkan whatsapp"
+            label="Telepon"
+            placeholder="Masukkan telepon"
            required
          />

--- a/src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/page.tsx
@@ -73,7 +73,7 @@ function DetailKontakDarurat() {
              </Box>

              <Box>
-                <Text fz="lg" fw="bold">Whatsapp</Text>
+                <Text fz="lg" fw="bold">Telepon</Text>
                <Text fz="md" c="dimmed">{data.whatsapp || '-'}</Text>
              </Box>

--- a/src/app/admin/(dashboard)/kesehatan/kontak-darurat/create/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/kontak-darurat/create/page.tsx
@@ -120,8 +120,8 @@ function CreateKontakDarurat() {
            onChange={(val) => {
              kontakDaruratState.create.form.whatsapp = val.target.value;
            }}
-            label={<Text fz="sm" fw="bold">Whatsapp</Text>}
-            placeholder="Masukkan whatsapp"
+            label={<Text fz="sm" fw="bold">Telepon</Text>}
+            placeholder="Masukkan telepon"
            required
          />

--- a/src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx
@@ -83,8 +83,10 @@ function ListKontakDarurat({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh>Judul</TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx
@@ -87,8 +87,10 @@ function ListPenangananDarurat({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh fz="sm" fw={600} lh={1.4}>Judul</TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx
@@ -87,31 +87,34 @@ function ListPosyandu({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}
+    >
            <TableThead>
              <TableTr>
-                <TableTh fz="sm" fw={600} ta="left" lh={1.4}>Nama Posyandu</TableTh>
-                <TableTh fz="sm" fw={600} ta="left" lh={1.4}>Nomor Posyandu</TableTh>
-                <TableTh fz="sm" fw={600} ta="left" lh={1.4}>Deskripsi</TableTh>
-                <TableTh fz="sm" fw={600} ta="left" lh={1.4}>Aksi</TableTh>
+                <TableTh w={220} fz="sm" fw={600} ta="left" lh={1.4}>Nama Posyandu</TableTh>
+                <TableTh w={220} fz="sm" fw={600} ta="left" lh={1.4}>Nomor Posyandu</TableTh>
+                <TableTh w={220} fz="sm" fw={600} ta="left" lh={1.4}>Deskripsi</TableTh>
+                <TableTh w={150} fz="sm" fw={600} ta="left" lh={1.4}>Aksi</TableTh>
              </TableTr>
            </TableThead>
            <TableTbody>
              {filteredData.length > 0 ? (
                filteredData.map((item) => (
                  <TableTr key={item.id}>
-                    <TableTd>
+                    <TableTd w={220}>
                      <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
                        {item.name}
                      </Text>
                    </TableTd>
-                    <TableTd>
+                    <TableTd w={220}>
                      <Text fz="sm" c="dimmed" lh={1.5}>
                        {item.nomor || '-'}
                      </Text>
                    </TableTd>
-                    <TableTd>
+                    <TableTd w={220}>
                      <Text
                        fz="sm"
                        lh={1.5}
@@ -120,7 +123,7 @@ function ListPosyandu({ search }: { search: string }) {
                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
                      />
                    </TableTd>
-                    <TableTd>
+                    <TableTd w={220}>
                      <Button
                        size="xs"
                        radius="md"
--- a/src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx
@@ -83,8 +83,10 @@ function ListProgramKesehatan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh>
--- a/src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx
@@ -82,8 +82,10 @@ function ListPuskesmas({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh>
--- a/src/app/admin/(dashboard)/landing-page/SDGs/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/SDGs/page.tsx
@@ -74,8 +74,10 @@ function ListSdgsDesa({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover striped verticalSpacing="sm">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm">
            <TableThead>
              <TableTr>
                <TableTh style={{ width: '60%' }}>
--- a/src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
@@ -66,7 +66,7 @@ function ListAPBDes({ search }: { search: string }) {
  return (
    <Box py={{ base: 'md', md: 'lg' }}>
      {/* Desktop Table */}
-      <Box visibleFrom="md">
+     <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
        <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
          <Group justify="space-between" mb="md">
            <Title order={4} size="lg" lh={1.2}>
@@ -83,7 +83,9 @@ function ListAPBDes({ search }: { search: string }) {
          </Group>

          <Box>
-            <Table highlightOnHover miw={0}>
+           <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0}>
              <TableThead>
                <TableTr>
                  <TableTh fz="md" fw={600} ta="left" w="25%">
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx
@@ -123,7 +123,9 @@ function ListKategoriKegiatan({ search }: { search: string }) {
  // Desktop table
  const renderDesktopTable = () => (
    <Box>
-      <Table highlightOnHover striped verticalSpacing="sm" miw={300}>
+     <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm" miw={300}>
        <TableThead>
          <TableTr>
            <TableTh>
@@ -208,7 +210,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
          </Button>
        </Group>

-        <Box visibleFrom="md">{renderDesktopTable()}</Box>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>{renderDesktopTable()}</Box>
        <Box hiddenFrom="md">{renderMobileCards()}</Box>
      </Paper>

--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx
@@ -83,7 +83,7 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
          </Group>

          {/* Desktop Table */}
-          <Box visibleFrom="md">
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
            <Table
              striped
              highlightOnHover
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/page.tsx
@@ -85,7 +85,7 @@ function ListResponden({ search }: ListRespondenProps) {
    <Box>
      <Stack gap={'lg'}>
        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Paper p="lg" radius="lg" shadow="md" withBorder>
            <Title order={4} size="lg" mb="md" lh={1.2}>
              Daftar Responden
--- a/src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/page.tsx
@@ -79,7 +79,7 @@ function ListKategoriPrestasi({ search }: { search: string }) {
            Tambah Baru
          </Button>
        </Group>
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table verticalSpacing="sm" highlightOnHover>
            <TableThead>
              <TableTr>
--- a/src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx
@@ -73,7 +73,9 @@ function ListPrestasi({ search }: { search: string }) {

        {/* Desktop Table */}
        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover striped verticalSpacing="sm" miw={800}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm" miw={800}>
            <TableThead>
              <TableTr>
                <TableTh>Nama Prestasi</TableTh>
--- a/src/app/admin/(dashboard)/landing-page/profil/media-sosial/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/profil/media-sosial/page.tsx
@@ -100,8 +100,10 @@ function ListMediaSosial({ search }: { search: string }) {

        <Box>
          {/* Desktop: Table | Mobile: Card-based vertical layout */}
-          <Box visibleFrom="md">
-            <Table highlightOnHover>
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+           <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
              <TableThead>
                <TableTr>
                  <TableTh style={{ width: '25%' }}>
--- a/src/app/admin/(dashboard)/landing-page/profil/program-inovasi/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/profil/program-inovasi/page.tsx
@@ -13,7 +13,7 @@ function ProgramInovasi() {
  const [search, setSearch] = useState("");

  return (
-    <Box px={{base: 0, md: "md"}} py="lg">
+    <Box px={{ base: 0, md: "md" }} py="lg">
      <HeaderSearch
        title="Program Inovasi"
        placeholder="Cari program inovasi..."
@@ -34,8 +34,8 @@ function ListProgramInovasi({ search }: { search: string }) {
  const { data, page, totalPages, loading, load } = stateProgramInovasi.findMany;

  useShallowEffect(() => {
-      load(page, 10, debouncedSearch);
-    }, [page, debouncedSearch]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);

  const filteredData = data || [];

@@ -62,67 +62,67 @@ function ListProgramInovasi({ search }: { search: string }) {
            Tambah Program
          </Button>
        </Group>
-        <Box visibleFrom='md'>
-          <Box style={{ overflowX: 'auto' }}>
-            <Table highlightOnHover striped verticalSpacing="sm">
-              <TableThead>
+        <Box visibleFrom='md' style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm">
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Program</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Link</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length === 0 ? (
                <TableTr>
-                  <TableTh>Nama Program</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Link</TableTh>
-                  <TableTh>Aksi</TableTh>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Belum ada data program inovasi</Text>
+                    </Center>
+                  </TableTd>
                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.length === 0 ? (
-                  <TableTr>
-                    <TableTd colSpan={4}>
-                      <Center py={20}>
-                        <Text color="dimmed">Belum ada data program inovasi</Text>
-                      </Center>
+              ) : (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Tooltip label="Buka tautan program" position="top" withArrow>
+                        <a
+                          href={item.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          style={{ color: colors['blue-button'], textDecoration: 'underline' }}
+                        >
+                          <Text truncate fz="sm">{item.link}</Text>
+                        </a>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImacCog size={16} />}
+                        onClick={() =>
+                          router.push(`/admin/landing-page/profil/program-inovasi/${item.id}`)
+                        }
+                      >
+                        Detail
+                      </Button>
                    </TableTd>
                  </TableTr>
-                ) : (
-                  filteredData.map((item) => (
-                    <TableTr key={item.id}>
-                      <TableTd>
-                        <Text fw={500}>{item.name}</Text>
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Tooltip label="Buka tautan program" position="top" withArrow>
-                          <a
-                            href={item.link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            style={{ color: colors['blue-button'], textDecoration: 'underline' }}
-                          >
-                            <Text truncate fz="sm">{item.link}</Text>
-                          </a>
-                        </Tooltip>
-                      </TableTd>
-                      <TableTd>
-                        <Button
-                          size="xs"
-                          radius="md"
-                          variant="light"
-                          color="blue"
-                          leftSection={<IconDeviceImacCog size={16} />}
-                          onClick={() =>
-                            router.push(`/admin/landing-page/profil/program-inovasi/${item.id}`)
-                          }
-                        >
-                          Detail
-                        </Button>
-                      </TableTd>
-                    </TableTr>
-                  ))
-                )}
-              </TableTbody>
-            </Table>
-          </Box>
+                ))
+              )}
+            </TableTbody>
+          </Table>
        </Box>
        <Box hiddenFrom="md" pt={20}>
          <Stack gap="sm">
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
@@ -139,8 +139,10 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
                Tambah Baru
              </Button>
            </Group>
-            <Box visibleFrom="md">
-              <Table highlightOnHover miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
+           <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+             <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
                <TableThead>
                  <TableTr>
                    <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
@@ -181,8 +183,10 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
            <TableThead>
              <TableTr>
                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx
@@ -100,7 +100,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/page.tsx
@@ -89,7 +89,7 @@ function ListKegiatanDesa({ search }: { search: string }) {
        </Group>

        {/* Desktop: Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx
@@ -70,7 +70,7 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
        </Group>
        
        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx
+++ b/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx
@@ -119,7 +119,7 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/page.tsx
@@ -74,7 +74,7 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
        </Group>

        {/* Desktop: Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/page.tsx
@@ -94,7 +94,7 @@ function ListKeunggulanProgram({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/page.tsx
@@ -99,7 +99,7 @@ function ListJenjangPendidikan() {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx
@@ -89,7 +89,7 @@ function ListLembaga({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/page.tsx
@@ -74,7 +74,7 @@ function ListPengajar({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/page.tsx
@@ -82,7 +82,7 @@ function ListSiswa({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/page.tsx
@@ -86,7 +86,7 @@ function ListDataPerpustakaan({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            striped
            highlightOnHover
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/page.tsx
@@ -82,7 +82,7 @@ function ListKategoriBuku({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/page.tsx
@@ -89,7 +89,7 @@ function ListPeminjamBuku({ search }: { search: string }) {
        </Title>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}
--- a/src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/page.tsx
@@ -85,7 +85,7 @@ function ListResponden({ search }: ListRespondenProps) {
    <Box>
      <Stack gap={'lg'}>
        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Paper p="lg" radius="lg" shadow="md" withBorder>
            <Title order={4} size="lg" mb="md" lh={1.2}>
              Daftar Responden
--- a/src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx
@@ -128,8 +128,10 @@ function Page() {
          ) : (
            <>
              {/* Desktop Table */}
-              <Box visibleFrom="md">
-                <Table highlightOnHover>
+             <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+               <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
                  <TableThead>
                    <TableTr>
                      <TableTh fz="sm" fw={600} ta="center" w={60}>
--- a/src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx
@@ -127,8 +127,10 @@ function Page() {
          ) : (
            <>
              {/* Desktop Table */}
-              <Box visibleFrom="md">
-                <Table highlightOnHover>
+             <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+               <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
                  <TableThead>
                    <TableTr>
                      <TableTh fz="sm" fw={600} lh={1.4} ta="center">
--- a/src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/page.tsx
@@ -117,8 +117,10 @@ function ListPegawaiPPID({ search }: { search: string }) {
        </Group>

        {/* Desktop: Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0}>
            <TableThead>
              <TableTr>
                <TableTh fz="sm" fw={600} lh={1.4}>
--- a/src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/page.tsx
@@ -79,8 +79,10 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
            <TableThead>
              <TableTr>
                <TableTh fz="sm" fw={600} lh={1.4}>Nama Posisi</TableTh>
--- a/src/app/admin/(dashboard)/user&role/role/page.tsx
+++ b/src/app/admin/(dashboard)/user&role/role/page.tsx
@@ -99,7 +99,7 @@ function ListRole({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            striped
            highlightOnHover
--- a/src/app/admin/(dashboard)/user&role/user/page.tsx
+++ b/src/app/admin/(dashboard)/user&role/user/page.tsx
@@ -147,7 +147,7 @@ function ListUser({ search }: { search: string }) {
        </Group>

        {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
          <Table
            highlightOnHover
            miw={0}