[piyushtripathi9424]

Description

This PR fixes #8168

On medium viewport widths (between ~600px and 1200px), the headline in the CaseStudyBanner collided with the diagonal "CASE STUDY" ribbon in the top-right corner.

This PR adds responsive horizontal padding to .desc h2, ensuring the text wraps cleanly with ample breathing room away from the ribbon while maintaining optical centering.

Notes for Reviewers

Screenshots

Before	After

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Style
  • Improved spacing in the case study banner description heading.
  • Added responsive horizontal padding adjustments for screens up to 800px.

[coderabbitai]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 477279b5-6b96-45ab-ba52-8feb9906845c

Commits

Reviewing files that changed from the base of the PR and between a14e0c1 and 1412b79.

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

Use the checkbox below for a quick retry:

• Trigger review

No actionable comments were generated in the recent review.

Walkthrough

The CaseStudyBanner heading now has horizontal padding. At viewport widths up to 800px, it uses a smaller padding value.

Changes: Case study banner spacing

Layer / File(s)	Summary
Set responsive heading padding src/components/Case-study-banner/index.js	The heading receives 0 3.5rem 0 1.5rem padding by default and 0 2.5rem 0 1rem at widths up to 800px.

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

Change: Bug fix · Severity of issue fixed: Medium

Suggested reviewers: tejaswiverma121-byte

Merge Risk: Minimal · previous review 2e979

No merge-blocking issue was established for the responsive banner spacing change.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly describes the main change: preventing text overlap with the ribbon on medium viewports in CaseStudyBanner.
Linked Issues check		Issue #8168 requires the CaseStudyBanner heading to clear the absolute-positioned ribbon before the 600px stacking breakpoint. The reviewed change adds right padding to .desc h2 at the default siz…
Out of Scope Changes check		The pull request changes only the .desc h2 padding declarations in src/components/Case-study-banner/index.js. These declarations directly implement the spacing fix for issue #8168. No unrelated be…
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

Full details: Linked Issues check

Explanation

Issue #8168 requires the CaseStudyBanner heading to clear the absolute-positioned ribbon before the 600px stacking breakpoint. The reviewed change adds right padding to .desc h2 at the default size and at widths up to 800px. The large layout is hidden at widths up to 600px, so the change covers the applicable medium-width layout. No separate automated-test requirement appears in the issue.

Full details: Out of Scope Changes check

Explanation

The pull request changes only the .desc h2 padding declarations in src/components/Case-study-banner/index.js. These declarations directly implement the spacing fix for issue #8168. No unrelated behavior or files are changed.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: bd9272a8-1feb-4ead-b3eb-04fdcea31d32

📥 Commits

Reviewing files that changed from the base of the PR and between 5e27792 and 2e979e2.

📒 Files selected for processing: 1

• src/components/Case-study-banner/index.js

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

[tejaswiverma121-byte]

I’d normally question in CSS fixes are:

Does this break alignment on very wide screens?
Does it create overflow or awkward wrapping on some viewports?
Does the fix only cover the intended range?

[piyushtripathi9424]

I’d normally question in CSS fixes are:

Does this break alignment on very wide screens? Does it create overflow or awkward wrapping on some viewports? Does the fix only cover the intended range?

Hi @tejaswiverma121-byte, thanks for the review!

1. Does this break alignment on very wide screens?
   No. The text remains centered within the skewed parallelogram without any misalignment on wide screens (1200px+).

2. Does it create overflow or awkward wrapping on some viewports?
   No. It was tested from 650px to 1200px. Text wraps cleanly across two balanced lines with zero horizontal or vertical overflow.

3. Does the fix only cover the intended range?
   Yes. It only affects the medium range (~600px–1200px) where the ribbon collision occurs. Below 600px, the component switches to the stacked mobile view (.small-screen), which remains unaffected.

[github-actions]

Preview deployment for PR #8220 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[Katotodan]

LGTM