Issues with UInput using type File

[TheAce4K]

Environment

• Operating System: Darwin
• Browser: Safari Version 16.6

Version

v2.14.2

Reproduction

https://ui.nuxt.com/components/input If you go to the file type example you will see the issue

Description

Even when browsing the documentation I see this issue in my browser. The box is too small and the content is cropped. Please see image as it will be obvious:

Additional context

No response

Logs

No response

[CooperHash]

[HigherOrderLogic]

Have you tried other browsers? The field seems fine on my side.

[moshetanzer]

@TheAce4K Yip this is a bug at least on safari. Will open a pr.

[CooperHash]

https://ui.nuxt.com/components/input

i can try to fix it

[moshetanzer]

Go for it @CooperHash

[CooperHash]

I'm sorry for it. This bug seems a little bit weird, and I can't figure out the fix method right now. it seems safari's shadow content problem

[simoncdn]

Hello, I've checked the input component with the type file for issue #1412 and this issue seems to come from the same thing: absolute position.

With absolute position:

With another position (here: block):

[benjamincanac]

I tried but have no idea on how to fix that on Safari at the moment. The absolute positioning is required to achieve the desired result, otherwise you can just use a normal <input>.

[moshetanzer]

@benjamincanac maybe we should add a callout, or remove until we get it working?

[benjamincanac]

Since I haven't found a solution to fix this, I decided to switch to a simpler design that will work everywhere:

What do you guys think?

[moshetanzer]

@benjamincanac Think light version text of "choose file" either should be made darker or lighter. This is how it looks IOS

[benjamincanac]

Should we use the same color as the placeholder? I tried multiple shades and I think I'll keep it that way as it didn't look good.