A collection of website polishing

[josh-padnick]

This makes a collection of small polish improvements to the Terragrunt website. I have not QA'd this on mobile yet, though I wouldn't expect any of these changes to negatively affect mobile since I'd used rem for most changes (which will scale with default font size).

The changes include:

1. Tighten up the sidebar spacing
2. Standardize the CSS ordering so that dev and prod render the same (previously, there was a large margin to the left of the body text in dev, but not prod)
3. Improve main body formatting

Summary by CodeRabbit

• Style
  • Refined sidebar layout: adjusted spacing, margins, and link font sizing for clearer navigation.
  • Updated main content styling: improved paragraph line-height, margins, and code font size; standardized container margins.
  • Harmonized component styling via reorganized CSS layers, ensuring consistent appearance across buttons, lists, contact form, and search.
  • Minor padding tweaks for tighter sidebar list items.

[coderabbitai]

📝 Walkthrough

Walkthrough

Reorganizes CSS layers in docs-starlight global stylesheet, updates import layering for component styles, adjusts sidebar structure and spacing selectors, adds main pane typography/layout rules, and removes specific sidebar list item padding.

Changes

Cohort / File(s)	Summary
CSS layering structure docs-starlight/src/styles/global.css	Split public starlight layer into sublayers: starlight.base, starlight.reset, starlight.core, starlight.content, starlight.components, starlight.utils; retained theme/components/utilities layers.
Explicit component import layering docs-starlight/src/styles/global.css	Imports for buttons.css, contactform.css, lists.css, starlight-search.css now use layer(components).
Sidebar layout and spacing docs-starlight/src/styles/global.css	Replaced prior details/summary rule with multiple targeted selectors for ul/li/a font-size, details/summary margins/padding, nested details spacing; removed li top/bottom padding.
Main pane styling docs-starlight/src/styles/global.css	Added rules for .main-pane container margins, paragraph line-height/margins, starlight-file-tree spacing, and code font size.

Sequence Diagram(s)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Search polish #4755 — Touches starlight-search.css and global.css, overlapping with import layering and global style structure.
• Cleanup and organization #4753 — Modifies docs-starlight/global.css and component style imports similar to this reorganization.

Suggested reviewers

• denis256
• wakeful
• yhakbar

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refine-website

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
terragrunt-docs	Ready	Preview	Comment	Sep 4, 2025 2:59am

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (4)

docs-starlight/src/styles/global.css (4)

291-293: Simplify font-size; prefer tokens/utilities for consistency.

calc(16 / 16 * 1rem) is 1rem. Consider a simpler value or a design token.

Apply:

-#starlight__sidebar ul li a {
-  font-size: calc(16 / 16 * 1rem);
-}
+#starlight__sidebar ul li a {
+  font-size: 1rem; /* or var(--sl-text-sm) if desired */
+}

---

295-298: Sidebar details/summary spacing: add focus-visible to preserve keyboard a11y.

Padding/margins look fine; add a clear focus style to maintain accessibility after spacing tweaks.

 #starlight__sidebar summary {
   margin-top: 5px;
   padding-left: 0;
 }
+#starlight__sidebar summary:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}

Also applies to: 300-303

---

305-308: Depth-coupled selectors are brittle; reduce specificity with :is/:where.

Hard-coding three-level details depth may break with structure changes. Prefer structural targeting that’s less fragile.

-#starlight__sidebar details details details {
-  margin-bottom: 0;
-}
-#starlight__sidebar details details details summary {
-  margin-top: 0;
-  padding: 0.3em var(--sl-sidebar-item-padding-inline);
-}
+#starlight__sidebar :is(details details details) {
+  margin-bottom: 0;
+}
+#starlight__sidebar :is(details details details) > summary {
+  margin-top: 0;
+  padding: 0.3em var(--sl-sidebar-item-padding-inline);
+}

If you want even lower specificity, wrap with :where(...) instead of :is(...).

Also applies to: 309-313

---

322-340: Main pane tweaks: tighten scope of .code and guard small-screen gutters.

• .code is generic and may collide with other components. Scope to elements in markdown content.
• Removing container inline margins can push text to screen edges on narrow viewports.

 .main-pane .sl-container {
-  margin-inline: 0;
+  margin-inline: 0;
+  padding-inline: clamp(1rem, 4vw, 2rem); /* keep gutters on small screens */
 }
 
-.main-pane .code {
-  font-size: calc(14 / 16 * 1rem);
-}
+.main-pane :where(pre, code) {
+  font-size: 0.875rem; /* 14px */
+}

Please confirm .main-pane is consistently applied to doc pages. You can grep templates/layouts for class="main-pane" to ensure styling attaches everywhere intended.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between d40ca2b and 9be6f92.

📒 Files selected for processing (1)

• docs-starlight/src/styles/global.css (3 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-08-27T18:40:35.247Z

Learnt from: karlcarstensen
PR: gruntwork-io/terragrunt#4753
File: docs-starlight/src/components/dv-Hero.astro:36-37
Timestamp: 2025-08-27T18:40:35.247Z
Learning: Projects using tailwindcss/vite with Tailwind CSS v4 and astrojs/starlight-tailwind integration automatically have access to extended utility classes including line-height utilities.

Applied to files:

• docs-starlight/src/styles/global.css

🔇 Additional comments (2)

docs-starlight/src/styles/global.css (2)

1-1: Good call: explicit cascade layer order to stabilize dev vs prod.

This should fix ordering drift. One thing to verify: is Tailwind Preflight/base included elsewhere (via the Starlight Tailwind integration)? If not, consider importing tailwindcss/base.css into an appropriate early layer to avoid browser-default inconsistencies.

Run a quick check that Preflight is present in the built CSS (dev and prod) and that no duplicate resets are applied.

---

6-8: Imports into layer(components) look right.

Scoping these CSS files to the components layer reduces cascade surprises and should keep parity between environments.

Also applies to: 11-11

[karlcarstensen]

I've not seen this before - why is it done this way vs. just setting it to 1rem?

[josh-padnick]

I prefer to think in px, but it’s important to use rem whenever we want the thing to scale as the user increases their default font size. So by using calc(14 / 16 * 1rem) I can say “make this font-size 14px, but express it in rem.”

But admittedly 16 / 16 is a bit strange.

[josh-padnick]

FYI, I do just want to acknowledge that I didn't do sufficient QA testing for mobile here. I'll tackle that shortly in a separate PR.