feat(ui): revamp corporate supporters carousel (Infinite Marquee + Dark Mode fix)

[CYBORG-YASHRAJ]

Proposed change
Resolves #3800

This PR completely revamps the Corporate Supporters Carousel to address UI regressions in Dark Mode, normalize logo sizing, and implement a high-performance Infinite Scrolling Marquee as requested by @arkid15r.

🔧 Key Changes
🌙 Dark Mode & UI Visibility (LogoCarousel.tsx)

The Issue: Transparent PNG logos were invisible against the dark background in Dark Mode.

The Fix: Wrapped each logo in a standardized White Card container (bg-white rounded-lg shadow-md).

Optimization: Reduced internal padding from p-5 to px-3 py-1. This maximizes the render area, ensuring wider logos are displayed at a legible size without excessive whitespace.

🔄 Infinite Marquee Animation (tailwind.config.mjs)

Math Fix: Changed translateX(-500%) to translateX(-50%).

Reasoning: We render the logo list exactly twice. Translating by 50% of the total width moves the strip by exactly one full set length, creating a seamless mathematical loop.

UX Improvement: Added group-hover:paused so users can pause the scrolling to click a sponsor link.

Pacing: Adjusted animation duration multiplier (from 2s to 3s per item) for a smoother, less dizzying scroll speed.

📐 Layout & Normalization

Sizing: Switched from absolute positioning (layout="fill") to explicit dimensions (width={168} height={72}) with object-fit: contain. This prevents layout shifts and ensures consistent aspect ratios across all sponsors.

Container: Changed the scroll container from w-full to w-max. This allows the flex container to expand to its natural width (2x the logos), ensuring the animation logic holds true on all screen sizes.

🧪 Tests (LogoCarousel.test.tsx)

Updated all unit tests to match the new DOM structure (checking for .bg-white wrappers instead of relative divs).

Updated duration assertions to match the new 3s multiplier.

Screen.Recording.2026-02-07.232504.mp4

[x] Required: I followed the (https://github.com/OWASP/Nest/blob/main/CONTRIBUTING.md#contributing-workflow)

[x] Required: I verified that my code works as intended and resolves the issue as described

[x] Required: I ran make check-test locally: all warnings addressed, tests passed

[x] I used AI for code, documentation, tests, or communication related to this PR

[coderabbitai]

Summary by CodeRabbit

• Tests

  • Updated LogoCarousel component tests to align with recent animation and styling refinements.

• Improvements

  • Optimized logo carousel animation timing for smoother scrolling performance.
  • Enhanced image fallback handling with visible text display for missing sponsor images.
  • Added pause-on-hover animation control for improved user interactivity.

Walkthrough

Reworks LogoCarousel rendering and animation timing, replaces Next/Image fill usage with explicit width/height and class-based styling, duplicates sponsor tracks with deterministic keys, updates Tailwind marquee keyframes/duration, and adjusts Jest Image mock and unit tests to match the new DOM and timing.

Changes

Cohort / File(s)	Summary
Component Implementation frontend/src/components/LogoCarousel.tsx	Replaced per-sponsor seconds math with a fixed string animationDuration; removed fixed min-width/old container structure; switched Next/Image from fill/style to explicit width/height + className (object-contain); visible fallback text for missing images; duplicated sponsor rendering into two tracks with deterministic logo-carousel-${keyBase}-${keySuffix} keys; added group wrapper and group-hover pause.
Tests & Mocks frontend/__tests__/unit/components/LogoCarousel.test.tsx	Updated Jest mock for next/image signature from (style?, fill?) to (className?, width?, height?) rendering an img; adjusted animation-duration expectations (e.g., 6s→9s, 12s→18s, 200s→300s); switched DOM assertions from min-width-based containers to wrapper classes (bg-white rounded-lg shadow-md) and class-based image checks (h-full w-full object-contain); expect visible "No Image Sponsor" fallback when images absent.
Styling & Animation Config frontend/tailwind.config.mjs	Changed marquee keyframes end translateX from -500% to -50% and increased animation timing (example: 0.5s → 30s), reducing travel distance and slowing the scroll animation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• test: add comprehensive LogoCarousel unit tests #2275: Modifies LogoCarousel unit tests and Next/Image mock behavior — strong overlap with this PR's test/mocking changes.
• fix: prevent LogoCarousel DOM cloning leak #3801: Changes LogoCarousel rendering to duplicate sponsor tracks and adjust animation timing — closely related to this PR's implementation changes.

Suggested reviewers

• arkid15r

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: revamping the corporate supporters carousel with an infinite marquee and dark mode fix.
Description check	✅ Passed	The description provides detailed context for the changes, explains the motivations, and covers the key modifications across all affected files.
Linked Issues check	✅ Passed	The PR directly addresses all coding requirements from issue #3800: dark mode visibility fixed via white card containers, logo sizing normalized through explicit dimensions, and spacing made consistent.
Out of Scope Changes check	✅ Passed	All changes are scoped to the Corporate Supporters Carousel component, its configuration, and tests; no unrelated modifications present.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

frontend/__tests__/unit/components/LogoCarousel.test.tsx (2)

269-275: Test name is misleading — the component no longer uses refs.

The test is titled "uses ref correctly for DOM manipulation" but it only asserts CSS classes on the scroller div. The component no longer manages a ref for DOM duplication; it renders two tracks declaratively. Consider renaming to something like "applies correct classes to scroll container".

---

349-355: Duplicate test — identical to "renders sponsor names correctly in alt attributes".

This test ("renders image alt text correctly") performs exactly the same assertions as the test on lines 341–347. Consider removing one of them.

---

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

[cubic-dev-ai]

No issues found across 3 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/LogoCarousel.tsx`:
- Around line 22-36: The sponsor card in LogoCarousel currently renders an empty
span when both sponsor.imageUrl and sponsor.name are falsy; update the render
logic in the LogoCarousel component (the block using Link, Image and the
fallback span) to detect when both are empty and either (a) render a generic
accessible placeholder label like "Sponsor" inside the span (e.g., fallback text
and an aria-label) or (b) skip rendering the card entirely for that sponsor;
ensure the chosen approach sets visible text or an aria-label so the card is not
blank and remains accessible.

🧹 Nitpick comments (2)

frontend/__tests__/unit/components/LogoCarousel.test.tsx (2)

126-132: Test name is misleading: "renders empty div" → actually renders a fallback text span.

The test body correctly asserts 0 images and 4 links, but the it(...) description says "renders empty div when imageUrl is not provided." The component actually renders <span className="text-sm text-gray-400">{sponsor.name}</span>. Consider updating the description to match:

-    it('renders empty div when imageUrl is not provided', () => {
+    it('renders fallback text when imageUrl is not provided', () => {

---

341-356: Duplicate tests: "renders sponsor names correctly in alt attributes" and "renders image alt text correctly" are identical.

Both tests render the same data and assert the exact same alt text values on the same elements. Consider removing one.

[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

[codecov]

Codecov Report

❌ Patch coverage is 75.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 90.24%. Comparing base (2015442) to head (8f4320a).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
frontend/src/components/LogoCarousel.tsx	75.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3837   +/-   ##
=======================================
  Coverage   90.24%   90.24%           
=======================================
  Files         463      463           
  Lines       14416    14416           
  Branches     1937     1937           
=======================================
  Hits        13009    13009           
  Misses        988      988           
  Partials      419      419           

Flag	Coverage Δ
backend	90.97% <ø> (ø)
frontend	88.17% <75.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
frontend/src/components/LogoCarousel.tsx	85.71% <75.00%> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2015442...8f4320a. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kasya]

@CYBORG-YASHRAJ Thanks for working on this!

The change looks good 👍🏼 I was thinking bout making the dark theme background less contrasting, but some of the sponsor images have white background. So let's keep it this way 👌🏼

One note though, make sure you run make check-test before requesting a review, not just check that off in the PR template. The checks were failing in multiple places.

I fixed those issues and pushed changes.

[CYBORG-YASHRAJ]

@kasya Thanks for the review!
Yeah, I agree—keeping the dark theme as it is makes sense, especially with some sponsor images having white backgrounds.

My bad on the checks earlier—you’re right, I should’ve run make check-test locally before requesting the review instead of just ticking it off in the PR. I’ve fixed the issues and pushed the updated changes.

Thanks for pointing it out and for taking the time to review this 🙏