fix: mobile changelog UI improvements#2070
Merged
ComputelessComputer merged 2 commits intomainfrom Dec 2, 2025
Merged
Conversation
Contributor
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughAdds mobile-responsive presentation to the changelog view (conditional title, diff button/text, sidebar animation, and badge/icon adjustments) and tightens prefix icon spacing in the MockWindow component; also removes an unused icon import. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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). (5)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/src/routes/_view/changelog/$slug.tsx (1)
567-575: Refactor className to usecnfor better maintainability.The ternary operator duplicates many classes. As per coding guidelines, use
cnwith an array to group shared and conditional classes.Apply this diff:
<a href={diffUrl} target="_blank" rel="noopener noreferrer" - className={ - isMobile - ? "size-8 flex items-center justify-center text-sm bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 rounded-full shadow-sm hover:shadow-md hover:scale-[102%] active:scale-[98%] transition-all" - : "px-4 h-8 flex items-center gap-2 text-sm bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 rounded-full shadow-sm hover:shadow-md hover:scale-[102%] active:scale-[98%] transition-all" - } + className={cn([ + "flex items-center text-sm bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 rounded-full shadow-sm hover:shadow-md hover:scale-[102%] active:scale-[98%] transition-all", + isMobile ? "size-8 justify-center" : "px-4 h-8 gap-2", + ])} title="View diff on GitHub" > <Icon icon="mdi:github" className="text-lg" /> {!isMobile && <span>View Diff</span>} </a>Based on coding guidelines requiring
cnfor conditional className logic.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/components/mock-window.tsx(1 hunks)apps/web/src/routes/_view/changelog/$slug.tsx(3 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, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/components/mock-window.tsxapps/web/src/routes/_view/changelog/$slug.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:30.770Z
Learning: Applies to apps/web/content/changelog/** : Only include desktop-related changes in the changelog when reading through commits and diffs
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:29.314Z
Learning: Applies to apps/web/content/changelog/** : Only keep desktop-related changes when maintaining changelog entries from commits and diffs
📚 Learning: 2025-11-24T16:32:30.770Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:30.770Z
Learning: Applies to apps/web/content/changelog/** : Only include desktop-related changes in the changelog when reading through commits and diffs
Applied to files:
apps/web/src/routes/_view/changelog/$slug.tsx
📚 Learning: 2025-11-24T16:32:29.314Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:29.314Z
Learning: Applies to apps/web/content/changelog/** : Only keep desktop-related changes when maintaining changelog entries from commits and diffs
Applied to files:
apps/web/src/routes/_view/changelog/$slug.tsx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/changelog/$slug.tsx (1)
packages/ui/src/hooks/use-mobile.tsx (1)
useIsMobile(5-19)
⏰ 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: fmt
- GitHub Check: ci
🔇 Additional comments (2)
apps/web/src/components/mock-window.tsx (1)
37-37: LGTM: Tighter spacing for mobile UI.The reduced left margin aligns with the mobile UI improvements in this PR.
apps/web/src/routes/_view/changelog/$slug.tsx (1)
251-251: LGTM: Mobile-responsive logic is correctly implemented.The use of
useIsMobileto conditionally hide the window title on mobile and adapt the diff button is appropriate for the mobile UI improvements.Also applies to: 258-258, 522-522
- Make View Diff button icon-only in mobile view - Remove title from menu bar in mobile view - Reduce gap between traffic lights and hamburger menu icon Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
ComputelessComputer
force-pushed
the
devin/1764678475-mobile-changelog-ui-fixes
branch
from
adaf673 to
dc15c11
Compare
ComputelessComputer
deleted the
devin/1764678475-mobile-changelog-ui-fixes
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Mobile view improvements for the changelog page based on user feedback:
Review & Testing Checklist for Human
Notes