Sanity file picker UI has no spacing between divs

[christopher-ha]

Describe the bug

The file picker in comparison to the image picker has no spacing between div elements resulting in an unpolished UI for client handoff.

To Reproduce

Steps to reproduce the behavior:

1. Create a schema that uses both type "image" and "file"

   
   import {
   ImagesIcon,
   DocumentVideoIcon,
   InlineElementIcon,
   } from "@sanity/icons";
   import CarouselPreview from "../../components/Sanity/CarouselPreview";

const carousel = { name: "carousel", title: "Carousel", type: "object", icon: InlineElementIcon, fields: [ { name: "media", title: "Media", type: "array", of: [ { name: "image", title: "Image", type: "image", icon: ImagesIcon, fields: [ { name: "title", title: "Title", type: "string" }, { name: "alt", title: "Caption", type: "string", }, ], options: { metadata: ["blurhash", "lqip", "palette"], }, }, { name: "video", title: "Video", type: "file", icon: DocumentVideoIcon, fields: [ { name: "title", title: "Title", type: "string" }, { name: "alt", title: "Caption", type: "string", }, ], options: { accept: "video/*", }, }, ], }, ], preview: { select: { media: "media", }, }, components: { preview: CarouselPreview, }, };

export default carousel;

**Screenshots**
![CleanShot 2024-06-07 at 10 45 43@2x](https://github.com/sanity-io/sanity/assets/63668974/b8a80d5f-067d-4d0b-941b-09029b9d3dfe)
![CleanShot 2024-06-07 at 10 45 58@2x](https://github.com/sanity-io/sanity/assets/63668974/e975660d-6fd8-4c2e-ad23-e734325a1d66)

Notice how file picker for video has no spacing unlike the images.

**Which versions of Sanity are you using?**

@sanity/cli (global)  3.45.0 (up to date)
@sanity/asset-utils    1.3.0 (up to date)
@sanity/image-url      1.0.2 (up to date)
@sanity/vision        3.45.0 (up to date)
@sanity/webhook        4.0.4 (up to date)
sanity                3.45.0 (up to date)

**What operating system are you using?**
Sonoma 14.5
Arc Browser / Chrome

[juice49]

Hey @christopher-ha. Thank you for reporting this, and I'm sorry about the visual inconsistency. Using your schema, I was able to replicate this issue. We will take a look at the layout here.

[christopher-ha]

Comparing the two, the Image Card is rendering as a Stack with grid gap, but the Video Card is rendering as a Box which doesn't have the gap styling. Is there a reason these two components are rendered differently when the Card UI component should render this similarly no matter the children elements?

Upon further investigation its the type: file that causes it. If you set this to type: image, the bug resolves. Something is wrong how file types are rendered in the card component.

[christopher-ha]

https://github.com/sanity-io/sanity/tree/next/packages/sanity/src/core/form/inputs/files/FileInput