fix: flex-shrink-0 on user avatar to make it as wide as needed

ntua-unit-of-control-and-informatics · Nov 28, 2024 · 87003d5 · 87003d5
1 parent 7de836e
commit 87003d5
Showing 1 changed file with 49 additions and 46 deletions.
diff --git a/src/app/dashboard/models/[modelId]/[tabName]/page.tsx b/src/app/dashboard/models/[modelId]/[tabName]/page.tsx
@@ -176,53 +176,56 @@ export default async function Page({ params }: { params: ModelPageParams }) {
           {model.name}
         </div>
         <div className="flex h-fit flex-nowrap items-center gap-6 overflow-x-scroll py-3 scrollbar-hide">
-          <div className="flex items-center text-sm text-gray-400">
-            {model.creator && (
-              <Tooltip content={'Creator'} closeDelay={0}>
-                <User
-                  name={`${model.creator.firstName} ${model.creator.lastName}`}
-                  description={
-                    <Link
-                      href={`/dashboard/user/${model.creator.username}`}
-                      size="sm"
-                    >
-                      @{model.creator.username}
-                    </Link>
-                  }
-                  avatarProps={{
-                    src:
-                      model.creator.avatarUrl ||
-                      getAvatarFallbackImg(model.creator?.email),
-                  }}
-                />
-              </Tooltip>
-            )}
-          </div>
-          <div className="flex items-center text-sm text-gray-400">
-            {model.type && (
-              <>
-                <Tooltip content={'Model type'} closeDelay={0}>
-                  <div className="flex">
-                    <BeakerIcon className="mr-2 size-5 text-gray-400" />
-                    <span>{model.type}</span>
-                  </div>
-                </Tooltip>
-              </>
-            )}
-          </div>
-          <div className="flex items-center text-sm text-gray-400">
-            {model.createdAt && (
-              <>
-                <Tooltip content={'Date created'} closeDelay={0}>
-                  <div className="flex items-center">
-                    <CalendarDaysIcon className="mr-2 size-5 text-gray-400" />
-                    <JaqpotTimeAgo
-                      date={new Date(model.createdAt as unknown as string)}
-                    />
-                  </div>
+          <div className="flex h-fit flex-nowrap items-center gap-6 overflow-x-scroll py-3 scrollbar-hide">
+            <div className="flex flex-shrink-0 items-center text-sm text-gray-400">
+              {model.creator && (
+                <Tooltip content={'Creator'} closeDelay={0}>
+                  <User
+                    name={`${model.creator.firstName} ${model.creator.lastName}`}
+                    description={
+                      <Link
+                        href={`/dashboard/user/${model.creator.username}`}
+                        size="sm"
+                      >
+                        @{model.creator.username}
+                      </Link>
+                    }
+                    avatarProps={{
+                      src:
+                        model.creator.avatarUrl ||
+                        getAvatarFallbackImg(model.creator?.email),
+                    }}
+                  />
                 </Tooltip>
-              </>
-            )}
+              )}
+            </div>
+            <div className="flex flex-shrink-0 items-center text-sm text-gray-400">
+              {model.createdAt && (
+                <>
+                  <Tooltip content={'Date created'} closeDelay={0}>
+                    <div className="flex items-center">
+                      <CalendarDaysIcon className="mr-2 size-5 text-gray-400" />
+                      <JaqpotTimeAgo
+                        date={new Date(model.createdAt as unknown as string)}
+                      />
+                    </div>
+                  </Tooltip>
+                </>
+              )}
+            </div>
+
+            <div className="flex flex-shrink-0 items-center text-sm text-gray-400">
+              {model.type && (
+                <>
+                  <Tooltip content={'Model type'} closeDelay={0}>
+                    <div className="flex">
+                      <BeakerIcon className="mr-2 size-5 text-gray-400" />
+                      <span>{model.type}</span>
+                    </div>
+                  </Tooltip>
+                </>
+              )}
+            </div>
           </div>
         </div>
       </div>