resized images on mobile

pages/api/files.ts

@@ -1,6 +1,6 @@
 import {utapi} from '../../src/server/uploadthing'
 
-export default async function handler(req:any, res:any) {
+export default async function handler(_:any, res:any) {
     const data = await utapi.listFiles();
     res.status(200).json(data);
 }

src/hemsedal24/bilder.module.css

@@ -188,7 +188,7 @@ html {
 @media (max-width: 500px) {
   .embla__slide {
     max-width: 120%;
-    flex: 0 0 100%;
+    flex: 0 0 75%;
   }
   .embla {
     width: 100%;

src/hemsedal24/components/Files.tsx

@@ -20,23 +20,22 @@ export default function Files({ data }: any) {
   };
 
     const [emblaRef] = useEmblaCarousel({loop: true, skipSnaps:true, startIndex:startIndex});
-    console.log(data)
   return (
     <div className={styles.viewPort}>
 
       {data.files.length > 0 ?
       <div id="pictureContainer" className={styles.container}>
       {data.files.map((file:any, index:number) =>
       <div key={file.id} className={styles.image} onClick={()=>imageClicked(file.id, index)}>
-        <img src={`https://utfs.io/f/${file.key}`} alt={`image of ${file.name}`}/></div>)} </div>  :<div className={styles.nopictures}><h4>Ingen bilder ennå!</h4></div>}
+        <img src={`https://utfs.io/f/${file.key}`} alt={` ${file.name}`}/></div>)} </div>  :<div className={styles.nopictures}><h4>Ingen bilder ennå!</h4></div>}
 
       {isPopoverOpen && (
         <Popover onClose={closePopoever}>
           <div className={styles.embla} ref={emblaRef}>
             <div className={styles.embla__container}>
               {data.files.map((file:any) =>
               <div key = {file.id} className={styles.embla__slide}>
-                <img  src={`https://utfs.io/f/${file.key}`} alt={`image of ${file.name}`}/>
+                <img  src={`https://utfs.io/f/${file.key}`} alt={`${file.name}`}/>
                 </div>
               )}
             </div>