refactor(download-group): update button interaction and styles

src/renderer/src/pages/downloads/download-group.scss

@@ -108,16 +108,11 @@
       cursor: pointer;
       display: flex;
       align-items: center;
-      transition: opacity 0.2s ease;
+      transition: scale 0.2s ease;
       outline: none;
 
       &:hover {
-        opacity: 0.8;
-      }
-
-      &:focus,
-      &:focus-visible {
-        outline: none;
+        scale: 1.05;
       }
     }
 
@@ -411,6 +406,22 @@
     gap: calc(globals.$spacing-unit / 1);
   }
 
+  &__simple-title-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    transition: opacity 0.2s ease;
+
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
   &__simple-title {
     font-size: 16px;
     font-weight: 600;

src/renderer/src/pages/downloads/download-group.tsx

@@ -436,6 +436,7 @@ export function DownloadGroup({
   seedingStatus,
 }: Readonly<DownloadGroupProps>) {
   const { t } = useTranslation("downloads");
+  const navigate = useNavigate();
 
   const userPreferences = useAppSelector(
     (state) => state.userPreferences.value
@@ -872,7 +873,13 @@ export function DownloadGroup({
               </div>
 
               <div className="download-group__simple-info">
-                <h3 className="download-group__simple-title">{game.title}</h3>
+                <button
+                  type="button"
+                  onClick={() => navigate(buildGameDetailsPath(game))}
+                  className="download-group__simple-title-button"
+                >
+                  <h3 className="download-group__simple-title">{game.title}</h3>
+                </button>
                 <div className="download-group__simple-meta">
                   <div className="download-group__simple-meta-row">
                     <Badge>{DOWNLOADER_NAME[game.download!.downloader]}</Badge>