search

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.
https://polaris.shopify.com
Other
5.81k stars 1.17k forks source link

Tabs component response to a breakpoint #11952

Open Jurgyte opened 6 months ago

Jurgyte commented 6 months ago

Summary

In AppBridge modal Tabs are rendered as they would be in a mobile with dropdown on the right. After any change in the screen or resize it falls back to normal view. It is happening in any size of the modal.

Initial screen:

Screenshot 2024-04-26 at 23 23 37

It seems that it is rendered before the screen gets it's size and it is rendered as in a very small screen.

The initial conversation: https://shopify.slack.com/archives/C4Y8N30KD/p1713874644325089?thread_ts=1712755920.322749&cid=C4Y8N30KD

Expected behavior

I think it should not jump and change looks. I found out, that if we render tabs after modal i loaded it shows tabs as expected, however this rendering logic feels like extra step which could be avoided.

Actual behavior

Wrap animated gifs/videos in a details tag:

Summary of your gif(s) Description of what the gif shows

Steps to reproduce

  1. Create an AppBridge modal.
  2. Add Tabs component.

Are you using React components?

Yes

Polaris version number

12

Browser

Chrome

Device

Macbook

Vishnu-PP commented 3 months ago

Hi, do you have any update on how to fix this?