Fix table CSS to span full width in documentation

[Copilot]

Tables in the documentation (e.g., CLI Commands page) were not utilizing the full content area width, appearing cramped and difficult to scan.

Changes

• Added width: 100% and table-layout: fixed to .sl-markdown-content table CSS rules for both dark and light themes in docs/src/styles/custom.css

/* Dark theme */
.sl-markdown-content table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid #30363d;
  /* ... */
}

/* Light theme */
:root[data-theme='light'] .sl-markdown-content table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid #d0d7de;
}

The table-layout: fixed property is essential to ensure tables properly expand to full width. Without it, tables only expand to fit their content, even when width: 100% is specified.

Screenshots

Before:

After:

Tables now properly span the full content width across all documentation pages.

Original prompt

Fix table CSS rendering in https://githubnext.github.io/gh-aw/setup/cli/ . The columns should span the whole width.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[pelikhan]

@copilot the issue is not fixed

[Copilot]

@copilot the issue is not fixed

Fixed in commit 72cfab7. The issue was that width: 100% alone wasn't sufficient - tables also need table-layout: fixed to properly expand to full width.

Screenshot showing the fix:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro build (dns block)
  • Triggering command: node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro preview --port 8080 --host 0.0.0.0 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[Copilot]

Pull Request Overview

This PR fixes table rendering in the documentation by adding CSS rules to make tables span the full content width. The primary change adds width: 100% and table-layout: fixed properties to table elements in both dark and light themes.

Key Changes:

• Added width: 100% and table-layout: fixed to .sl-markdown-content table CSS rules for both dark and light themes
• Package-lock.json was updated with peer dependency metadata (appears unrelated to the CSS fix)

Reviewed Changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated 2 comments.

File	Description
docs/src/styles/custom.css	Added width: 100% and table-layout: fixed to table CSS rules in both dark theme (lines 558-559) and light theme (lines 202-203) to make tables span full content width
docs/package-lock.json	Updated several dependencies with "peer": true metadata - appears to be an incidental change from npm version differences rather than intentional updates related to the table CSS fix

Files not reviewed (1)

• docs/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

[nitpick] The changes to package-lock.json appear to be unrelated to the CSS table width fix. Several dependencies have been marked with "peer": true (lines 130, 1823, 1984, 5116, 5628, 6476, 6675), which typically happens when running npm install with a different npm version that better detects peer dependencies.

These changes include packages like @astrojs/starlight, acorn, astro, postcss, rollup, vite, and zod being marked as peer dependencies. While these changes are likely harmless (npm is just better documenting the dependency tree), they should ideally be separated into their own commit or PR since they're not related to the CSS fix.

Consider:

1. Reverting these package-lock.json changes if they weren't intentional
2. Or, if keeping them, mention them in the PR description as "Updated package-lock.json to reflect peer dependencies more accurately"

Suggested change

"peer": true,

[Copilot]

[nitpick] The table-layout: fixed property has important implications for table rendering that should be considered:

Benefits:

• Forces tables to use the specified width (100% in this case)
• Makes column widths more predictable
• Can improve rendering performance

Potential issues:

• Content that doesn't fit within the calculated column width will overflow or be cut off
• All columns will have equal width by default (unless explicit widths are set on individual columns)
• Long words or URLs without spaces may cause overflow issues

Consider testing this change with:

1. Tables containing long URLs or code snippets
2. Tables with varying content lengths across columns
3. Mobile/narrow viewport widths

If content overflow becomes an issue, you may need to add:

.sl-markdown-content td,
.sl-markdown-content th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}