Fix Tampilab DesaAntiKorupsi Landing Page Mobile

src/app/darmasaba/(pages)/desa/berita/[kategori]/[id]/page.tsx

@@ -6,7 +6,6 @@ import { Box, Center, Container, Image, Skeleton, Stack, Text } from '@mantine/c
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import BackButton from '../../../layanan/_com/BackButto';
 
 
 
@@ -50,7 +49,6 @@ function Page() {
 
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
       <Container w={{ base: "100%", md: "50%" }} >
         <Box pb={20}>
           <Text ta={"center"} fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>

src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
+import { Box, Container, Grid, GridCol, ScrollArea, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -22,15 +22,15 @@ function LayoutTabsBerita({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  
+
   // Get active tab from URL path
   const activeTab = pathname.split('/').pop() || 'semua';
-  
+
   // Get initial search value from URL
   const initialSearch = searchParams.get('search') || '';
   const [searchValue, setSearchValue] = useState(initialSearch);
   const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
-  
+
   // Update active tab state when pathname changes
   const [activeTabState, setActiveTabState] = useState(activeTab);
   useEffect(() => {
@@ -50,28 +50,28 @@ function LayoutTabsBerita({
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchValue(value);
-    
+
     // Clear previous timeout
     if (searchTimeout !== null) {
       clearTimeout(searchTimeout);
     }
-    
+
     // Set new timeout
     const newTimeout = window.setTimeout(() => {
       const params = new URLSearchParams(searchParams.toString());
-      
+
       if (value) {
         params.set('search', value);
       } else {
         params.delete('search');
       }
-      
+
       // Only update URL if the search value has actually changed
       if (params.toString() !== searchParams.toString()) {
         router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
       }
     }, 500); // 500ms debounce delay
-    
+
     setSearchTimeout(newTimeout);
   };
   const tabs = [
@@ -147,17 +147,19 @@ function LayoutTabsBerita({
         <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
           <Grid>
             <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
-              <TabsList>
-                {tabs.map((tab, index) => (
-                  <TabsTab
-                    key={index}
-                    value={tab.value}
-                    onClick={() => router.push(tab.href)}
-                  >
-                    {tab.label}
-                  </TabsTab>
-                ))}
-              </TabsList>
+              <ScrollArea type="auto" offsetScrollbars>
+                <TabsList>
+                  {tabs.map((tab, index) => (
+                    <TabsTab
+                      key={index}
+                      value={tab.value}
+                      onClick={() => router.push(tab.href)}
+                    >
+                      {tab.label}
+                    </TabsTab>
+                  ))}
+                </TabsList>
+              </ScrollArea>
             </GridCol>
             <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
               <TextInput