From 18f2c29748858856acaa88dc24edf5342f04f6e6 Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Thu, 11 Jul 2024 16:51:12 +0700
Subject: [PATCH] style(detail): make it vertically for writers in small
 viewport

---
 src/components/crewList/crewList.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/crewList/crewList.tsx b/src/components/crewList/crewList.tsx
index 9a801ae..695e97c 100644
--- a/src/components/crewList/crewList.tsx
+++ b/src/components/crewList/crewList.tsx
@@ -11,16 +11,18 @@ const CrewList: React.FC<ICrewList> = ({ job, crew }) => (
     className={`mx-10 flex flex-row gap-2 lg:mx-28 ${job === 'Director' ? 'border-t border-slate-800' : 'border-y border-slate-800'} px-2 py-3 text-white md:py-5`}
   >
     <p className="text-sm font-bold md:text-base">{job}</p>
-    {crew
-      .filter((member) => member.job === job)
-      .map((member, index, array) => (
-        <React.Fragment key={index}>
-          <p className="text-sm md:text-base">{member.name}</p>
-          {index !== array.length - 1 && (
-            <p className="text-xl text-gray-400">·</p>
-          )}
-        </React.Fragment>
-      ))}
+    <div className="flex flex-col md:flex-row">
+      {crew
+        .filter((member) => member.job === job)
+        .map((member, index, array) => (
+          <React.Fragment key={index}>
+            <p className="text-sm md:text-base">{member.name}</p>
+            {index !== array.length - 1 && (
+              <p className="hidden text-xl text-gray-400 md:mx-2 md:block">·</p>
+            )}
+          </React.Fragment>
+        ))}
+    </div>
   </div>
 );