fix(web): update Lora font family display in brand page sidebar

[ComputelessComputer]

Summary

Updates the Lora typography entry in the brand page to display "Lora" instead of "Lora, serif" in the sidebar. This is a simple string change to the fontFamily property in the TYPOGRAPHY constant.

Review & Testing Checklist for Human

• Verify the Lora font still renders correctly on the brand page (the font preview should still display in Lora typeface)
• Confirm the sidebar shows "Lora" as the font family text

Notes

• Link to Devin run: https://app.devin.ai/sessions/40acbb5e855b40d6ba434da6f6aaeb3f
• 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 ready!

Name	Link
🔨 Latest commit	7f3227c
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/693394f2b19774000849d16a
😎 Deploy Preview	https://deploy-preview-2140--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

Updated typography rendering and a font entry in the Brand route: removed the serif fallback from the Lora fontFamily, ensured font names render with inline fontFamily styles in typography components, and changed the mobile sidebar drawer transition to a 0.2s tween easeOut.

Changes

Cohort / File(s)	Summary
Typography data change apps/web/src/routes/_view/brand.tsx	Changed the Lora fontFamily value from "Lora, serif" to "Lora".
Typography rendering tweaks apps/web/src/routes/_view/brand.tsx	Typography components now render font names using inline style={{ fontFamily: ... }} for correct font application (applies to TypographyGrid and TypographySidebar elements).
Mobile drawer animation apps/web/src/routes/_view/brand.tsx	MobileSidebarDrawer transition changed from a spring-based animation to a tween with 0.2s duration and easeOut.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Areas to check closely:
  • Ensure inline fontFamily usage doesn’t create CSS specificity or fallback regressions across platforms.
  • Verify the Lora font loads as expected without the serif fallback.
  • Confirm the MobileSidebarDrawer animation timing/feel and accessibility (reduced motion respect).

Possibly related PRs

• feat(brand): Add comprehensive brand assets and details page #1744: Introduced the TYPOGRAPHY array and typography UI changes that this PR further adjusts (Lora and rendering).
• feat(web): add mobile drawer layout for about and brand pages #2008: Modified MobileSidebarDrawer/mobile-drawer behavior; related to the animation change here.

Suggested reviewers

• yujonglee

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 accurately describes the main change: updating the Lora font family display in the brand page sidebar, matching the core objective of the PR.
Description check	✅ Passed	The description is directly related to the changeset, explaining the font family string update and providing testing guidance relevant to the changes.

✨ 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/1764923147-lora-font-family

---

📜 Recent 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 5e6e6a9 and 7f3227c.

📒 Files selected for processing (1)

• apps/web/src/routes/_view/brand.tsx (4 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/brand.tsx

⏰ 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). (8)

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

🔇 Additional comments (4)

apps/web/src/routes/_view/brand.tsx (4)

353-358: Nice enhancement - font name displays in its own typeface.

Adding the inline fontFamily style to render the font name in its actual typeface is a good visual touch that helps users preview the font directly in the grid.

---

628-639: LGTM - Consistent typography rendering.

The inline fontFamily styles ensure both the font name and family text are rendered in the actual typeface, providing visual consistency with the grid view and helping users identify fonts at a glance.

---

447-447: Verify if animation change was intentional.

The drawer animation was changed from a spring-based animation to a tween with 0.2s duration and easeOut. This change is not mentioned in the PR objectives and appears unrelated to the Lora font family update.

Was this animation change intentional, or should it be reverted to maintain the original spring animation behavior?

---

86-86: Font loading verified — change is safe.

The Lora font is properly loaded via Google Fonts in apps/web/src/styles.css with all necessary font weights. Removing the serif fallback at line 86 is appropriate for a brand showcase page where the exact typeface is intentional.

---

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

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	7f3227c
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/693394f2b9b4ea0008d5d55e
😎 Deploy Preview	https://deploy-preview-2140--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.