From 2fe38c38e1d62e6cacf081b39f4fbf575a43f02a Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sat, 11 May 2024 16:47:33 +0200
Subject: [PATCH] Fixed problem with background images

---
 TODO.md                                                       | 1 -
 .../AppLayout/components/AppLayoutBackgroundImg.astro         | 4 ++--
 src/utils/random.ts                                           | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/TODO.md b/TODO.md
index 4387284..6ea1548 100644
--- a/TODO.md
+++ b/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
diff --git a/src/components/AppLayout/components/AppLayoutBackgroundImg.astro b/src/components/AppLayout/components/AppLayoutBackgroundImg.astro
index fcd2e12..6e72e08 100644
--- a/src/components/AppLayout/components/AppLayoutBackgroundImg.astro
+++ b/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 -------------------------------------------- */}
 
diff --git a/src/utils/random.ts b/src/utils/random.ts
index c3b3143..74f6218 100644
--- a/src/utils/random.ts
+++ b/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);