fix: Fix Map page

src/widgets/MediaViewer/ThreeView.tsx

@@ -2,15 +2,20 @@ import { Canvas } from "@react-three/fiber";
 import { OrbitControls, Stage, useGLTF } from "@react-three/drei";
 
 type ModelViewerProps = {
+  width?: string;
   fileUrl: string;
   height?: string;
 };
 
-export const ThreeView = ({ fileUrl, height = "100%" }: ModelViewerProps) => {
+export const ThreeView = ({
+  fileUrl,
+  height = "100%",
+  width = "100%",
+}: ModelViewerProps) => {
   const { scene } = useGLTF(fileUrl);
 
   return (
-    <Canvas style={{ width: "100%", height: height }}>
+    <Canvas style={{ height: height, width: width }}>
       <ambientLight />
       <directionalLight />
       <Stage environment="city" intensity={0.6}>

src/widgets/MediaViewer/index.tsx

@@ -13,16 +13,30 @@ export function MediaViewer({
   media,
   className,
   fullWidth,
-}: Readonly<{ media?: MediaData; className?: string; fullWidth?: boolean }>) {
+  fullHeight,
+}: Readonly<{
+  media?: MediaData;
+  className?: string;
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+}>) {
   const token = localStorage.getItem("token");
   return (
-    <Box className={className} width={fullWidth ? "100%" : "auto"}>
+    <Box
+      className={className}
+      width={fullWidth ? "100%" : "auto"}
+      height={fullHeight ? "100%" : "auto"}
+    >
       {media?.media_type === 1 && (
         <img
           src={`${import.meta.env.VITE_KRBL_MEDIA}${
             media?.id
           }/download?token=${token}`}
           alt={media?.filename}
+          style={{
+            height: fullHeight ? "100%" : "auto",
+            width: fullWidth ? "100%" : "auto",
+          }}
         />
       )}
 
@@ -48,6 +62,10 @@ export function MediaViewer({
             media?.id
           }/download?token=${token}`}
           alt={media?.filename}
+          style={{
+            height: fullHeight ? "100%" : "auto",
+            width: fullWidth ? "100%" : "auto",
+          }}
         />
       )}
       {media?.media_type === 4 && (
@@ -78,6 +96,7 @@ export function MediaViewer({
             media?.id
           }/download?token=${token}`}
           height="100%"
+          width="1000px"
         />
       )}
     </Box>