From 8dd3c9ba4f27cb3612237cf333c68f322be553d6 Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Wed, 25 Dec 2024 15:54:51 -0500
Subject: [PATCH 1/2] fix: add max-w-fit classname to avatar components

---
 .../common/components/AchievementAvatar/AchievementAvatar.tsx | 2 +-
 .../components/ActivePlayerFeed/ActivePlayerFeedList.tsx      | 4 +---
 resources/js/common/components/GameAvatar/GameAvatar.tsx      | 2 +-
 .../components/MultilineGameAvatar/MultilineGameAvatar.tsx    | 2 +-
 resources/js/common/components/UserAvatar/UserAvatar.tsx      | 2 +-
 .../TopAchieversList/TopAchieversList.tsx                     | 4 +---
 6 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/resources/js/common/components/AchievementAvatar/AchievementAvatar.tsx b/resources/js/common/components/AchievementAvatar/AchievementAvatar.tsx
index dfed89136d..bda7677281 100644
--- a/resources/js/common/components/AchievementAvatar/AchievementAvatar.tsx
+++ b/resources/js/common/components/AchievementAvatar/AchievementAvatar.tsx
@@ -23,7 +23,7 @@ export const AchievementAvatar: FC<AchievementAvatarProps> = ({
   return (
     <a
       href={route('achievement.show', { achievement: id })}
-      className="flex items-center gap-2"
+      className="flex max-w-fit items-center gap-2"
       {...(hasTooltip ? cardTooltipProps : undefined)}
     >
       {showImage ? (
diff --git a/resources/js/common/components/ActivePlayerFeed/ActivePlayerFeedList.tsx b/resources/js/common/components/ActivePlayerFeed/ActivePlayerFeedList.tsx
index f233f3986e..3c418898ae 100644
--- a/resources/js/common/components/ActivePlayerFeed/ActivePlayerFeedList.tsx
+++ b/resources/js/common/components/ActivePlayerFeed/ActivePlayerFeedList.tsx
@@ -24,9 +24,7 @@ export const ActivePlayerFeedList: FC<ActivePlayerFeedListProps> = ({ onLoadMore
           </div>
 
           <div className="flex flex-col">
-            <div className="max-w-fit">
-              <GameAvatar {...player.game} showImage={false} />
-            </div>
+            <GameAvatar {...player.game} showImage={false} />
 
             <p className="line-clamp-1 text-2xs" style={{ wordBreak: 'break-word' }}>
               <RichPresenceMessage
diff --git a/resources/js/common/components/GameAvatar/GameAvatar.tsx b/resources/js/common/components/GameAvatar/GameAvatar.tsx
index 75ee4c4b44..fb41653c1a 100644
--- a/resources/js/common/components/GameAvatar/GameAvatar.tsx
+++ b/resources/js/common/components/GameAvatar/GameAvatar.tsx
@@ -49,7 +49,7 @@ export const GameAvatar: FC<GameAvatarProps> = ({
   return (
     <Wrapper
       href={shouldLink ? route('game.show', { game: id }) : undefined}
-      className="flex items-center gap-2"
+      className="flex max-w-fit items-center gap-2"
       {...(hasTooltip && shouldLink ? cardTooltipProps : undefined)}
     >
       {showImage ? (
diff --git a/resources/js/common/components/MultilineGameAvatar/MultilineGameAvatar.tsx b/resources/js/common/components/MultilineGameAvatar/MultilineGameAvatar.tsx
index 8126cf270f..845eb13a41 100644
--- a/resources/js/common/components/MultilineGameAvatar/MultilineGameAvatar.tsx
+++ b/resources/js/common/components/MultilineGameAvatar/MultilineGameAvatar.tsx
@@ -33,7 +33,7 @@ export const MultilineGameAvatar: FC<MultilineGameAvatarProps> = ({
   });
 
   return (
-    <div className="relative flex items-center gap-x-2">
+    <div className="relative flex max-w-fit items-center gap-x-2">
       {/* Keep the image and game title in a single tooltipped container. Do not tooltip the system name. */}
       <a href={route('game.show', { game: id })} {...(hasTooltip ? cardTooltipProps : undefined)}>
         <img
diff --git a/resources/js/common/components/UserAvatar/UserAvatar.tsx b/resources/js/common/components/UserAvatar/UserAvatar.tsx
index ca356cb068..a135528524 100644
--- a/resources/js/common/components/UserAvatar/UserAvatar.tsx
+++ b/resources/js/common/components/UserAvatar/UserAvatar.tsx
@@ -22,7 +22,7 @@ export const UserAvatar: FC<UserAvatarProps> = ({
   return (
     <Wrapper
       href={canLinkToUser ? route('user.show', [displayName]) : undefined}
-      className="flex items-center gap-2"
+      className="flex max-w-fit items-center gap-2"
       {...(hasTooltip && canLinkToUser ? cardTooltipProps : undefined)}
     >
       {showImage ? (
diff --git a/resources/js/features/games/components/TopAchieversMainRoot/TopAchieversList/TopAchieversList.tsx b/resources/js/features/games/components/TopAchieversMainRoot/TopAchieversList/TopAchieversList.tsx
index f85dce96b4..9c2ed66764 100644
--- a/resources/js/features/games/components/TopAchieversMainRoot/TopAchieversList/TopAchieversList.tsx
+++ b/resources/js/features/games/components/TopAchieversMainRoot/TopAchieversList/TopAchieversList.tsx
@@ -49,9 +49,7 @@ export const TopAchieversList: FC = () => {
             <BaseTableCell>{formatNumber(achiever.rank)}</BaseTableCell>
 
             <BaseTableCell>
-              <div className="max-w-fit">
-                <UserAvatar {...achiever.user} size={32} />
-              </div>
+              <UserAvatar {...achiever.user} size={32} />
             </BaseTableCell>
 
             <BaseTableCell>

From 18268d1e92e39fa0917a4f9af89a003c6399e70d Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Sun, 29 Dec 2024 13:49:23 -0500
Subject: [PATCH 2/2] fix: remove one more max-w-fit classname

---
 .../game-list/utils/column-definitions/buildTitleColumnDef.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx b/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx
index 112ef75e76..c577810866 100644
--- a/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx
+++ b/resources/js/features/game-list/utils/column-definitions/buildTitleColumnDef.tsx
@@ -38,7 +38,7 @@ export function buildTitleColumnDef({
 
     cell: ({ row }) => {
       return (
-        <div className="min-w-[180px] max-w-fit">
+        <div className="min-w-[180px]">
           <div className="max-w-[400px]">
             <GameAvatar
               {...row.original.game}