Enhance layout and visual design of game card info section (#305)

* style(GameCard): enhance layout and visual design of game card info section

* fix(SettingsPage): adjust maximum poster size from 150 to 135

* fix(GameCard): move game title to the bottom of the game card info section

Author: Jayian1890

opennow-stable/src/renderer/src/components/GameCard.tsx

@@ -248,48 +248,48 @@ export const GameCard = memo(function GameCard({
             <Play size={24} fill="currentColor" />
           </button>
         </div>
-      </div>
 
-      <div className="game-card-info">
-        <h3 className="game-card-title" title={game.title}>
-          {game.title}
-        </h3>
-        {activeStoreOption && (
-          <p className="game-card-platform" title={activeStoreOption.displayName}>
-            {activeStoreOption.displayName}
-          </p>
-        )}
-        {storeOptions.length > 0 && (
-          <div className="game-card-stores">
-            {storeOptions.map((store) => {
-              const isActive = store.variantId === activeVariantId;
-              const className = `game-card-store-chip ${isActive ? "active" : ""}`;
-              const title = `${store.displayName}${isActive ? " (selected)" : ""}`;
+        <div className="game-card-info">
+          {activeStoreOption && (
+            <p className="game-card-platform" title={activeStoreOption.displayName}>
+              {activeStoreOption.displayName}
+            </p>
+          )}
+          {storeOptions.length > 0 && (
+            <div className="game-card-stores">
+              {storeOptions.map((store) => {
+                const isActive = store.variantId === activeVariantId;
+                const className = `game-card-store-chip ${isActive ? "active" : ""}`;
+                const title = `${store.displayName}${isActive ? " (selected)" : ""}`;
+
+                if (onSelectStore) {
+                  return (
+                    <button
+                      key={store.storeKey}
+                      type="button"
+                      className={className}
+                      title={title}
+                      onClick={(event) => handleStoreClick(event, store.variantId)}
+                      aria-label={`${store.displayName} store`}
+                      aria-pressed={isActive}
+                    >
+                      <store.IconComponent />
+                    </button>
+                  );
+                }
 
-              if (onSelectStore) {
                 return (
-                  <button
-                    key={store.storeKey}
-                    type="button"
-                    className={className}
-                    title={title}
-                    onClick={(event) => handleStoreClick(event, store.variantId)}
-                    aria-label={`${store.displayName} store`}
-                    aria-pressed={isActive}
-                  >
+                  <span key={store.storeKey} className={className} title={title}>
                     <store.IconComponent />
-                  </button>
+                  </span>
                 );
-              }
-
-              return (
-                <span key={store.storeKey} className={className} title={title}>
-                  <store.IconComponent />
-                </span>
-              );
-            })}
-          </div>
-        )}
+              })}
+            </div>
+          )}
+          <h3 className="game-card-title" title={game.title}>
+            {game.title}
+          </h3>
+        </div>
       </div>
     </div>
   );

opennow-stable/src/renderer/src/components/SettingsPage.tsx

@@ -40,7 +40,7 @@ type ThanksLoadState = "idle" | "loading" | "loaded" | "error";
 type SettingsSectionId = "stream" | "game" | "audio" | "input" | "interface" | "thanks";
 
 const POSTER_SIZE_MIN = 75;
-const POSTER_SIZE_MAX = 150;
+const POSTER_SIZE_MAX = 135;
 const POSTER_SIZE_STEP = 5;
 
 const codecOptions: VideoCodec[] = [...USER_FACING_VIDEO_CODEC_OPTIONS];

opennow-stable/src/renderer/src/styles.css

@@ -1866,6 +1866,7 @@ body.controller-mode.controller-hide-cursor * {
   overflow: hidden;
   background: var(--bg-c);
   backface-visibility: hidden;
+  flex: 1;
 }
 
 .game-card-image {
@@ -1908,7 +1909,7 @@ body.controller-mode.controller-hide-cursor * {
 .game-card-gradient {
   position: absolute;
   inset: 0;
-  background: linear-gradient(to bottom, transparent 20%, rgba(10, 10, 12, 0.8) 100%);
+  background: linear-gradient(to bottom, transparent 30%, rgba(10, 10, 12, 0.72) 60%, rgba(10, 10, 12, 0.92) 100%);
 }
 
 .game-card-play-button {
@@ -1933,30 +1934,48 @@ body.controller-mode.controller-hide-cursor * {
   background: var(--accent-press);
 }
 
-/* Card info (bottom section) */
+/* Card info — overlaid at the bottom of the poster */
 .game-card-info {
+  position: absolute;
+  inset: auto 0 0 0;
   padding: 10px 12px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.game-card-info::before {
+  content: "";
+  position: absolute;
+  inset: -80px 0 0 0;
+  background: linear-gradient(to bottom, transparent 0%, rgba(6, 8, 7, 0.6) 50%, rgba(6, 8, 7, 0.88) 100%);
+  pointer-events: none;
+  z-index: -1;
+}
+
+.game-card-info .game-card-stores {
+  pointer-events: auto;
 }
 
 .game-card-title {
   margin: 0;
   font-size: 0.8rem;
   font-weight: 600;
-  color: var(--ink);
+  color: #fff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.3;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
 }
 
 .game-card-platform {
   margin: 0;
   font-size: 0.72rem;
   font-weight: 500;
-  color: var(--ink-muted);
+  color: rgba(255, 255, 255, 0.65);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;