feat: improve mobile layout for the showcase submissions

[nikilok]

A few layout improvements for the showcase submissions on Tanstack.com for mobile.
Desktop stays the same as before.

	Before	After
Mobile
Desktop

Summary by CodeRabbit

• Style
  • Enhanced showcase card responsive design with improved badge positioning and layout adaptation. Status badges now display appropriately for both mobile and desktop views, with the screenshot area and card structure restructured to adapt seamlessly across different screen sizes. The layout optimization improves visual hierarchy and user experience on all devices.

[netlify]

✅ Deploy Preview for tanstack ready!

Name	Link
🔨 Latest commit	bf858e4
🔍 Latest deploy log	https://app.netlify.com/projects/tanstack/deploys/69f5cd683ac037000884f01a
😎 Deploy Preview	https://deploy-preview-884--tanstack.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 25 (🔴 down 20 from production) Accessibility: 90 (no change from production) Best Practices: 83 (🔴 down 9 from production) SEO: 97 (no change from production) PWA: 70 (no change from production) View the detailed breakdown and full score reports
🤖 Make changes	Run an agent on this branch

---

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 97c8220d-84fc-46a1-9222-aebe6a0968e8

📥 Commits

Reviewing files that changed from the base of the PR and between 74f1b3b and bf858e4.

📒 Files selected for processing (1)

• src/routes/account/submissions.tsx

---

📝 Walkthrough

Walkthrough

The showcase card UI in the submissions page was updated for responsive design. The screenshot area now uses a vertically stacked layout on mobile that transitions to horizontal on larger screens, with a mobile-only status badge overlay. The status badge in the content header was moved to display only on desktop screens.

Changes

Responsive Showcase Card Layout

Layer / File(s)	Summary
Responsive Flexbox Structure src/routes/account/submissions.tsx (lines 137–151)	Screenshot card container changed from fixed horizontal layout to flex-col sm:flex-row, stacking vertically on mobile and horizontally on larger screens.
Status Badge Repositioning src/routes/account/submissions.tsx (lines 137–151, 164–166)	Mobile status badge added as absolute overlay in screenshot area with sm:hidden, and content header badge updated to hidden sm:block for desktop-only display.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hop and a flex, cards now respire,
Mobile to desktop, layouts climb higher,
Badges dance 'cross the screens so small,
Responsive magic answers the call! ✨

🚥 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 'improve mobile layout for the showcase submissions' accurately reflects the main change—responsive layout improvements for mobile submission cards. It is concise, specific, and clearly communicates the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}