fix: modify ui to prevent social image name overflow in page settings. (#5088)

## Description
fixes: #4953 

aligned the name and other contents properly preventing long image names
from overflowing out of view.

![Screenshot from 2025-04-04
09-25-03](https://github.com/user-attachments/assets/68cf34b4-74f7-4468-b132-e5fb1c6f2358)

![Screenshot from 2025-04-04
09-24-57](https://github.com/user-attachments/assets/885807e1-dae8-49e0-b1f0-144ad96a29f5)


## 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

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

---------

Co-authored-by: Oleg Isonen <[email protected]>

Author: victorchrollo14

apps/builder/app/builder/features/pages/image-info.tsx

@@ -1,4 +1,10 @@
-import { IconButton, Text, Grid, theme } from "@webstudio-is/design-system";
+import {
+  IconButton,
+  Text,
+  Grid,
+  theme,
+  Flex,
+} from "@webstudio-is/design-system";
 import {
   AspectRatioIcon,
   TrashIcon,
@@ -15,7 +21,7 @@ type ImageInfoProps = {
 
 export const ImageInfo = ({ asset, onDelete }: ImageInfoProps) => {
   return (
-    <Grid gap={1} flow={"column"} align={"center"} justify={"start"}>
+    <Grid gap={1} flow={"column"} align={"center"} justify={"between"}>
       <Grid
         gap={2}
         flow={"column"}
@@ -30,25 +36,32 @@ export const ImageInfo = ({ asset, onDelete }: ImageInfoProps) => {
           pr: theme.spacing[5],
         }}
       >
-        <Grid flow={"column"} gap={1} align={"center"}>
-          <ImageIcon />
-          <Text truncate variant={"labelsTitleCase"}>
-            {asset.name}
-          </Text>
-        </Grid>
-        |
-        <Grid flow={"column"} gap={1} align={"center"}>
-          <DimensionsIcon />
-          <Text variant={"labelsTitleCase"}>
-            {asset.meta.width} x {asset.meta.height} Px
-          </Text>
-        </Grid>
-        |
-        <Grid flow={"column"} gap={1} align={"center"}>
-          <AspectRatioIcon />
-          <Text variant={"labelsTitleCase"}>
-            {getFormattedAspectRatio(asset.meta)}
-          </Text>
+        <Grid
+          columns={1}
+          css={{ padding: theme.panel.padding, width: theme.spacing[34] }}
+          gap={2}
+          align={"center"}
+        >
+          <Grid flow={"column"} gap={1} align={"center"}>
+            <ImageIcon />
+            <Text truncate variant={"labelsTitleCase"}>
+              {asset.name}
+            </Text>
+          </Grid>
+          <Grid columns={2} gap={1} align={"center"}>
+            <Flex gap={1}>
+              <DimensionsIcon />
+              <Text variant={"labelsTitleCase"}>
+                {asset.meta.width} x {asset.meta.height} Px
+              </Text>
+            </Flex>
+            <Flex gap={1}>
+              <AspectRatioIcon />
+              <Text variant={"labelsTitleCase"}>
+                {getFormattedAspectRatio(asset.meta)}
+              </Text>
+            </Flex>
+          </Grid>
         </Grid>
       </Grid>
       <IconButton onClick={onDelete}>