Refactor: team tab navigation styling

[Musyonchez]

In an effort to enhance the user experience on smaller screens, i implemented a solution to address the issue of navigation tabs being pressed together, which was not visually appealing. By utilizing the flex-wrap property, i enabled the tabs to transition to the next line when the screen size is reduced. This adjustment aims to improve the visual presentation of the navigation tabs on smaller devices, ensuring a more aesthetically pleasing and functional interface for the users.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
saas-starter-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 16, 2024 9:12am

[Musyonchez]

Also members page (the display of user info) dont look well on smaller screens i will fix that next. For single-sign-on page (the header tabs) it has been abstracted and i dont think the actual code for it is in this repo.

[Musyonchez]

@deepakprabhakara for the members user data dispplay there are four ways i can see of doing this but they have their own tradeoffs please check and advice.

1.Using overflow-x-auto on the data display and header divs: This approach allows for horizontal scrolling when the content exceeds the container's width, ensuring that all data is accessible. The tradeoff is the need to set a fixed width to maintain uniformity, which might not be ideal for varying lengths of user data. Excess content can wrap to the next line, but this could lead to inconsistent presentation across different data entries.

2.Making headers vertical and data horizontal: This method involves rotating the headers to align vertically and arranging the data horizontally, creating a grid-like structure. The tradeoff is the repetition of headers for each row of data, which could be visually redundant and potentially confusing for users.

3.Wrapping the rightmost item to the next line: Similar to the team tab implementation, this method involves wrapping the rightmost item to the next line when the data exceeds the container's width. The tradeoff is that if the user data varies in length, the presentation may not be uniform across the list, leading to a less appealing visual layout. Additionally, this could result in a congested appearance, especially if many items need to wrap.

4.Showing only a portion of the user data with a link to a detailed view: This method involves displaying a truncated version of the user data and providing a link to a detailed view page (e.g., /members/[member]). The tradeoff here is that users must navigate to another page to view the full data and perform actions, which could be less convenient than having all information readily available on the main page.

If you have a better way i am open and will implement it.

[deepakprabhakara]

Fixes https://github.com/boxyhq/saas-starter-kit/issues/1199

[niwsa]

For single-sign-on page (the header tabs) it has been abstracted and i dont think the actual code for it is in this repo.

That's correct. It's coming from our UI SDK. To be specific you are looking at https://github.com/boxyhq/ui/blob/main/src/sso/connections/ConnectionsWrapper/index.lite.tsx

[niwsa]

@Musyonchez Approach 1 seems clean and is something we see commonly nowadays. https://flowbite.com/docs/components/tables/#overflow-scrolling - Here they seem to apply overflow to the table container itself.

@deepakprabhakara Any suggestions ?

[deepakprabhakara]

Approach 1 sounds good to me too.

[Musyonchez]

I opted to use inline CSS in the following code snippet:

style={
  cell.minWidth ? { minWidth: `${cell.minWidth}px` } : {}
}

This decision was made due to a potential conflict with the <td> element when passing width properties via className. From my observations, certain CSS properties like flex worked as expected when passed as className, but width properties did not. By using inline CSS, we can ensure that the minWidth property is applied correctly to the <td> element.