From d3ec784549b3e828b313e926ab515308cc7d4d30 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Fri, 18 Mar 2022 14:01:25 +0100
Subject: [PATCH] Lightbox Full width on mobile

---
 src/components/LightBox.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx
index e1d5ab4..5def290 100644
--- a/src/components/LightBox.tsx
+++ b/src/components/LightBox.tsx
@@ -1,3 +1,4 @@
+import { useMediaMobile } from "hooks/useMediaQuery";
 import { Dispatch, SetStateAction } from "react";
 import Lightbox from "react-image-lightbox";
 
@@ -13,6 +14,8 @@ export type LightBoxProps = {
 
 export default function LightBox(props: LightBoxProps): JSX.Element {
   const { state, setState, images, index, setIndex } = props;
+  const mobile = useMediaMobile();
+
   return (
     <>
       {state && (
@@ -28,7 +31,7 @@ export default function LightBox(props: LightBoxProps): JSX.Element {
           imageCaption=""
           imageTitle=""
           onCloseRequest={() => setState(false)}
-          imagePadding={50}
+          imagePadding={mobile ? 0 : 70}
         />
       )}
     </>