ci: added responsive design to souvenir cards in user profile

src/renderer/src/components/fullscreen-image-modal/fullscreen-image-modal.scss

@@ -35,9 +35,9 @@
   }
 
   &__close-button {
-    position: absolute;
-    top: -50px;
-    right: 0;
+    position: fixed;
+    top: 52px;
+    right: 32px;
     background: rgba(255, 255, 255, 0.1);
     border: none;
     border-radius: 50%;
@@ -50,6 +50,7 @@
     color: white;
     transition: background-color 0.2s ease;
     z-index: 10000;
+    pointer-events: auto;
 
     &:hover {
       background: rgba(255, 255, 255, 0.2);
@@ -103,8 +104,8 @@
 @media (max-width: 768px) {
   .fullscreen-image-modal {
     &__close-button {
-      top: 20px;
-      right: 20px;
+      top: 16px;
+      right: 16px;
       width: 36px;
       height: 36px;
     }
@@ -112,7 +113,23 @@
     &__container {
       max-width: 100vw;
       max-height: 100vh;
-      padding: 60px 20px 20px;
+      padding: 48px 16px 16px;
+    }
+  }
+}
+
+/* Extra safeguard for very low viewport heights */
+@media (max-height: 420px) {
+  .fullscreen-image-modal {
+    &__close-button {
+      top: 8px;
+      right: 8px;
+      width: 32px;
+      height: 32px;
+    }
+
+    &__container {
+      padding-top: 40px;
     }
   }
 }

src/renderer/src/pages/achievements/achievement-list.tsx

@@ -76,7 +76,12 @@ export function AchievementList({
                       )
                     }
                     aria-label={`View ${achievement.displayName} screenshot in fullscreen`}
-                    style={{ cursor: "pointer", padding: 0, border: "none", background: "transparent" }}
+                    style={{
+                      cursor: "pointer",
+                      padding: 0,
+                      border: "none",
+                      background: "transparent",
+                    }}
                   >
                     <img
                       className="achievements__item-custom-image"

src/renderer/src/pages/profile/profile-content/profile-content.scss

@@ -182,37 +182,40 @@
   }
 
   &__souvenirs-grid {
-    display: flex;
+    display: grid;
     gap: calc(globals.$spacing-unit * 2);
     padding-bottom: calc(globals.$spacing-unit);
+    grid-template-columns: repeat(2, 1fr);
 
-    &::-webkit-scrollbar {
-      height: 6px;
+    @container #{globals.$app-container} (min-width: 1000px) {
+      grid-template-columns: repeat(4, 1fr);
     }
 
-    &::-webkit-scrollbar-track {
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 3px;
+    @container #{globals.$app-container} (min-width: 1300px) {
+      grid-template-columns: repeat(5, 1fr);
     }
 
-    &::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.3);
-      border-radius: 3px;
+    @container #{globals.$app-container} (min-width: 2000px) {
+      grid-template-columns: repeat(6, 1fr);
+    }
 
-      &:hover {
-        background: rgba(255, 255, 255, 0.5);
-      }
+    @container #{globals.$app-container} (min-width: 2600px) {
+      grid-template-columns: repeat(8, 1fr);
+    }
+
+    @container #{globals.$app-container} (min-width: 3000px) {
+      grid-template-columns: repeat(12, 1fr);
     }
   }
 
   &__souvenir-card {
-    flex-shrink: 0;
-    width: 250px;
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     overflow: hidden;
     transition: all ease 0.2s;
+    position: relative;
+    container-type: inline-size;
 
     &:hover {
       transform: translateY(-4px);
@@ -220,11 +223,32 @@
       border-color: rgba(255, 255, 255, 0.2);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
     }
+
+    @container (max-width: 240px) {
+      .profile-content__souvenir-achievement-icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      .profile-content__souvenir-achievement-name {
+        font-size: 13px;
+      }
+
+      .profile-content__souvenir-game-title {
+        font-size: 11px;
+      }
+    }
+
+    @container (max-width: 280px) {
+      .profile-content__souvenir-card-content {
+        gap: calc(globals.$spacing-unit * 0.75);
+      }
+    }
   }
 
   &__souvenir-card-header {
     width: 100%;
-    height: 120px;
+    aspect-ratio: 16/9;
     overflow: hidden;
     position: relative;
   }
@@ -234,6 +258,12 @@
     width: 100%;
     height: 100%;
 
+    .profile-content__souvenir-image-button {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
     &:hover .profile-content__souvenir-achievement-image-overlay {
       opacity: 1;
     }
@@ -244,6 +274,7 @@
     height: 100%;
     object-fit: cover;
     transition: transform 0.2s ease;
+    display: block;
   }
 
   &__souvenir-achievement-image-overlay {
@@ -265,6 +296,11 @@
     }
   }
 
+  // Show overlay on keyboard focus for accessibility
+  &__souvenir-image-button:focus-visible + &__souvenir-achievement-image-overlay {
+    opacity: 1;
+  }
+
   &__souvenir-card-content {
     padding: 16px;
     background: rgba(0, 0, 0, 0.8);
@@ -272,7 +308,6 @@
     display: flex;
     flex-direction: column;
     gap: calc(globals.$spacing-unit);
-    position: relative;
     overflow: hidden;
   }
 
@@ -312,10 +347,10 @@
     line-height: 1.3;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
+    white-space: nowrap;
+    display: block;
+    flex: 1;
+    min-width: 0;
   }
 
   &__souvenir-game-info {
@@ -325,6 +360,7 @@
     gap: calc(globals.$spacing-unit * 1);
     position: relative;
     z-index: 2;
+    min-width: 0;
   }
 
   &__souvenir-game-left {
@@ -349,18 +385,10 @@
     line-height: 1.2;
     overflow: hidden;
     white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
-  &__souvenir-unlock-time {
-    padding: 0;
-    flex-shrink: 0;
 
-    small {
-      font-size: 11px;
-      color: rgba(255, 255, 255, 0.5);
-      font-weight: 400;
-    }
-  }
 
   &__souvenir-item {
     flex-shrink: 0;

src/renderer/src/pages/profile/profile-content/profile-content.tsx

@@ -1,7 +1,7 @@
 import { userProfileContext } from "@renderer/context";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ProfileHero } from "../profile-hero/profile-hero";
-import { useAppDispatch, useFormat, useDate } from "@renderer/hooks";
+import { useAppDispatch, useFormat } from "@renderer/hooks";
 import { setHeaderTitle } from "@renderer/features";
 import {
   TelescopeIcon,
@@ -107,7 +107,6 @@ export function ProfileContent() {
   }, [setStatsIndex, isAnimationRunning]);
 
   const { numberFormatter } = useFormat();
-  const { formatDateTime } = useDate();
 
   const usersAreFriends = useMemo(() => {
     return userProfile?.relation?.status === "ACCEPTED";
@@ -236,7 +235,12 @@ export function ProfileContent() {
                                   )
                                 }
                                 aria-label={`View ${achievement.name} screenshot in fullscreen`}
-                                style={{ cursor: "pointer", padding: 0, border: "none", background: "transparent" }}
+                                style={{
+                                  cursor: "pointer",
+                                  padding: 0,
+                                  border: "none",
+                                  background: "transparent",
+                                }}
                               >
                                 <img
                                   src={achievement.achievementImageUrl}
@@ -277,17 +281,11 @@ export function ProfileContent() {
                                 </span>
                               </div>
 
-                              {achievement.unlockTime && (
-                                <div className="profile-content__souvenir-unlock-time">
-                                  <small>
-                                    {formatDateTime(achievement.unlockTime)}
-                                  </small>
-                                </div>
-                              )}
-                            </div>
 
-                            <div className="profile-content__souvenir-card-gradient-overlay"></div>
+                            </div>
                           </div>
+
+                          <div className="profile-content__souvenir-card-gradient-overlay"></div>
                         </div>
                       ))}
                     </div>