fix: show static.webp fallback for mobile features carousel

[ComputelessComputer]

Summary

Fixed an issue where the static gif/webp fallback was not showing for features without images in the mobile view of the features section.

The FeaturesDesktopGrid component already had a fallback to display /api/images/hyprnote/static.webp when a feature doesn't have an image (e.g., "Coming Soon" features like Floating Panel and Daily Note). However, FeaturesMobileCarousel was only conditionally rendering when feature.image existed, leaving an empty container for features without images.

This change adds the same fallback pattern to the mobile carousel, making it consistent with the desktop grid behavior.

Review & Testing Checklist for Human

• Verify the static.webp displays correctly on mobile viewport for "Floating Panel" and "Daily Note" features (the Coming Soon items)
• Confirm the object-cover styling looks appropriate on mobile screens

Notes

• Link to Devin run: https://app.devin.ai/sessions/c100534211794c7aab7689bdcdcb4d40
• Requested by: john@hyprnote.com (@ComputelessComputer)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	e1e52b5
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/692d5856c39aba000835368f
😎 Deploy Preview	https://deploy-preview-2046--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	e1e52b5
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/692d5856ce047400072921dd
😎 Deploy Preview	https://deploy-preview-2046--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[coderabbitai]

📝 Walkthrough

Walkthrough

The FeaturesMobileCarousel component's image rendering is updated to handle missing images via a fallback. When feature.image exists, it renders as before; otherwise, it renders a fallback img element pointing to a static image with object-fit: cover instead of the previous object-contain.

Changes

Cohort / File(s)	Summary
Image fallback rendering apps/web/src/routes/_view/index.tsx	Updated conditional rendering to provide fallback img element when feature.image is unavailable; changed object-fit from object-contain to object-cover

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify the fallback image path is correct and accessible
• Confirm object-fit: cover styling is intentional and doesn't break layout in edge cases
• Check if this fallback applies to all feature carousel instances as intended

Possibly related PRs

• feat(web): add auto progress to MainFeaturesSection mobile view #2002: Modifies FeaturesMobileCarousel component with progress/auto-advance functionality and signature updates—shares the same component but addresses different concerns.

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: adding a static.webp fallback display to the mobile features carousel, which is the primary modification in the changeset.
Description check	✅ Passed	The description is well-related to the changeset, explaining the issue fixed, the implementation approach, and providing testing checklist and context.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch devin/1764579179-fix-mobile-static-gif

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/web/src/routes/_view/index.tsx (1)

1223-1234: Mobile features carousel fallback looks correct; confirm intended object-cover behavior

The new feature.image ? <Image> : <img static.webp> ternary cleanly fixes the missing-image case in the mobile features carousel and matches the desktop Features fallback source/alt pattern. No functional issues here.

One small thing to double-check: this fallback uses object-cover, while:

• The main Image still uses object-contain, and
• Other carousels’ static.webp fallbacks (e.g., DetailsMobileCarousel, DetailsTabletView, DetailsDesktopView) mostly use object-contain.

If the design intent is consistent cropping behavior across all carousels, you may want to align these; if not, this is fine as-is.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4fbffe5 and e1e52b5.

📒 Files selected for processing (1)

• apps/web/src/routes/_view/index.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, use cn (import from @hypr/utils). It is similar to clsx. Always pass an array and split by logical grouping.
Use motion/react instead of framer-motion.

Files:

• apps/web/src/routes/_view/index.tsx

🧬 Code graph analysis (1)

apps/web/src/routes/_view/index.tsx (1)

apps/web/src/components/image.tsx (1)

• Image (4-24)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Redirect rules - hyprnote
• GitHub Check: Header rules - hyprnote
• GitHub Check: Pages changed - hyprnote
• GitHub Check: Devin
• GitHub Check: ci
• GitHub Check: fmt