gravitational / teleport

The easiest, and most secure way to access and protect all of your infrastructure.
https://goteleport.com
GNU Affero General Public License v3.0
17.3k stars 1.74k forks source link

nested tabs in webauthn guide result in a poor UX #35870

Open zmb3 opened 8 months ago

zmb3 commented 8 months ago

https://goteleport.com/docs/access-controls/guides/webauthn/

At the bottom of the page we have nested tab groups:

image

In addition to poor appearance, the page jumps around and scrolls to different positions when you click the inner-most set of tabs.

ptgott commented 8 months ago

With the current docs engine, the most elegant alternatives (for me) are:

Here are all of the pages and line numbers where we include a <Tabs> tag inside a <TabItem> (as of e69cd297677e33ef6769d2863986b741a9f9bbd2). All of these have the same issues pointed out above:

$ find docs/pages -name "*.mdx" -exec awk '
/<TabItem/{ti=1}
ti==1 && /<\/TabItem/{ti=0}
ti==1 && /<Tabs/{n=1;if(lines=="") lines=FNR; else lines=(lines "," FNR)}
END{if(n>0) print FILENAME ":" lines}' {} \;
docs/pages/database-access/guides/mongodb-atlas.mdx:41,103
docs/pages/database-access/guides/clickhouse-self-hosted.mdx:125,166
docs/pages/access-controls/getting-started.mdx:151
docs/pages/access-controls/guides/per-session-mfa.mdx:64
docs/pages/access-controls/guides/webauthn.mdx:280
docs/pages/access-controls/guides/locking.mdx:197
docs/pages/access-controls/guides/passwordless.mdx:126,268
docs/pages/access-controls/sso.mdx:250
docs/pages/deploy-a-cluster/helm-deployments/aws.mdx:317,406
docs/pages/includes/database-access/aws-bootstrap.mdx:43
docs/pages/connect-your-client/introduction.mdx:22,65
docs/pages/connect-your-client/gui-clients.mdx:25
docs/pages/management/admin/self-signed-certs.mdx:114
docs/pages/management/admin/uninstall-teleport.mdx:74,181,299
docs/pages/installation.mdx:412
ptgott commented 3 months ago

I took care of some of these in https://github.com/gravitational/teleport/pull/41489.

We'll want to:

ptgott commented 1 month ago

There's another discussion about nested Tabs components in the comments in this PR. We'll want to refactor the nested Tabs in the SSO guide (docs/pages/access-controls/sso.mdx) as part of this work.