Improved Transactions Page For Smaller Screens #182
Conversation
1. Switches from set number cols (12), to dynamic per group of transactions.
- This should fix spacing issues on smaller screens, and is more dynamic than changing pre-set widths.
2. Enabled categories to show on all views regarless of screen size.
3. Adjusted spacing between searchbar, headerbar & transactions to remove blank space on smaller screens.
4. Adjusted tick boxes, where higher = more left to signify weight.
5. Adjusted merchant images to fill the transaction row correctly.
6. Tidied automatch button & shortened to 'A/M' on smaller screens to increase usable space for transaction name.
WalkthroughUI/layout updates across several ERB views: padding and display class tweaks for category badges and entry groups; significant restructuring of the transactions partials and index header layout, including turbo frame wrapping, grid adjustments, responsive text for transfer matches, and spacing refinements in the transactions search filters. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Page as Transactions Index View
participant Frame as Turbo Frames
participant UI as UI Components
User->>Page: Load /transactions
Page->>Frame: Render entry frame and nested transaction frame
Frame->>UI: Display responsive header and rows
UI-->>User: Show updated layout (grid, badges, amounts)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (6)
🧰 Additional context used📓 Path-based instructions (15)app/views/**/*.erb📄 CodeRabbit inference engine (AGENTS.md)
Files:
app/views/**/*.html.*📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.{html,erb,slim,js,jsx,ts,tsx,css,scss}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/app/**/*.erb📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/app/views/**/*.erb📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/app/**/*.{rb,erb,js,css}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{rb,erb,haml,slim}📄 CodeRabbit inference engine (.cursor/rules/general-rules.mdc)
Files:
app/views/**/*.html.erb📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)
Files:
app/{models,controllers,views}/**/*.{rb,erb}📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)
Files:
{app/javascript/controllers/**/*.{js,ts},app/views/**/*.erb,app/components/**/*.erb}📄 CodeRabbit inference engine (.cursor/rules/stimulus_conventions.mdc)
Files:
{app/components/**/*.{js,ts,erb},app/views/**/*.erb}📄 CodeRabbit inference engine (.cursor/rules/stimulus_conventions.mdc)
Files:
{app/views/**,app/helpers/**,app/javascript/controllers/**}📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)
Files:
{app/views/**,app/helpers/**}📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)
Files:
{app/views,app/components}/**/*.html.erb📄 CodeRabbit inference engine (.cursor/rules/view_conventions.mdc)
Files:
app/views/**/_*.html.erb📄 CodeRabbit inference engine (.cursor/rules/view_conventions.mdc)
Files:
🧠 Learnings (1)📚 Learning: 2025-09-23T22:21:06.637ZApplied to files:
⏰ 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). (1)
🔇 Additional comments (18)
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. Comment |
|
@alessiocappa, I know you where working on a similar fix, are you able to please have a look at this solution and let me know your thoughts. |
|
@ByteBard11 yes, I tried to fix the spacing to align the amounts in the table, but I was also thinking about adding the categories on the transaction page, so thanks for this big improvement! I did a quick test, not sure if I did something wrong, but in my case the transaction names are almost unreadable due to the category label: 
The screen is from the Chrome inspect, using an iPhone 12 Pro. I tested it also on my device (iPhone 15) and I see it in the same way. I think the category takes a bit too much space, especially if the name is too long. |
2 participants
This pull request improves mobile usability on the transactions page, with a focus on smaller screens.
Changes
Replaced fixed column counts (e.g. grid-cols-12) with dynamic grid columns per transaction group, so column widths adapt to content.
Categories are now always visible across all screen sizes (previously hidden on smaller breakpoints).
Reduced excess spacing between the search bar, header bar, and transactions list for better use of space on small devices.
Updated checkbox alignment, so “heavier” checkboxes appear further left to convey hierarchy.
Adjusted merchant image sizing to align consistently and fill the transaction row height properly.
Refined the auto‑match button:
Addresses:
#166, #181
Together, these changes make the transactions page more consistent, space‑efficient, and readable across all screen sizes, with a particular improvement in usability on smaller devices.
Old vs New:
EXTRA SMALL SCREEN (iPhone SE selected in chrome inspect):
SMALL SCREEN:
LARGE SCREEN (Limited Changes):
Summary by CodeRabbit