From 881564daa73b0f17b8b36a339e21ba5d859c47b8 Mon Sep 17 00:00:00 2001
From: Chubby Granny Chaser <hydralauncher@proton.me>
Date: Fri, 24 Oct 2025 17:13:36 +0100
Subject: [PATCH] fix: fixing game hero

---
 src/main/services/hydra-api.ts                |   2 +-
 src/main/services/python-rpc.ts               |   2 +-
 .../description-header.scss                   |   1 -
 .../gallery-slider/gallery-slider.scss        |   2 +-
 .../game-details/game-details-content.tsx     |  16 +-
 .../src/pages/game-details/game-details.scss  | 112 ++-----------
 .../src/pages/game-details/game-reviews.tsx   | 150 +++++++++---------
 .../pages/game-details/hero/hero-panel.scss   |   1 +
 8 files changed, 92 insertions(+), 194 deletions(-)

diff --git a/src/main/services/hydra-api.ts b/src/main/services/hydra-api.ts
index dd26e6f0..07f81d68 100644
--- a/src/main/services/hydra-api.ts
+++ b/src/main/services/hydra-api.ts
@@ -29,7 +29,7 @@ export class HydraApi {
   private static instance: AxiosInstance;
 
   private static readonly EXPIRATION_OFFSET_IN_MS = 1000 * 60 * 5; // 5 minutes
-  private static readonly ADD_LOG_INTERCEPTOR = true;
+  private static readonly ADD_LOG_INTERCEPTOR = false;
 
   private static secondsToMilliseconds(seconds: number) {
     return seconds * 1000;
diff --git a/src/main/services/python-rpc.ts b/src/main/services/python-rpc.ts
index f3ce9f6c..2a1dce79 100644
--- a/src/main/services/python-rpc.ts
+++ b/src/main/services/python-rpc.ts
@@ -106,7 +106,7 @@ export class PythonRPC {
         "main.py"
       );
 
-      const childProcess = cp.spawn("python3", [scriptPath, ...commonArgs], {
+      const childProcess = cp.spawn("python", [scriptPath, ...commonArgs], {
         stdio: ["inherit", "inherit"],
       });
 
diff --git a/src/renderer/src/pages/game-details/description-header/description-header.scss b/src/renderer/src/pages/game-details/description-header/description-header.scss
index a29caa34..74126fd5 100644
--- a/src/renderer/src/pages/game-details/description-header/description-header.scss
+++ b/src/renderer/src/pages/game-details/description-header/description-header.scss
@@ -11,7 +11,6 @@
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.05);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  margin-bottom: calc(globals.$spacing-unit * 1.5);
 
   &__info {
     display: flex;
diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
index 6f9e753c..f9da431d 100644
--- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
+++ b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
@@ -2,7 +2,7 @@
 
 .gallery-slider {
   &__container {
-    padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 1);
+    padding: calc(globals.$spacing-unit * 1.5) 0;
     width: 100%;
     display: flex;
     flex-direction: column;
diff --git a/src/renderer/src/pages/game-details/game-details-content.tsx b/src/renderer/src/pages/game-details/game-details-content.tsx
index edf314c7..8f2d840c 100644
--- a/src/renderer/src/pages/game-details/game-details-content.tsx
+++ b/src/renderer/src/pages/game-details/game-details-content.tsx
@@ -53,8 +53,6 @@ const getImageWithCustomPriority = (
 };
 
 export function GameDetailsContent() {
-  const heroRef = useRef<HTMLDivElement | null>(null);
-
   const { t } = useTranslation("game_details");
 
   const {
@@ -152,18 +150,12 @@ export function GameDetailsContent() {
       className={`game-details__wrapper ${hasNSFWContentBlocked ? "game-details__wrapper--blurred" : ""}`}
     >
       <section className="game-details__container">
-        <div ref={heroRef} className="game-details__hero">
+        <div className="game-details__hero">
           <img
             src={heroImage}
             className="game-details__hero-image"
             alt={game?.title}
           />
-          <div
-            className="game-details__hero-backdrop"
-            style={{
-              flex: 1,
-            }}
-          />
 
           <div
             className="game-details__hero-logo-backdrop"
@@ -202,11 +194,13 @@ export function GameDetailsContent() {
                 )}
               </div>
             </div>
+
+            <div className="game-details__hero-panel">
+              <HeroPanel />
+            </div>
           </div>
         </div>
 
-        <HeroPanel />
-
         <div className="game-details__description-container">
           <div className="game-details__description-content">
             <DescriptionHeader />
diff --git a/src/renderer/src/pages/game-details/game-details.scss b/src/renderer/src/pages/game-details/game-details.scss
index 56022b07..313896fc 100644
--- a/src/renderer/src/pages/game-details/game-details.scss
+++ b/src/renderer/src/pages/game-details/game-details.scss
@@ -1,6 +1,6 @@
 @use "../../scss/globals.scss";
 
-$hero-height: 300px;
+$hero-height: 350px;
 
 @keyframes slide-in {
   0% {
@@ -27,6 +27,10 @@ $hero-height: 300px;
     }
   }
 
+  &__hero-panel {
+    padding: globals.$spacing-unit;
+  }
+
   &__review-form {
     display: flex;
     flex-direction: column;
@@ -34,19 +38,6 @@ $hero-height: 300px;
     margin-bottom: 24px;
   }
 
-  &__review-form-controls {
-    display: flex;
-    gap: calc(globals.$spacing-unit * 2);
-    align-items: flex-end;
-    flex-wrap: wrap;
-
-    @media (max-width: 768px) {
-      flex-direction: column;
-      align-items: stretch;
-      gap: calc(globals.$spacing-unit * 1.5);
-    }
-  }
-
   &__review-form-bottom {
     display: flex;
     justify-content: space-between;
@@ -55,39 +46,12 @@ $hero-height: 300px;
     flex-wrap: wrap;
   }
 
-  &__review-message {
-    padding: calc(globals.$spacing-unit * 1);
-    border-radius: 4px;
-    font-size: globals.$small-font-size;
-    font-weight: 500;
-    margin-top: calc(globals.$spacing-unit * 1);
-    border: 1px solid;
-
-    &--success {
-      background: rgba(34, 197, 94, 0.1);
-      color: #86efac;
-      border-color: rgba(34, 197, 94, 0.3);
-    }
-
-    &--error {
-      background: rgba(239, 68, 68, 0.1);
-      color: #fca5a5;
-      border-color: rgba(239, 68, 68, 0.3);
-    }
-  }
-
   &__review-score-container {
     display: flex;
     align-items: center;
     gap: 4px;
   }
 
-  &__review-score-label {
-    font-size: 14px;
-    color: #ffffff;
-    font-weight: 500;
-  }
-
   &__review-score-select {
     background-color: #2a2a2a;
     border: 1px solid #3a3a3a;
@@ -220,10 +184,6 @@ $hero-height: 300px;
     }
   }
 
-  &__reviews-list {
-    margin-top: calc(globals.$spacing-unit * 3);
-  }
-
   &__reviews-container {
     display: flex;
     flex-direction: column;
@@ -578,8 +538,8 @@ $hero-height: 300px;
 
   &__hero-image {
     width: 100%;
-    height: calc($hero-height + 72px);
-    min-height: calc($hero-height + 72px);
+    height: $hero-height;
+    min-height: $hero-height;
     object-fit: cover;
     object-position: top;
     transition: all ease 0.2s;
@@ -588,8 +548,8 @@ $hero-height: 300px;
 
     @media (min-width: 1250px) {
       object-position: center;
-      height: calc(350px + 72px);
-      min-height: calc(350px + 72px);
+      height: $hero-height;
+      min-height: $hero-height;
     }
   }
 
@@ -630,14 +590,6 @@ $hero-height: 300px;
     }
   }
 
-  &__hero-image-skeleton {
-    height: 300px;
-
-    @media (min-width: 1250px) {
-      height: 350px;
-    }
-  }
-
   &__container {
     width: 100%;
     height: 100%;
@@ -782,34 +734,6 @@ $hero-height: 300px;
     }
   }
 
-  &__randomizer-button {
-    animation: slide-in 0.2s;
-    position: fixed;
-    bottom: calc(globals.$spacing-unit * 3);
-    right: calc(9px + globals.$spacing-unit * 2);
-    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 10px 1px;
-    border: solid 2px globals.$border-color;
-    z-index: 1;
-    background-color: globals.$background-color;
-
-    &:hover {
-      background-color: globals.$background-color;
-      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 15px 5px;
-      opacity: 1;
-    }
-
-    &:active {
-      transform: scale(0.98);
-    }
-
-    &:disabled {
-      box-shadow: none;
-      transform: none;
-      opacity: 0.8;
-      background-color: globals.$background-color;
-    }
-  }
-
   &__hero-panel-skeleton {
     width: 100%;
     padding: calc(globals.$spacing-unit * 2);
@@ -852,19 +776,6 @@ $hero-height: 300px;
     }
   }
 
-  &__stars-icon-container {
-    width: 16px;
-    height: 16px;
-    position: relative;
-  }
-
-  &__stars-icon {
-    width: 70px;
-    position: absolute;
-    top: -28px;
-    left: -27px;
-  }
-
   &__cloud-icon-container {
     width: 20px;
     height: 16px;
@@ -880,11 +791,6 @@ $hero-height: 300px;
     top: -3px;
   }
 
-  &__hero-backdrop {
-    flex: 1;
-    transition: opacity 0.2s ease;
-  }
-
   &__reviews-section {
     margin-top: calc(globals.$spacing-unit * 3);
     padding-top: calc(globals.$spacing-unit * 3);
diff --git a/src/renderer/src/pages/game-details/game-reviews.tsx b/src/renderer/src/pages/game-details/game-reviews.tsx
index f8117f43..02901982 100644
--- a/src/renderer/src/pages/game-details/game-reviews.tsx
+++ b/src/renderer/src/pages/game-details/game-reviews.tsx
@@ -469,84 +469,82 @@ export function GameReviews({
         </>
       )}
 
-      <div className="game-details__reviews-list">
-        <div className="game-details__reviews-list-header">
-          <div className="game-details__reviews-title-group">
-            <h3 className="game-details__reviews-title">{t("reviews")}</h3>
-            <span className="game-details__reviews-badge">
-              {totalReviewCount}
-            </span>
-          </div>
+      <div className="game-details__reviews-list-header">
+        <div className="game-details__reviews-title-group">
+          <h3 className="game-details__reviews-title">{t("reviews")}</h3>
+          <span className="game-details__reviews-badge">
+            {totalReviewCount}
+          </span>
         </div>
-        <ReviewSortOptions
-          sortBy={reviewsSortBy}
-          onSortChange={handleSortChange}
-        />
-
-        {reviewsLoading && reviews.length === 0 && (
-          <div className="game-details__reviews-loading">
-            {t("loading_reviews")}
-          </div>
-        )}
-
-        {!reviewsLoading && reviews.length === 0 && (
-          <div className="game-details__reviews-empty">
-            <div className="game-details__reviews-empty-icon">
-              <NoteIcon size={48} />
-            </div>
-            <h4 className="game-details__reviews-empty-title">
-              {t("no_reviews_yet")}
-            </h4>
-            <p className="game-details__reviews-empty-message">
-              {t("be_first_to_review")}
-            </p>
-          </div>
-        )}
-
-        <div
-          className="game-details__reviews-container"
-          style={{
-            opacity: reviewsLoading && reviews.length > 0 ? 0.5 : 1,
-            transition: "opacity 0.2s ease",
-          }}
-        >
-          {reviews.map((review) => (
-            <ReviewItem
-              key={review.id}
-              review={review}
-              userDetailsId={userDetailsId}
-              isBlocked={review.isBlocked}
-              isVisible={visibleBlockedReviews.has(review.id)}
-              isVoting={votingReviews.has(review.id)}
-              previousVotes={
-                previousVotesRef.current.get(review.id) || {
-                  upvotes: 0,
-                  downvotes: 0,
-                }
-              }
-              onVote={handleVoteReview}
-              onDelete={handleDeleteReview}
-              onToggleVisibility={toggleBlockedReview}
-              onAnimationComplete={handleVoteAnimationComplete}
-            />
-          ))}
-        </div>
-
-        {hasMoreReviews && !reviewsLoading && (
-          <button
-            className="game-details__load-more-reviews"
-            onClick={loadMoreReviews}
-          >
-            {t("load_more_reviews")}
-          </button>
-        )}
-
-        {reviewsLoading && reviews.length > 0 && (
-          <div className="game-details__reviews-loading">
-            {t("loading_more_reviews")}
-          </div>
-        )}
       </div>
+      <ReviewSortOptions
+        sortBy={reviewsSortBy}
+        onSortChange={handleSortChange}
+      />
+
+      {reviewsLoading && reviews.length === 0 && (
+        <div className="game-details__reviews-loading">
+          {t("loading_reviews")}
+        </div>
+      )}
+
+      {!reviewsLoading && reviews.length === 0 && (
+        <div className="game-details__reviews-empty">
+          <div className="game-details__reviews-empty-icon">
+            <NoteIcon size={48} />
+          </div>
+          <h4 className="game-details__reviews-empty-title">
+            {t("no_reviews_yet")}
+          </h4>
+          <p className="game-details__reviews-empty-message">
+            {t("be_first_to_review")}
+          </p>
+        </div>
+      )}
+
+      <div
+        className="game-details__reviews-container"
+        style={{
+          opacity: reviewsLoading && reviews.length > 0 ? 0.5 : 1,
+          transition: "opacity 0.2s ease",
+        }}
+      >
+        {reviews.map((review) => (
+          <ReviewItem
+            key={review.id}
+            review={review}
+            userDetailsId={userDetailsId}
+            isBlocked={review.isBlocked}
+            isVisible={visibleBlockedReviews.has(review.id)}
+            isVoting={votingReviews.has(review.id)}
+            previousVotes={
+              previousVotesRef.current.get(review.id) || {
+                upvotes: 0,
+                downvotes: 0,
+              }
+            }
+            onVote={handleVoteReview}
+            onDelete={handleDeleteReview}
+            onToggleVisibility={toggleBlockedReview}
+            onAnimationComplete={handleVoteAnimationComplete}
+          />
+        ))}
+      </div>
+
+      {hasMoreReviews && !reviewsLoading && (
+        <button
+          className="game-details__load-more-reviews"
+          onClick={loadMoreReviews}
+        >
+          {t("load_more_reviews")}
+        </button>
+      )}
+
+      {reviewsLoading && reviews.length > 0 && (
+        <div className="game-details__reviews-loading">
+          {t("loading_more_reviews")}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.scss b/src/renderer/src/pages/game-details/hero/hero-panel.scss
index 4dd1cc22..4ff74fbf 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel.scss
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.scss
@@ -18,6 +18,7 @@
   top: 0;
   z-index: 2;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
 
   &--stuck {
     background: rgba(0, 0, 0, 0.7);