fix: balance EventLanding hero on wide screens by Anshumancanrock · Pull Request #751 · Project-HAMi/website

Anshumancanrock · 2026-08-10T06:26:47Z

What type of PR is this?

/kind bug

What this PR does / why we need it:

Event landing pages capped the description at 720px, so wide screens had a big empty gap on the right. Moved date/location/time into a side card next to the description so the layout fills naturally.

Which issue(s) this PR fixes:

Fixes #749

Before:

Description stuck at 720px max-width, empty space on the right on widescreen.

After:

Description + links on the left, event details card (date / location / time / room) on the right; stacks on smaller screens.

Checklist:

npm run lint and npm run format:check pass
npm run build succeeds for both en and zh
Chinese translation updated if English docs changed (or noted why not)
Commits are signed off (git commit -s)

Summary by CodeRabbit

Style
- Reorganized event hero content into a clearer two-column layout.
- Added an accessible details card for event date, location, time, room, and links.
- Improved spacing, alignment, icon sizing, and metadata presentation.
- Added responsive behavior for smaller screens, including a single-column layout and reordered content.

hami-robot · 2026-08-10T06:26:53Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Anshumancanrock
Once this PR has been reviewed and has the lgtm label, please assign windsonsea for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

netlify · 2026-08-10T06:26:55Z

✅ Deploy Preview for project-hami ready!

Name	Link
🔨 Latest commit	`f708f60`
🔍 Latest deploy log	https://app.netlify.com/projects/project-hami/deploys/6a875f37cc241f0009844831
😎 Deploy Preview	https://deploy-preview-751--project-hami.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai · 2026-08-10T06:27:36Z

Warning

Review limit reached

@Anshumancanrock, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 19 minutes

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

Wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: c390cff8-0e68-4ac8-ae35-cb67987b093f

📥 Commits

Reviewing files that changed from the base of the PR and between efa8b23 and f708f60.

📒 Files selected for processing (2)

src/components/EventLanding.js
src/components/EventLanding.module.css

📝 Walkthrough

Walkthrough

The event hero now separates description and links from event metadata. The metadata appears in an accessible details card. CSS adds a two-column layout, sticky details, updated spacing, and responsive single-column behavior.

Changes

Event hero layout

Layer / File(s)	Summary
Hero structure and metadata `src/components/EventLanding.js`	The component groups description and links in `heroMain` and places event metadata in an accessible `heroAside` card.
Hero layout and responsive behavior `src/components/EventLanding.module.css`	The stylesheet adds the two-column grid, sticky details card, metadata spacing, updated link spacing, and a responsive single-column layout below 996px.

Estimated code review effort: 3 (Moderate) | ~15–30 minutes

Possibly related PRs

Project-HAMi/website#642: Refactors the same EventLanding component and CSS.
Project-HAMi/website#649: Modifies the same hero links and event metadata styling.
Project-HAMi/website#740: Introduces related event metadata fields.

Suggested reviewers: fishman

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

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.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: balancing the EventLanding hero layout on wide screens.
Linked Issues check	✅ Passed	The two-column hero layout addresses issue `#749` by using the empty right-side space for event metadata and stacking on smaller screens.
Out of Scope Changes check	✅ Passed	The code changes remain within the linked issue scope and only modify the EventLanding structure and responsive styling.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

Signed-off-by: anshumancanrock <anshu.1239.as@gmail.com>

Anshumancanrock · 2026-08-10T06:42:57Z

Hi @fishman, could you please take a look at this PR when you have time? Thanks!

mesutoezdil

clean pr: single signed commit, ci green, before and after screenshots. two small things inline.

mesutoezdil · 2026-08-20T16:08:19Z

+
+.detailsCard {
+  padding: var(--hami-space-24);
+  position: sticky;


sticky does nothing here. align-items start collapses heroAside to the card height, so the card has no room to stick. move sticky to heroAside or drop it.

Good catch. Moved sticky to .heroAside so it actually has room to stick. thanks!

mesutoezdil · 2026-08-20T16:08:19Z

              </div>
-            )}
+              <aside className={styles.heroAside} aria-label={isZh ? "活动信息" : "Event details"}>
+                <div className={`hami-section-card ${styles.detailsCard}`}>


hami-section-card has a hover lift in custom.css. on a static info card that reads as clickable. fine if intended, worth a look.

yeah, not intended. Dropped hami-section-card on the details card so it doesn’t look clickable.

Signed-off-by: anshumancanrock <anshu.1239.as@gmail.com>

mesutoezdil · 2026-09-02T14:47:07Z

Closing this for now: #834 addresses the same EventLanding banner sizing issue.

If I misread the intent of this change, please say so here and I will reopen it.

hami-robot Bot added kind/bug Something isn't working dco-signoff: yes labels Aug 10, 2026

hami-robot Bot requested review from mesutoezdil and wawa0210 August 10, 2026 06:26

hami-robot Bot added the size/L label Aug 10, 2026

github-actions Bot added the area/ui label Aug 10, 2026

fix(landing): balance EventLanding hero on wide screens

61bf5fd

Signed-off-by: anshumancanrock <anshu.1239.as@gmail.com>

coderabbitai Bot mentioned this pull request Aug 10, 2026

[UI] Fix KCD Vietnam event banner image sizing and cropping #746

Open

mesutoezdil reviewed Aug 20, 2026

View reviewed changes

mesutoezdil mentioned this pull request Aug 20, 2026

fix: center and properly size event banners regardless of aspect ratio (#746) #752

Closed

4 tasks

fix(landing): address EventLanding review feedback

f708f60

Signed-off-by: anshumancanrock <anshu.1239.as@gmail.com>

Anshumancanrock force-pushed the fix/event-landing-layout branch from efa8b23 to f708f60 Compare August 20, 2026 20:10

Anshumancanrock requested a review from mesutoezdil August 20, 2026 20:14

mesutoezdil closed this Sep 2, 2026

Navigation Menu

Uh oh!

fix: balance EventLanding hero on wide screens - #751

fix: balance EventLanding hero on wide screens#751
Anshumancanrock wants to merge 2 commits into
Project-HAMi:masterfrom
Anshumancanrock:fix/event-landing-layout

Anshumancanrock commented Aug 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

hami-robot Bot commented Aug 10, 2026

Uh oh!

netlify Bot commented Aug 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading

Review limit reached

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

Anshumancanrock commented Aug 10, 2026

Uh oh!

mesutoezdil left a comment

Uh oh!

mesutoezdil Aug 20, 2026

Uh oh!

Anshumancanrock Aug 20, 2026

Uh oh!

mesutoezdil Aug 20, 2026

Uh oh!

Anshumancanrock Aug 20, 2026

Uh oh!

mesutoezdil commented Sep 2, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Anshumancanrock commented Aug 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

hami-robot Bot commented Aug 10, 2026

Uh oh!

netlify Bot commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for project-hami ready!

Uh oh!

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

Uh oh!

Review limit reached

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

Anshumancanrock commented Aug 10, 2026

Uh oh!

mesutoezdil left a comment

Choose a reason for hiding this comment

Uh oh!

mesutoezdil Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

Anshumancanrock Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

mesutoezdil Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

Anshumancanrock Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

mesutoezdil commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Anshumancanrock commented Aug 10, 2026 •

edited by coderabbitai Bot

Loading

netlify Bot commented Aug 10, 2026 •

edited

Loading

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading

mesutoezdil commented Sep 2, 2026 •

edited

Loading