What is the best way to use Tabs in a container that is too small and causes overflow #3577
-
|
I'm working on the evergreen to paste migration for Settings > Usage & Billing in the app. There is one page with multiple tabs of data. Here is what the page looks like with a lot of tabs in evergreen.
Here is what I have so far with the paste tabs component.
You can see that the tab labels overflow and are cut off. What would be the best way to deal with this scenario if I need the full tab label to show? Is there a way to make the TabList overflow to a second line instead of forcing itself into one line by replacing the Tab overflow with ellipses? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary. Sorry, I don't know how to help with that. The documentation does not provide information on how to make the TabList overflow to a second line or replace the Tab overflow with ellipses. Here are some similar discussions:
|
Beta Was this translation helpful? Give feedback.
-
|
This has come up before and is something that is in our backlog to look into address. For this particular screen, I am wondering if those items are actually tabs or pages, though? Something like itemized billing for API calls or functions usage seems too important to not have its own URL. If they do, you should be using in page navigation. That still might not address the issue fully, but at least we're starting off with using the right component for the job. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the reply. Sorry I missed that other discussion topic. It might not be obvious from the design but this each tab has its own URL. The use of tabs here is just a stylistic choice made a long time ago that mainly serves for navigation. I'm trying to limit my changes to just replacing evergreen without any major style impacts. Maybe this could be addressed in the future. I'll try to figure something else out for now. |
Beta Was this translation helpful? Give feedback.
-
|
In that case, our strong recommendation isn't necessarily to worry about the visuals, but focus on the correct semantic component for the job. It'll be incredibly important for improved accessibility within the Segment app, which is going to be a nice side effect of migrating to Paste in the long run. |
Beta Was this translation helpful? Give feedback.
Hi @pmiller-twilio
This has come up before and is something that is in our backlog to look into address.
For this particular screen, I am wondering if those items are actually tabs or pages, though? Something like itemized billing for API calls or functions usage seems too important to not have its own URL. If they do, you should be using in page navigation. That still might not address the issue fully, but at least we're starting off with using the right component for the job.