ClickHouse / click-ui

The home of the ClickHouse design system and component library.
https://click-ui.vercel.app
72 stars 7 forks source link

Make tabs names use more space #481

Open serdec opened 5 days ago

serdec commented 5 days ago

Description

image

Tabs names are truncated too soon. The tabs still have some space that could be used to show their name.

Possible solution

there could be two solutions for handling the close button (x) space

  1. adopting the same solution chrome does (do not show the x if the space is too little) image image

  1. show the x as an absolute position on top of the label (we might need to give it a different background)
guykoh commented 5 days ago

It's a bit funny we show this icon and not the name, should we drop the table icon when it's very narrow? We should also make the tabs nav bar scrollable (horizontally - might be most beneficial for Mac users, so we definitely need to provide another solution). Another solution would be to add a dropdown button at the right end of the navbar where we can show all hidden open tabs.

wdyt @gjones, @fneves, @ArctypeZach?

serdec commented 5 days ago

@guykoh the tabs are scrollable horizontally already

guykoh commented 5 days ago

@guykoh the tabs are scrollable horizontally already

Should we show less open tabs in this case?

serdec commented 5 days ago

that could also be an option, but i think the minimum width of the tab is already big enough, we would have to make it bigger

fneves commented 2 days ago

Agree with serdec. Lets just increast the min width of each tab. Easiest fix.