From 2d7ea53fb0cd55cd7ec4e0865eb0ddb4c322b265 Mon Sep 17 00:00:00 2001
From: victor immanuel <89346667+victorchrollo14@users.noreply.github.com>
Date: Thu, 27 Mar 2025 00:25:05 +0530
Subject: [PATCH] fix: asset details filename overflow issue. (#5054)

## Description

I didn't find any open issue for this. the asset details card filename
was a bit messed up and it was hiding the size detail.


![image](https://github.com/user-attachments/assets/b5a0a550-f959-4feb-b6de-b3523610325e)

this PR fix, trims the filename and aligns the size in the next line as
follows.

![Screenshot from 2025-03-25
14-37-26](https://github.com/user-attachments/assets/a27155b6-9add-45db-b651-2424bcca5b32)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../shared/image-manager/image-info.tsx       | 70 +++++++++++--------
 packages/asset-uploader/src/utils/mime.ts     |  4 ++
 2 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/apps/builder/app/builder/shared/image-manager/image-info.tsx b/apps/builder/app/builder/shared/image-manager/image-info.tsx
index 03a323c469..7fd9852d73 100644
--- a/apps/builder/app/builder/shared/image-manager/image-info.tsx
+++ b/apps/builder/app/builder/shared/image-manager/image-info.tsx
@@ -1,24 +1,25 @@
 import { useStore } from "@nanostores/react";
-import prettyBytes from "pretty-bytes";
+import { getMimeByExtension } from "@webstudio-is/asset-uploader";
 import {
-  theme,
   Box,
+  Button,
   Flex,
   Grid,
   Text,
-  Button,
+  theme,
   Tooltip,
 } from "@webstudio-is/design-system";
 import {
-  CloudIcon,
   AspectRatioIcon,
+  CloudIcon,
   DimensionsIcon,
+  PageIcon,
   TrashIcon,
 } from "@webstudio-is/icons";
 import type { Asset } from "@webstudio-is/sdk";
-import { Filename } from "./filename";
-import { getFormattedAspectRatio } from "./utils";
+import prettyBytes from "pretty-bytes";
 import { $authPermit } from "~/shared/nano-states";
+import { getFormattedAspectRatio } from "./utils";
 
 type ImageInfoProps = {
   asset: Asset;
@@ -27,6 +28,10 @@ type ImageInfoProps = {
 
 export const ImageInfo = ({ asset, onDelete }: ImageInfoProps) => {
   const { size, meta, id, name } = asset;
+
+  const parts = name.split(".");
+  const extension = "." + parts.pop();
+
   const authPermit = useStore($authPermit);
 
   const isDeleteDisabled = authPermit === "view";
@@ -36,35 +41,44 @@ export const ImageInfo = ({ asset, onDelete }: ImageInfoProps) => {
 
   return (
     <>
+      <Box css={{ width: 250, padding: theme.panel.padding }}>
+        <Text truncate>{name}</Text>
+      </Box>
       <Box css={{ padding: theme.panel.padding }}>
-        <Grid columns={2} align="center" gap={2}>
-          <Box css={{ width: 100 }}>
-            <Filename variant="labelsSentenceCase">{name}</Filename>
-          </Box>
+        <Grid
+          columns={2}
+          css={{ gridTemplateColumns: "auto auto" }}
+          align="center"
+          gap={3}
+        >
           <Flex align="center" css={{ gap: theme.spacing[3] }}>
             <CloudIcon />
             <Text variant="labelsSentenceCase">{prettyBytes(size)}</Text>
           </Flex>
+          <Flex align="center" css={{ gap: theme.spacing[3] }}>
+            <PageIcon />
+            <Text variant="labelsSentenceCase">
+              {getMimeByExtension(extension)}
+            </Text>
+          </Flex>
+          {"width" in meta && "height" in meta ? (
+            <>
+              <Flex align="center" gap={1}>
+                <DimensionsIcon />
+                <Text variant="labelsSentenceCase">
+                  {meta.width} x {meta.height}
+                </Text>
+              </Flex>
+              <Flex align="center" gap={1}>
+                <AspectRatioIcon />
+                <Text variant="labelsSentenceCase">
+                  {getFormattedAspectRatio(meta)}
+                </Text>
+              </Flex>
+            </>
+          ) : null}
         </Grid>
       </Box>
-      {"width" in meta && "height" in meta ? (
-        <Box css={{ padding: theme.panel.padding }}>
-          <Grid columns={2} gap={2} align="center">
-            <Flex align="center" gap={1}>
-              <DimensionsIcon />
-              <Text variant="labelsSentenceCase">
-                {meta.width} x {meta.height}
-              </Text>
-            </Flex>{" "}
-            <Flex align="center" gap={1}>
-              <AspectRatioIcon />
-              <Text variant="labelsSentenceCase">
-                {getFormattedAspectRatio(meta)}
-              </Text>
-            </Flex>
-          </Grid>
-        </Box>
-      ) : null}
       <Box css={{ padding: theme.panel.padding }}>
         <Tooltip side="bottom" content={tooltipContent}>
           <Button
diff --git a/packages/asset-uploader/src/utils/mime.ts b/packages/asset-uploader/src/utils/mime.ts
index 357294f6c4..d1fd0cadb7 100644
--- a/packages/asset-uploader/src/utils/mime.ts
+++ b/packages/asset-uploader/src/utils/mime.ts
@@ -131,6 +131,10 @@ export const doesAssetMatchMimePatterns = (
   return patterns.has(mime) || patterns.has(`${getCategory(mime)}/*`);
 };
 
+export const getMimeByExtension = (ext: string): string => {
+  return extensionToMime.get(ext) ?? "unknown";
+};
+
 // Didn't delete because we may need this later
 // From https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 // const extentionToMime: [