docs: CSS for environment variables table

[mendonk]

Draft build for previewing CSS table control.

Summary by CodeRabbit

• Documentation
  • Improved Markdown table appearance across docs for clearer readability.
  • Made tables responsive with horizontal scrolling on smaller screens while preserving layout.
  • Refined headers, borders, spacing, and alignment for a cleaner, more consistent look.
  • Enhanced inline code styling within table cells for better contrast and legibility.
  • Applied subtle theming and rounded corners to better match the docs’ visual style.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Added a new CSS ruleset to style Markdown tables in documentation, defining layout, borders, spacing, header/body cell styling, code formatting within cells, and horizontal overflow behavior. Inserted after existing DocSearch icon styles in docs/css/custom.css.

Changes

Cohort / File(s)	Summary of edits
Docs Markdown table styling docs/css/custom.css	Inserted comprehensive .markdown table styles: full-width, collapsed borders, rounded corners, themed borders, reduced font/spacing, horizontal scroll (with hidden scrollbar); header cell background/padding/alignment/borders; body cell padding/vertical-align/right border; last-row/border adjustments; monospace code styling within cells.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks (2 passed, 1 warning)

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The current pull request title indicates CSS changes specifically for an environment variables table, but the diff actually introduces comprehensive styling rules for all Markdown tables under .markdown table, making the title misleading about the scope of the changes.	Please update the title to concisely describe the primary change—such as “docs: add CSS styling for Markdown tables”—so it accurately reflects the addition of broad table styling rather than a single environment variables table.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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
• Commit unit tests in branch docs-env-vars-cleanup

---

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.}

[kurtenj]

@mendonk I cleaned up the markdown table styling a bit, reducing the font size overall and removing some of the duplicated borders.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

docs/css/custom.css (4)

485-496: Use horizontal scrolling only; current overflow triggers vertical scrollbars and inconsistent hiding.

Prefer overflow-x: auto; overflow-y: hidden; and add cross‑browser scrollbar hiding only if necessary.

 .markdown table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: collapse;
   border-radius: var(--ifm-global-radius);
   border: var(--ifm-table-border-width) solid var(--ifm-table-border-color);
-  font-size: .8rem;
+  font-size: .875rem; /* improves readability/AA */
   margin: 1.5rem 0;
-  overflow: scroll;
-  scrollbar-width: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none; /* Firefox */
 }

If you still want hidden scrollbars, add:

/* Optional: WebKit scrollbar hiding */
.markdown table::-webkit-scrollbar { display: none; }

Please verify keyboard/trackpad horizontal scroll works on macOS Safari and Windows/Firefox.

---

487-491: Border radius won’t render with border-collapse: collapse.

Rounded corners on collapsed tables are ignored in many browsers. Either switch to separate or round corner cells.

-.markdown table {
-  border-collapse: collapse;
+.markdown table {
+  border-collapse: separate;
+  border-spacing: 0; /* preserve tight grid */

Alternatively (no collapse changes), round corners on the outer cells:

.markdown table thead th:first-child { border-top-left-radius: var(--ifm-global-radius); }
.markdown table thead th:last-child  { border-top-right-radius: var(--ifm-global-radius); }
.markdown table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--ifm-global-radius); }
.markdown table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--ifm-global-radius); }

---

533-538: Improve long-token handling inside code cells.

Env var names/values can overflow. Allow soft wrapping in code blocks within tables.

 .markdown table code {
   background-color: var(--ifm-color-emphasis-100);
   border-radius: 4px;
   padding: 0.2rem 0.4rem;
   font-family: var(--ifm-font-family-monospace);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }

---

480-483: Invalid CSS property on DocSearch icon.

size: 16px is not a valid CSS property; use width/height (or font-size depending on the icon).

 .DocSearch-Search-Icon {
   color: var(--ifm-color-emphasis-500) !important;
-  size: 16px !important;
+  width: 16px !important;
+  height: 16px !important;
 }

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4144d76 and 8aeaf47.

📒 Files selected for processing (1)

• docs/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). (1)

• GitHub Check: build-and-deploy

[coderabbitai]

🛠️ Refactor suggestion

Fix header last-cell border reset (use border-right only).

border: none wipes out the bottom border too; you likely intended to remove only the right divider.

-.markdown table thead th:last-child {
-  border: none;
-}
+.markdown table thead th:last-child {
+  border-right: none;
+}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	.markdown table thead th:last-child {
	border: none;
	}
	.markdown table thead th:last-child {
	border-right: none;
	}

🤖 Prompt for AI Agents

In docs/css/custom.css around lines 512 to 514, the rule .markdown table thead
th:last-child currently uses border: none which removes all borders (including
the bottom border); change it to only reset the right divider by replacing
border: none with border-right: none (or border-right: 0) so the bottom border
remains intact.

[github-actions]

Build successful! ✅
Deploying docs draft.
Deploy successful! View draft