fix: design fix

Author: DnzzL

frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx

@@ -143,10 +143,18 @@ export default function ProjectDetailPage({ project }: ProjectPageProps) {
         className='my-lg'
       />
 
-      {project.demo_video && <BannerVideo
-        video={project.demo_video_embed}
-        className='my-lg'
-      />}
+      {project.video?.url ? (
+        <BannerVideo
+          url={project.video.url}
+          format={project.video.orientation as 'paysage' | 'portrait'}
+          className='my-lg'
+        />
+      ) : project.demo_video_embed ? (
+        <BannerVideo
+          video={project.demo_video_embed}
+          className='my-lg'
+        />
+      ) : null}
 
       {presentationContent.length > 0 && <Banner
         content={presentationContent}
@@ -189,12 +197,6 @@ export default function ProjectDetailPage({ project }: ProjectPageProps) {
         className="my-lg"
       />}
 
-      {project.video && <BannerVideo
-        url={project.video.url}
-        format={project.video.orientation as 'paysage' | 'portrait'}
-        className='my-lg'
-      />}
-
     </>
   );
 }

frontend/src/components/molecules/BannerVideo/BannerVideo.tsx

@@ -41,7 +41,7 @@ const BannerVideo: React.FC<BannerVideoProps> = ({
     const embedUrl = `https://www.youtube.com/embed/${videoId}`;
 
     return (
-      <div className={clsx('mx-auto shadow-lg', className)} {...props}>
+      <div className={clsx('mx-auto shadow-lg w-fit', className)} {...props}>
         <iframe
           className={clsx(
             'max-w-full',
@@ -63,7 +63,7 @@ const BannerVideo: React.FC<BannerVideoProps> = ({
   }
 
   return (
-    <div className={clsx('mx-auto shadow-lg', className)} {...props}>
+    <div className={clsx('mx-auto shadow-lg w-fit', className)} {...props}>
       <div
         className={clsx(
           'max-w-full',

frontend/src/components/organisms/ProjectProcesses/ProjectProcesses.tsx

@@ -33,7 +33,7 @@ const ProjectProcesses: React.FC<ProjectProcessesProps> = ({
   return (
     <div
       className={clsx(
-        "prose prose--big my-xs max-w-4xl ml-0",
+        "prose prose--big my-xs max-w-4xl mx-auto",
         className,
       )}
       {...props}