Skip to content

fix(website): make giscus comments full width - #1543

Merged
tomalaforge merged 1 commit into
mainfrom
tomalaforge/giscus-full-width-fix
Aug 27, 2026
Merged

fix(website): make giscus comments full width#1543
tomalaforge merged 1 commit into
mainfrom
tomalaforge/giscus-full-width-fix

Conversation

@tomalaforge

@tomalaforge tomalaforge commented Aug 27, 2026

Copy link
Copy Markdown
Owner

✅ Challenge Submission Checklist

Start your PR title with: Answer:${challenge_number}

⚠️ Important Notice

If you would like personal feedback or a detailed review, please support the project on GitHub:

You can also submit a PR without sponsorship to:

  • Be listed among the answered challenges, or
  • Receive a review from a community member. 🔥

The giscus script hard-codes width: 300px on the .giscus wrapper div and .giscus-frame iframe it injects into the DOM. Added two CSS overrides in styles.css to set width: 100% on both elements so the comment section spans the full content width.

Summary by CodeRabbit

  • Bug Fixes
    • Giscus comment sections now expand to the full available width instead of being limited to 300 pixels.

Override the 300px width the giscus script injects on .giscus and
.giscus-frame so the comment section spans the full content area.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tomalaforge
tomalaforge merged commit f39ee97 into main Aug 27, 2026
3 of 7 checks passed
@coderabbitai

coderabbitai Bot commented Aug 27, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c8ffd8a5-11a0-4e69-a64c-54b403e7a0e5

📥 Commits

Reviewing files that changed from the base of the PR and between fb098eb and c4962e8.

📒 Files selected for processing (1)
  • website/src/styles.css

📝 Walkthrough

Walkthrough

The stylesheet adds a full-width rule for the Giscus container and iframe. The rule overrides the embed script’s fixed 300px width.

Changes

Giscus layout

Layer / File(s) Summary
Full-width Giscus override
website/src/styles.css
The .giscus and .giscus-frame elements now use width: 100% !important.

Estimated code review effort: 1 (Trivial) | ~2 minutes

✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch tomalaforge/giscus-full-width-fix

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant