fix ux easter egg

pytorrent/static/styles.css

@@ -239,11 +239,11 @@ body {
   display: grid;
   place-items: center;
   padding: 1rem;
-  background: radial-gradient(
-    circle at 50% 35%,
-    rgba(var(--bs-secondary-bg-rgb), 0.98),
-    var(--bs-body-bg) 68%
-  );
+  background:
+    radial-gradient(circle at 50% 32%, rgba(var(--bs-secondary-bg-rgb), 0.92), transparent 42%),
+    var(--bs-body-bg);
+  isolation: isolate;
+  overflow: auto;
   color: var(--bs-body-color);
   transition:
     opacity 0.22s ease,
@@ -256,10 +256,12 @@ body {
 }
 .initial-loader-card {
   width: min(92vw, 430px);
+  max-height: calc(100vh - 2rem);
+  overflow: auto;
   padding: 2rem;
   border: 1px solid var(--bs-border-color);
   border-radius: 18px;
-  background: rgba(var(--bs-secondary-bg-rgb), 0.88);
+  background: var(--bs-secondary-bg);
   box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
   text-align: center;
 }
@@ -272,8 +274,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 220px;
-  margin: 1.4rem 0 1rem;
+  min-height: 132px;
+  margin: 1.25rem 0 1rem;
 }
 .initial-loader-easter-egg-image,
 .initial-loader-prank img {
@@ -281,10 +283,10 @@ body {
   width: auto;
   max-width: min(100%, 320px);
   height: auto;
-  max-height: 220px;
+  max-height: 150px;
   object-fit: contain;
   border-radius: 14px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
 }
 .initial-loader-easter-egg-image {
   contain: layout paint;
@@ -313,6 +315,21 @@ body {
   margin-top: 0.35rem;
   color: var(--bs-secondary-color);
 }
+
+@media (max-height: 620px) {
+  .initial-loader-card {
+    padding: 1.5rem;
+  }
+
+  .initial-loader-spinner {
+    min-height: 96px;
+    margin: 1rem 0 0.75rem;
+  }
+
+  .initial-loader-easter-egg-image {
+    max-height: 110px;
+  }
+}
 .main-grid {
   min-height: 0;
   display: grid;
@@ -2477,11 +2494,11 @@ body.mobile-mode .mobile-filter-bar {
   min-height: 100vh;
   place-items: center;
   padding: 1rem;
-  background: radial-gradient(
-    circle at 50% 35%,
-    rgba(var(--bs-secondary-bg-rgb), 0.98),
-    var(--bs-body-bg) 68%
-  );
+  background:
+    radial-gradient(circle at 50% 32%, rgba(var(--bs-secondary-bg-rgb), 0.92), transparent 42%),
+    var(--bs-body-bg);
+  isolation: isolate;
+  overflow: auto;
   color: var(--bs-body-color);
 }
 
@@ -2772,11 +2789,11 @@ body.mobile-mode .mobile-filter-bar {
   min-height: 100vh;
   place-items: center;
   padding: 1rem;
-  background: radial-gradient(
-    circle at 50% 35%,
-    rgba(var(--bs-secondary-bg-rgb), 0.98),
-    var(--bs-body-bg) 68%
-  );
+  background:
+    radial-gradient(circle at 50% 32%, rgba(var(--bs-secondary-bg-rgb), 0.92), transparent 42%),
+    var(--bs-body-bg);
+  isolation: isolate;
+  overflow: auto;
   color: var(--bs-body-color);
 }
 

pytorrent/templates/index.html

@@ -19,7 +19,7 @@
     <div class="initial-loader-brand"><i class="fa-solid fa-robot"></i> pyTorrent</div>
     <div class="initial-loader-spinner" id="initialLoaderSpinner">
       {% if prefs and prefs.easter_egg_enabled and prefs.easter_egg_loading_image_url %}
-      <img class="initial-loader-easter-egg-image" src="{{ prefs.easter_egg_loading_image_url }}" alt="Loading" loading="eager">
+      <img class="initial-loader-easter-egg-image" src="{{ prefs.easter_egg_loading_image_url }}" alt="Loading" loading="eager" onerror="this.replaceWith(Object.assign(document.createElement('span'),{className:'spinner-border'}));">
       {% else %}
       <span class="spinner-border" aria-hidden="true"></span>
       {% endif %}