fix: overflow in detail page

iqbalpa · Jul 20, 2024 · 1e61b2a · 1e61b2a
1 parent 80539f3
commit 1e61b2a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/src/app/[id]/layout.tsx b/src/app/[id]/layout.tsx
@@ -6,10 +6,8 @@ export default function DetailLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex h-screen overflow-hidden">
-      <ScrollArea className="flex-1 overflow-y-auto bg-pink-800">
-        {children}
-      </ScrollArea>
+    <div className="flex h-screen flex-1 overflow-hidden overflow-y-auto">
+      {children}
     </div>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -26,8 +26,8 @@ export default function RootLayout({
       >
         <Header />
         <div className="flex flex-1 flex-row overflow-hidden">
-          <main className="flex-1 overflow-y-auto">{children}</main>
-          <ScrollArea className="flex-shrink-0 bg-teal-900 p-4">
+          <main className="flex-1 overflow-y-hidden">{children}</main>
+          <ScrollArea className="flex-shrink-0 bg-slate-900 p-4">
             <Sidebar />
           </ScrollArea>
         </div>

diff --git a/src/modules/detailSurah/detailSurah.tsx b/src/modules/detailSurah/detailSurah.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { getSurahByNomor } from '@/api/api';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { DetailSurah } from '@/constant/surah.constant';
 import { Play } from 'lucide-react';
 import { usePathname } from 'next/navigation';
@@ -25,24 +26,23 @@ const DetailSurahPage: React.FC = () => {
   }, [pathname]);
 
   if (!surah) {
-    return;
+    return null;
   }
 
   return (
-    <div className="mt-20 flex flex-col items-center pb-20 md:mt-10">
-      <h1 className="text-xl font-bold">
-        {surah.namaLatin} - {surah.nama}
-      </h1>
-      <p>
-        {surah.jumlahAyat} ayat - {surah.arti} - {surah.tempatTurun}
-      </p>
-      <div className="max-w-screen mt-5 flex flex-col items-center gap-3 px-4 md:px-10 lg:px-14 xl:px-20">
+    <div className="flex h-full max-h-screen flex-col overflow-y-auto pb-20">
+      <div className="flex flex-col items-center pt-20 md:pt-10">
+        <h1 className="text-xl font-bold">
+          {surah.namaLatin} - {surah.nama}
+        </h1>
+        <p>
+          {surah.jumlahAyat} ayat - {surah.arti} - {surah.tempatTurun}
+        </p>
+      </div>
+      <ScrollArea className="mt-5 flex flex-col items-center gap-3 overflow-y-auto px-4 pb-5 md:px-10 lg:px-14 xl:px-20">
         {surah.ayat.map((ayat, _index) => (
-          <div className="flex w-full flex-col">
-            <div
-              key={ayat.nomorAyat}
-              className="flex w-full flex-row justify-between gap-3 text-sm md:text-base"
-            >
+          <div key={ayat.nomorAyat} className="flex w-full flex-col">
+            <div className="flex w-full flex-row justify-between gap-3 text-sm md:text-base">
               <div className="flex flex-col items-center justify-between gap-2">
                 <p className="text-xs md:text-sm">
                   {surah.nomor}:{ayat.nomorAyat}
@@ -69,7 +69,7 @@ const DetailSurahPage: React.FC = () => {
             <hr className="my-3 w-full border-t border-gray-600" />
           </div>
         ))}
-      </div>
+      </ScrollArea>
     </div>
   );
 };