Fix: replaced array index with review.id and marked props as read-only

src/renderer/src/pages/game-details/game-details-content.tsx

@@ -688,8 +688,8 @@ export function GameDetailsContent() {
                     </div>
                   )}
 
-                  {reviews.map((review, index) => (
-                    <div key={index} className="game-details__review-item">
+                  {reviews.map((review) => (
+                    <div key={review.id} className="game-details__review-item">
                       {review.isBlocked &&
                       !visibleBlockedReviews.has(review.id) ? (
                         <div className="game-details__blocked-review-simple">
@@ -713,24 +713,15 @@ export function GameDetailsContent() {
                                 />
                               )}
                               <div className="game-details__review-user-info">
-                                <div
+                                <button
                                   className="game-details__review-display-name game-details__review-display-name--clickable"
                                   onClick={() =>
                                     review.user?.id &&
                                     navigate(`/profile/${review.user.id}`)
                                   }
-                                  onKeyDown={(e) => {
-                                    if (e.key === "Enter" || e.key === " ") {
-                                      e.preventDefault();
-                                      review.user?.id &&
-                                        navigate(`/profile/${review.user.id}`);
-                                    }
-                                  }}
-                                  role="button"
-                                  tabIndex={0}
                                 >
                                   {review.user?.displayName || "Anonymous"}
-                                </div>
+                                </button>
                                 <div className="game-details__review-date">
                                   <ClockIcon size={12} />
                                   {formatDistance(

src/renderer/src/pages/game-details/modals/delete-review-modal.tsx

@@ -12,7 +12,7 @@ export function DeleteReviewModal({
   visible,
   onClose,
   onConfirm,
-}: DeleteReviewModalProps) {
+}: Readonly<DeleteReviewModalProps>) {
   const { t } = useTranslation("game_details");
 
   const handleDeleteReview = () => {

src/renderer/src/pages/game-details/review-prompt-banner.tsx

@@ -10,7 +10,7 @@ interface ReviewPromptBannerProps {
 export function ReviewPromptBanner({
   onYesClick,
   onLaterClick,
-}: ReviewPromptBannerProps) {
+}: Readonly<ReviewPromptBannerProps>) {
   const { t } = useTranslation("game_details");
 
   return (

src/renderer/src/pages/game-details/review-sort-options.tsx

@@ -21,7 +21,7 @@ interface ReviewSortOptionsProps {
 export function ReviewSortOptions({
   sortBy,
   onSortChange,
-}: ReviewSortOptionsProps) {
+}: Readonly<ReviewSortOptionsProps>) {
   const { t } = useTranslation("game_details");
 
   const handleDateToggle = () => {