Display multiple scopes in api endpoints in two columns

[timonrey]

Description of changes

Link original ticket closes https://github.com/commercetools/commercetools-docs/issues/4871

Screenshot of changes (if applicable) After:

Maintaining no column for less than 10 scopes and two columns for more than 10 scopes:

DoD guidelines

• [ ] user documentation added?
• [x] stakeholders approve changes? (if needed)

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 88bbaa20892639486142851306f45abd46a6b1c9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

| Name | Type | | ------------------------------------------ | ----- | | @commercetools-docs/gatsby-theme-api-docs | Minor | | @commercetools-api-specs/test | Minor | | @commercetools-website/api-docs-smoke-test | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

🚚 Build Process Details

Preview URLs:

• https://docskit-tt-display-multiple-scopes-in-two-columns.commercetools.vercel.app (permalink to the last build of this branch)
• https://docskit-sha-a56a475c7ff894ded34fc8bb3821cfc4bbc0c2b9.commercetools.vercel.app (this commit)

[gabriele-ct]

I think @ColinRosati that on mobile viewports we agreed in the ticket to display the scopes in a single column

@zbalek can you confirm this? This is the direct link to the page

[nkuehn]

FYI that was why I was asking for an actual coulumn layout. No need for breakpoints, it automatically puts the number of columns that fit the space and distributes content so that columns are same height.

[ColinRosati]

Thanks for the feedback @nkuehn. I have a mock up of using pure css columns and have some unintended limitations for the colums:

CSS Columns POC

- Column cant controls the content inside the elements, so we don't guarantee a single scope is dedicated to one column and can span across multiple. - We see poor layout for scopes with small amounts. The column align wont kick in until there is column element threshold is met. - Cant control row gap (vertical space between elements). Of course theres other ways to add vertical space to element. This make the scopes less readable I explored some other config adding some additional spacing between text. But this appears to be suboptimal. This is the result of the columns POC:

The solution I propose removes the number of column controlling gap mentioned previously. The behaviour is now: Columns for desktops Mobile single column (comma separated)

[zbalek]

@gabriele-ct - Thanks for attaching the link. Let's not squish it on mobile - we can leave it as one column.

[gabriele-ct]

Mobile view:

Tablet/Desktop view with few elements:

Tablet/Desktop with many elements:

are we ok with this @zbalek

[zbalek]

Ye, looks good - thanks all!