search

missive / emoji-mart

🏪 One component to pick them all
https://missiveapp.com/open/emoji-mart
MIT License
8.67k stars 835 forks source link

UI Break on 13-inch mac Chrome #345

Closed li6834300 closed 4 years ago

li6834300 commented 5 years ago

Please see the attachment: The UI of Search box break on 13-inch Mac Chrome System: MacBook Pro (Retina, 13-inch, Early 2015), MacBook Pro (Retina, 13-inch, Mid 2015) 10.12 (16A323), macOS Sierra Chrome Version: Version 67.0.3396.99 (Official Build) (64-bit) (It still exists even I update Chrome Version)

B4F1FC7EF87B8772A721630D775F0476

nolanlawson commented 5 years ago

I can't reproduce on Chrome 75 on a 13-inch screen using the storybook or missive.github.io/emoji-mart.

Maybe it's because Chrome 67 is quite old?

Also, when you say "break," what do you mean? Are you referring to the search box overflowing on the right? Or are you referring to the existence of a horizontal scroll bar? Note that you can customize the number of emoji on each row.

li6834300 commented 5 years ago

Hi Thanks @nolanlawson for answering Are you using the Mac system: MacBook Pro (Retina, 13-inch, Early 2015) We updated Chrome to new version, it still exists. The 'break' refer to he overflowing of the search box. Thanks

iamsaksham commented 5 years ago

Hi @li6834300 Even I'm not able to replicate this issue. I have Macbook Pro (Retina, 13-inch)

Looks like some CSS might be with !important, so it might be taking the custom CSS and overriding the default CSS. From what I see, there might be some min-width: **px !important. Can you inspect the input box and show all the CSS applied to it.

auek commented 5 years ago

I had the exact same issue and it occurred because of an outdated normalize.css rule. It seems like they fixed it here by removing box-sizing: content-box; from input[type="search"] and that worked for me as well.

Good luck!

nolanlawson commented 4 years ago

Thanks, since this seems due to external CSS, I'll close this issue.