feat(marketing): make hero section mobile responsive by Kitenite · Pull Request #937 · superset-sh/superset

Kitenite · 2026-01-25T00:54:40Z

Summary

Add horizontal scroll for AppMockup on mobile with min-width constraint
Remove right padding on mobile so content touches screen edge
Update SelectorPill to support tap events and smaller text on mobile
Adjust HeroSection spacing, padding, and text sizes for mobile
Add scrollbar-hide utility for clean horizontal scroll
Prevent layout shift during typewriter animation with invisible placeholder

Test plan

Test hero section on mobile devices (iPhone, Android)
Verify horizontal scroll works smoothly on the app mockup
Check typewriter animation doesn't cause layout shift
Verify selector pills are tappable on mobile

Summary by CodeRabbit

New Features
- Video now loads on demand with a clickable thumbnail and autoplay when played.
- Horizontal scrolling enabled for product demo and selector pills on mobile.
Enhancements
- Refined hero layout, spacing, and responsive paddings; improved heading layering for accessibility.
- Added GitHub icon to CTA and adjusted button spacings.
- App mockup constrained to avoid undersized rendering on narrow viewports.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

- Add horizontal scroll for AppMockup on mobile with min-width constraint - Remove right padding on mobile so content touches screen edge - Update SelectorPill to support tap events and smaller text on mobile - Adjust HeroSection spacing, padding, and text sizes for mobile - Add scrollbar-hide utility for clean horizontal scroll - Use 100svh for better mobile viewport handling

Use invisible placeholder to reserve exact space for heading text

coderabbitai · 2026-01-25T00:54:58Z

Warning

Rate limit exceeded

@Kitenite has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 5 minutes and 10 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

This PR adjusts the marketing hero UI: switching to svh units, refining responsive padding/gaps, layering a typewriter heading for accessibility, adding horizontal scrolling on mobile, renaming SelectorPill interaction from onHover to onSelect, introducing scrollbar-hide, and lazy-loading a YouTube demo on play.

Changes

Cohort / File(s)	Summary
HeroSection Core `apps/marketing/src/app/components/HeroSection/HeroSection.tsx`	Changed container height to `min-h-[calc(100svh-64px)]`; adjusted responsive padding/gaps; layered TypewriterText over an invisible span for accessibility; modified heading/button spacing and added `FaGithub` to the GitHub button.
ProductDemo & SelectorPill `apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx`, `apps/marketing/src/app/components/HeroSection/components/ProductDemo/components/SelectorPill/SelectorPill.tsx`	ProductDemo: reworked padding/gaps, added horizontal scrolling wrappers (`overflow-x-auto`, `scrollbar-hide`) for app mockup and selector pills. SelectorPill: public prop renamed `onHover` → `onSelect`; `onMouseEnter` and `onClick` call `onSelect`; reduced font/padding and added `shrink-0`.
AppMockup Layout `apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx`	Added `min-w-[600px]` to outer motion container to prevent shrinking below 600px.
VideoSection `apps/marketing/src/app/components/VideoSection/VideoSection.tsx`	Added local `isPlaying` state and `VIDEO_ID`; render thumbnail with play overlay when idle and lazy-load autoplaying YouTube iframe when played.
Global Styles `apps/marketing/src/app/globals.css`	New `@utility scrollbar-hide` to hide scrollbars across browsers (IE, Firefox, WebKit).

Sequence Diagram(s)

(Skipped — changes are primarily UI/layout and small interaction updates; no multi-component control flow diagram generated.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

feat(marketing): add interactive hero mockup with animated demo states #910: Modifies the same HeroSection demo stack (AppMockup, ProductDemo, SelectorPill) and introduced hover-driven demo wiring that this PR alters.
feat(marketing): add Features and FAQ sections to homepage #472: Edits to the HeroSection component overlap with responsive/layout changes in this PR.
update website hero #459: Changes ProductDemo and SelectorPill behavior and code paths, relating directly to the onHover→onSelect API change.

Poem

🐰 I twitched my whiskers at svh so new,

I hopped on pills that click (not just view),
I hid the scrollbars, snug and sly,
A play button woke the video sky,
Hooray—this hero sings, fresh and true! 🥕

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The PR description provides a summary of changes and test plan, but lacks required template sections like Related Issues and Type of Change.	Complete the description template by filling in Related Issues, Type of Change (mark applicable checkboxes), Testing details, and Additional Notes sections for clarity.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main objective of the changeset: making the hero section mobile responsive with adjustments to layout, spacing, and components.

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

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 and usage tips.}

github-actions · 2026-01-25T01:00:16Z

🚀 Preview Deployment

🔗 Preview Links

Service	Status	Link
Database (Neon)	✅	View Branch
Electric (Fly.io)	✅	View App
API (Vercel)	✅	Open Preview
Web (Vercel)	✅	Open Preview
Marketing (Vercel)	✅	Open Preview
Admin (Vercel)	✅	Open Preview
Docs (Vercel)	✅	Open Preview

Preview updates automatically with new commits

Replace direct YouTube embed with a facade pattern that shows a custom thumbnail and play button, only loading the iframe when clicked.

- Make play button frosted glass with backdrop blur - Only show dark overlay on hover - Use CSS triangle for sharp play icon

Kitenite added 2 commits January 24, 2026 16:51

fix(marketing): prevent layout shift during typewriter animation

6d9317e

Use invisible placeholder to reserve exact space for heading text

Kitenite temporarily deployed to preview January 25, 2026 00:55 — with GitHub Actions Inactive

Kitenite added 2 commits January 24, 2026 17:08

feat(marketing): add video facade with custom thumbnail

fb62065

Replace direct YouTube embed with a facade pattern that shows a custom thumbnail and play button, only loading the iframe when clicked.

style(marketing): use glassy play button with hover overlay

7fa874c

- Make play button frosted glass with backdrop blur - Only show dark overlay on hover - Use CSS triangle for sharp play icon

Kitenite had a problem deploying to preview January 25, 2026 01:14 — with GitHub Actions Error

chore(marketing): update video thumbnail

ed32399

Kitenite temporarily deployed to preview January 25, 2026 01:15 — with GitHub Actions Inactive

Kitenite had a problem deploying to preview January 25, 2026 01:15 — with GitHub Actions Error

Video

f52b7b1

Kitenite merged commit 7b612ea into main Jan 25, 2026
5 checks passed

Kitenite deleted the fix-website-mobile branch January 25, 2026 01:19

Kitenite temporarily deployed to preview January 25, 2026 01:20 — with GitHub Actions Inactive

This was referenced Jan 26, 2026

fix(marketing): update video section to new YouTube video #973

Merged

fix(marketing): reduce CLS on mobile landing page #1053

Merged

coderabbitai Bot mentioned this pull request Feb 8, 2026

feat(marketing): use Geist Pixel font for hero headline #1298

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(marketing): make hero section mobile responsive#937

feat(marketing): make hero section mobile responsive#937
Kitenite merged 6 commits intomainfrom
fix-website-mobile

Kitenite commented Jan 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jan 25, 2026 •

edited

Loading

Rate limit exceeded

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

github-actions Bot commented Jan 25, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Kitenite commented Jan 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

github-actions Bot commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Preview Deployment

🔗 Preview Links

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Kitenite commented Jan 25, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jan 25, 2026 •

edited

Loading

github-actions Bot commented Jan 25, 2026 •

edited

Loading