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

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

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: [