Fixed problem with background images

TODO.md

@@ -2,7 +2,6 @@
 
 ## Short term
 
-- Background images some times lack gradient at the bottom and fade in before they could load
 - Number of audio players seems limited (on Chrome and Firefox)
 - Create a tool to upload scans images and apply them to collectible
 - Automatically generate different sizes of images

src/components/AppLayout/components/AppLayoutBackgroundImg.astro

@@ -12,7 +12,7 @@ const {
 const uniqueId = getRandomId();
 
 const style = `
-@media (max-aspect-ratio: ${width}/${height}) {
+@media (max-aspect-ratio: ${width}/${height * 0.85}) {
   #${uniqueId} {
       mask-image: linear-gradient( to bottom, rgba(0 0 0 / 30%) 0%, transparent 100% );
   }
@@ -23,7 +23,7 @@ const style = `
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <img id={uniqueId} src={url} class="when-no-print when-js" />
-<img src={url} class="when-no-print when-no-js" />
+<img id={uniqueId} src={url} class="when-no-print when-no-js" />
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 

src/utils/random.ts

@@ -1 +1 @@
-export const getRandomId = () => Math.random().toString(36).substring(2);
+export const getRandomId = () => "id" + Math.random().toString(36).substring(2);