fix: make tab items scrollable on mobile to avoid overflow

[GeorgiosDrivas]

On tablet and smaller screen sizes, the tabs are going off the screen.

Link
https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/no-rust-engine

Problem

Solution
Targeted both tabs with a css class in a pre-existing media query, and added an overflow-x attribute with value of scroll

Summary by CodeRabbit

• New Features

  • Enables horizontal scrolling for the tab navigation on smaller viewports (≤1191px), making wide tab lists accessible without wrapping.

• Style

  • Introduces responsive CSS that applies overflow-x: scroll to the tabs list under narrow widths.
  • Scrollbar is consistently shown when the rule applies.
  • No visual changes on wider viewports; existing styles remain unchanged.

[coderabbitai]

Walkthrough

Adds a responsive CSS rule to enable horizontal scrolling on the tab list within a max-width: 1191px media query by setting overflow-x: scroll on .tabs-container ul.tabs. No other files or styles are changed.

Changes

Cohort / File(s)	Summary
Responsive tabs overflow src/css/custom.css	Within max-width: 1191px, adds .tabs-container ul.tabs { overflow-x: scroll; } to allow horizontal scrolling of tab lists on narrow viewports; no other modifications.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested reviewers

• Techboidesign
• nikolasburk
• nurul3101
• mhessdev

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly and concisely summarizes the primary change in the PR: making tab items scrollable on mobile to prevent overflow, which matches the CSS change adding overflow-x: scroll inside the mobile media query. It is specific, relevant to the changeset, and readable for a teammate scanning history.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/css/custom.css (1)

681-683: Prefer overflow-x: auto + mobile momentum; hide vertical overflow.

This avoids always-visible scrollbars and improves iOS/Android touch scroll.

-  .tabs-container ul.tabs{
-    overflow-x: scroll;
-  }
+  .tabs-container ul.tabs {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-gutter: stable both-edges;
+  }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 834e223 and 02e230c.

📒 Files selected for processing (1)

• src/css/custom.css (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: runner / linkspector
• GitHub Check: Check internal links

🔇 Additional comments (1)

src/css/custom.css (1)

681-683: Confirm selector matches rendered markup; broaden to Docusaurus defaults.

Automated search returned "No files were searched" — verification couldn't complete. Confirm src/css/custom.css (lines 681–683) targets the actual tab markup (ul.tabs / .tabs__list / [role="tablist"]); if not, apply the diff below.

-  .tabs-container ul.tabs {
+  .tabs-container ul.tabs,
+  .tabs-container .tabs__list,
+  .tabs-container [role="tablist"] {
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     scrollbar-gutter: stable both-edges;
+    display: flex;
+    flex-wrap: nowrap;
   }
+  .tabs-container .tabs__list > * {
+    flex: 0 0 auto;
   }

Verify with:

git grep -nE 'tabs__list|ul\.tabs|role="tablist"' || rg -n -uu -S 'tabs__list|ul\.tabs|role="tablist"'