fix: update scrollbar for code blocks

[carlagn]

Describe this PR

Horizontal scrollbar for code blocks is not currently uniformed in behaviour or appearance.

Changes

Update code component to have a generalised scrollbar look and behaviour, one which is already in place at @prisma/blog as well.

Added wrap prop on codeblock components for cases where we have code blocks that have only one line or we want to wrap the text depending on the context.

⚠️ This should be defined by the docs writers.

i.e. in cases such as this code block, it wouldn't make sense to have the full line scrollable, since it'd just make it harder to read or copy.

For #1015:

prod	fixed

For #1023 We changed the behaviour to always display a scrollbar in case it contains large code inside. As it is now, the user needs to scroll inside to make the scrollbar visible, but it is not 100% obvious it is a codeblock with large content.

prod - no inside scroll	prod - inside scroll	fixed
	https://github.com/prisma/docs/assets/14851246/19c46b0c-b197-4c49-a443-4c6e7b27369e

What issue does this fix?

Fixes #1023 #1015

Any other relevant information

N/a

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 15, 2023 3:40pm

[github-actions]

This PR changes the following pages (Vercel Preview Deploy links):

Changed Vercel links

• /docs/getting-started/setup-prisma/add-to-existing-project/relational-databases/baseline-your-database (currently)
• /docs/concepts/components/prisma-schema/relations/referential-actions/special-rules-for-referential-actions (currently)
• /docs/concepts/components/prisma-schema/relations/relation-mode (currently)
• /docs/concepts/components/prisma-client/raw-database-access (currently)
• /docs/concepts/database-connectors/sql-server/sql-server-docker (currently)
• /docs/guides/migrate/developing-with-prisma-migrate/baselining (currently)
• /docs/guides/migrate/developing-with-prisma-migrate/generating-down-migrations (currently)
• /docs/guides/deployment/deployment-guides/deploying-to-azure-functions (currently)
• /docs/guides/deployment/deployment-guides/deploying-to-heroku (currently)
• /docs/guides/deployment/deployment-guides/deploying-to-koyeb (currently)
• /docs/guides/deployment/deployment-guides/deploying-to-aws-lambda (currently)
• /docs/guides/upgrade-guides/upgrade-from-prisma-1/upgrading-the-prisma-layer (currently)
• /docs/guides/upgrade-guides/upgrade-from-prisma-1/upgrade-from-mongodb-beta (currently)
• /docs/guides/migrate-to-prisma/migrate-from-typeorm (currently)
• /docs/guides/migrate-to-prisma/migrate-from-sequelize (currently)
• /docs/reference/system-requirements (currently)
• /docs/reference/api-reference/command-reference (currently)
• /docs/about/prisma-docs/docs-components/examples (currently)

(Note that links will only be valid after Vercel preview deploy succeeded)

[github-actions]

This PR probably requires the following redirects to be added to vercel.json:

• This PR does not change any pages in a way that would require a redirect.

[nilubava]

@ruheni Could you please review this PR and make sure the comment using wrap property makes sense for doc writers?

[meletj]

@ruheni Could you please review this PR and make sure the comment using wrap property makes sense for doc writers?

@nilubava where will you document this so Docs writers know to use the wrap property?

[meletj]

I believe this would also fix this issue #1446 ie it looks like the wrap option was a request already.

[ruheni]

The wrap property makes sense to have for code snippets. Sharing the update in the #docs and #team-dev-advocacy(reposting) channels would help create visibility. I would also happily mention it in our team sync once this is merged.