FIX: Small layout adjustments #507
Conversation
📝 WalkthroughWalkthroughAdjusted responsive spacing and minor markup in dashboard and reports views: reduced bottom padding on dashboard, changed donut container padding and icon size, and added vertical spacing on trends/insights. No backend logic or data-flow changes. Changes
Sequence Diagram(s)(Skipped — changes are view/markup-only and do not introduce new multi-component control flow.) Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ 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)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/views/reports/index.html.erb (1)
102-102: Consider using a design token for focus ring color.The class
focus-visible:ring-gray-900uses a raw Tailwind color. Per coding guidelines, prefer functional design system tokens frommaybe-design-system.css.Suggested change
- class="bg-container rounded-xl shadow-border-xs transition-all mb-6 group focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" + class="bg-container rounded-xl shadow-border-xs transition-all mb-6 group focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"Note: Verify that a suitable ring color token exists in your design system. If
ring-gray-900is intentional for contrast, this can be deferred.app/views/reports/_trends_insights.html.erb (1)
163-184: Consider extracting insight message logic to a helper.This conditional block computes the comparison message inline. Per coding guidelines, prefer keeping domain logic out of view templates.
Suggested helper extraction
# app/helpers/reports_helper.rb def spending_insight_message(weekday_avg, weekend_avg) weekday = weekday_avg.to_f weekend = weekend_avg.to_f if weekend > weekday percent_diff = ((weekend - weekday) / weekday * 100).round(0) percent_diff > 20 ? t("reports.trends.insight_higher_weekend", percent: percent_diff) : t("reports.trends.insight_similar") elsif weekday > weekend percent_diff = ((weekday - weekend) / weekend * 100).round(0) percent_diff > 20 ? t("reports.trends.insight_higher_weekday", percent: percent_diff) : t("reports.trends.insight_similar") else t("reports.trends.insight_similar") end endThen in the template:
<%= spending_insight_message(spending_patterns[:weekday_avg], spending_patterns[:weekend_avg]) %>This is a recommended refactor that can be addressed in a follow-up if preferred.
app/views/pages/dashboard.html.erb (1)
35-35: Same design token suggestion applies here.Similar to
reports/index.html.erb, consider replacingfocus-visible:ring-gray-900with a design system token for consistency.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/views/pages/dashboard.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/reports/_trends_insights.html.erbapp/views/reports/index.html.erb
🧰 Additional context used
📓 Path-based instructions (17)
{app/**/*.{erb,html},app/javascript/**/*.js}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Prefer Hotwire-first approach: use Turbo + Stimulus for reactive UI without heavy JavaScript
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
app/views/**/*.erb
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
app/views/**/*.erb: Always use theiconhelper for icons in views, never uselucide_icondirectly
Use Tailwind design tokens (e.g., text-primary, bg-container, border-secondary) instead of raw color names
Pass data to Stimulus controllers via data-*-value attributes instead of inline JavaScript
Prefer semantic HTML elements (dialog, details, summary) over JavaScript components
Use Turbo Frames for page sections instead of client-side solutions
Use server-side formatting for currencies, numbers, and dates instead of client-side
app/views/**/*.erb: Avoid heavy logic in ERB views; prefer helpers and components instead
Ensure ERB views passerb-lintchecks as configured in.erb_lint.yml
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{css,erb}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Tailwind CSS v4.x with custom design system for styling
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{rb,erb}
📄 CodeRabbit inference engine (.cursor/rules/general-rules.mdc)
**/*.{rb,erb}: UseCurrent.userfor accessing the current user. Do NOT usecurrent_user
UseCurrent.familyfor accessing the current family. Do NOT usecurrent_family
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.html.erb
📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)
**/*.html.erb: Prefer native HTML elements over JavaScript-based components. Use semantic HTML: for modals,for disclosures
Leverage Turbo frames to break up pages instead of JavaScript-driven client-side solutions
Use theiconhelper from application_helper.rb for icons. Never uselucide_iconhelper directly
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{rb,js,erb}
📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)
Format currencies, numbers, dates, and other values server-side, then pass to Stimulus controllers for display only
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{rb,html.erb}
📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)
Use ActiveRecord validations for complex validations and business logic. Simple validations may be mirrored in ActiveRecord for form error handling convenience, but prioritize client-side form validation when possible
**/*.{rb,html.erb}: UseCurrent.userfor the current user, NOTcurrent_user
UseCurrent.familyfor the current family, NOTcurrent_family
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
{app/views/**,app/helpers/**,app/javascript/controllers/**}
📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)
{app/views/**,app/helpers/**,app/javascript/controllers/**}: Reference maybe-design-system.css for base primitives, functional tokens, and component tokens before writing styles
Prefer using functional design system tokens (e.g., text-primary, bg-container, border-primary) from maybe-design-system.css instead of raw Tailwind color values
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
{app/views/**,app/helpers/**}
📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)
Always generate semantic HTML
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{erb,html.erb}
📄 CodeRabbit inference engine (.cursor/rules/view_conventions.mdc)
**/*.{erb,html.erb}: Use ViewComponents when: element has complex logic or styling patterns, will be reused across multiple views/contexts, needs structured styling with variants/sizes, requires interactive behavior or Stimulus controllers, has configurable slots or complex APIs, or needs accessibility features or ARIA support
Use Partials when: element is primarily static HTML with minimal logic, used in only one or few specific contexts, is simple template content, doesn't need variants/sizes/complex configuration, or is more about content organization than reusable functionality
Prefer components over partials: if a component is available in app/components, use it; if not, look for a partial; if neither exists, decide between component or partial based on complexity and reusability criteria
Keep domain logic out of views: compute values like button classes, conditional logic, and data transformations in the component file, not the template file
Always use the declarative approach when integrating Stimulus controllers in views: the ERB template should declare what happens using data-* attributes, and the Stimulus controller should respond
Component controllers in app/components/ should only be used within their component templates; global controllers in app/javascript/controllers/ can be used across any view
Pass data from Rails to Stimulus using data-*-value attributes, not inline JavaScript
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{html.erb,erb}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{html.erb,erb}: Use<dialog>for modals and<details><summary>for disclosures instead of JavaScript components
Use Turbo frames for page sections instead of client-side solutions
Use theiconhelper for icons, NEVER uselucide_icondirectly
Keep domain logic OUT of view templates; logic belongs in component files, not template files
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{js,ts,html.erb,erb}
📄 CodeRabbit inference engine (CLAUDE.md)
Use query params for state instead of localStorage/sessions
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{html.erb,erb,css}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{html.erb,erb,css}: Always use functional tokens from the design system (e.g.,text-primaryinstead oftext-white,bg-containerinstead ofbg-white)
Referenceapp/assets/tailwind/maybe-design-system.cssfor primitives and tokens; never create new styles without permission
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{html.erb,erb,rb}
📄 CodeRabbit inference engine (CLAUDE.md)
All user-facing strings must use the
t()helper for localization (i18n); updateconfig/locales/en.ymlfor new strings
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{rb,html.erb,erb}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Rails pluralization for i18n:
t('transactions.count', count: @transactions.count)
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
**/*.{html.erb,erb,js,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{html.erb,erb,js,ts}: Stimulus controllers should use declarative actions in HTML (data-action attributes) rather than inline JavaScript
Pass data to Stimulus controllers viadata-*-valueattributes, not inline JavaScript
Files:
app/views/pages/dashboard.html.erbapp/views/reports/index.html.erbapp/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
app/views/**/_*.html.erb
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use partials only for simple, static HTML with minimal logic in specific contexts
app/views/**/_*.html.erb: Use underscore prefix for partial files (e.g., _trend_change.html.erb, _form_errors.html.erb, _sync_indicator.html.erb)
Place context-specific partials in relevant controller view directory (e.g., accounts/_account_sidebar_tabs.html.erb)Use partials when element is static HTML with minimal logic, used in only one/few contexts, is simple template content, or doesn't need variants
Files:
app/views/reports/_trends_insights.html.erbapp/views/pages/dashboard/_outflows_donut.html.erb
🧠 Learnings (6)
📚 Learning: 2025-11-24T16:57:20.318Z
Learnt from: CR
Repo: we-promise/sure PR: 0
File: .cursor/rules/view_conventions.mdc:0-0
Timestamp: 2025-11-24T16:57:20.318Z
Learning: Applies to app/views/**/_*.html.erb : Place context-specific partials in relevant controller view directory (e.g., accounts/_account_sidebar_tabs.html.erb)
Applied to files:
app/views/pages/dashboard.html.erb
📚 Learning: 2025-11-24T16:56:13.406Z
Learnt from: CR
Repo: we-promise/sure PR: 0
File: .cursor/rules/project-conventions.mdc:0-0
Timestamp: 2025-11-24T16:56:13.406Z
Learning: Applies to **/*.html.erb : Prefer native HTML elements over JavaScript-based components. Use semantic HTML: <dialog> for modals, <details><summary> for disclosures
Applied to files:
app/views/reports/index.html.erb
📚 Learning: 2025-11-24T16:54:59.198Z
Learnt from: CR
Repo: we-promise/sure PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:54:59.198Z
Learning: Applies to app/views/**/*.erb : Prefer semantic HTML elements (dialog, details, summary) over JavaScript components
Applied to files:
app/views/reports/index.html.erb
📚 Learning: 2025-12-19T22:25:35.646Z
Learnt from: CR
Repo: we-promise/sure PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T22:25:35.646Z
Learning: Applies to **/*.{html.erb,erb} : Use `<dialog>` for modals and `<details><summary>` for disclosures instead of JavaScript components
Applied to files:
app/views/reports/index.html.erb
📚 Learning: 2025-08-22T18:30:26.758Z
Learnt from: jjmata
Repo: we-promise/sure PR: 116
File: app/views/family_exports/_list.html.erb:16-28
Timestamp: 2025-08-22T18:30:26.758Z
Learning: In the family exports UI (app/views/family_exports/_list.html.erb), raw color utilities like bg-green-500/5, text-green-500, bg-red-500/5, text-red-500 are preferred over design system tokens for status indicators to maintain UI legibility and consistency with the existing import UI patterns. The user has indicated that design token replacements would make the UI illegible in this context.
Applied to files:
app/views/pages/dashboard/_outflows_donut.html.erb
📚 Learning: 2025-11-24T16:54:59.198Z
Learnt from: CR
Repo: we-promise/sure PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:54:59.198Z
Learning: Applies to app/javascript/**/*.js : Use D3.js for financial visualizations (time series, donut, sankey charts)
Applied to files:
app/views/pages/dashboard/_outflows_donut.html.erb
⏰ 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)
- GitHub Check: ci / test
🔇 Additional comments (9)
app/views/pages/dashboard/_outflows_donut.html.erb (2)
16-16: LGTM on padding adjustment.The change from
p-4topx-4removes vertical padding from the donut container, which aligns with the PR objective of adjusting spacing for consistency.
81-97: Icon container sizing increase looks good.The change from
h-6 w-6toh-7 w-7increases the category glyph size to match other UI elements as stated in the PR objectives. The implementation correctly uses theiconhelper and renders theDS::FilledIconcomponent with appropriate props.app/views/reports/index.html.erb (2)
87-87: Responsive padding adjustment aligns with dashboard.The change to
pb-4 lg:pb-6provides consistent spacing that complements the dashboard container'spb-6 lg:pb-12padding.
98-149: Well-structured collapsible sections with good accessibility.The implementation follows best practices:
- Semantic HTML with
<section>,role="list", androle="listitem"- Proper ARIA attributes for accessibility (
aria-grabbed,aria-expanded,aria-label)- Declarative Stimulus integration via
data-actionattributes- Uses
icon()helper andt()helper correctly- References
Current.userappropriatelyapp/views/reports/_trends_insights.html.erb (4)
2-6: Clean header restructuring.The normalized indentation and markup structure for the Month-over-Month Trends header improves readability.
48-74: Average calculations in template are acceptable for display.The inline average calculations are simple aggregations for presentation. While these could be precomputed in the controller, the current approach is reasonable for this straightforward display logic.
88-151: Well-structured spending patterns grid.The two-column responsive grid (
grid-cols-1 md:grid-cols-2) with weekday/weekend panels is clean and uses:
- Proper
icon()helper calls- Design system tokens (
bg-surface-inset,text-primary,text-tertiary)- Server-side
Moneyformatting- Consistent i18n via
t()helper
191-195: Good addition of empty state handling.The else branch with
no_spending_datamessage ensures graceful fallback when there's no spending data to display.app/views/pages/dashboard.html.erb (1)
30-30: Padding adjustment addresses PWA layout issue.The change from
pb-24topb-6 lg:pb-12reduces bottom padding for consistency across pages. This aligns with the PR objective to fix the layout issue affecting PWA mode.
|
Does #496 regress the full-height PWA fixes / is it compatible with them @alessiocappa? |
@jjmata sorry, my bad. I was referring to the PR we were testing, but I copied the wrong link. 🙂 Too many PR on that topic, I guess. 😄 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
app/views/reports/index.html.erb (1)
186-251: Implementation is solid; scope extends beyond "small layout adjustments."Both Stimulus controllers are properly implemented with comprehensive functionality:
reports_section_controller.js: Collapse/expand with state persistence, ARIA attributes, and keyboard accessibility (Enter/Space to toggle)reports_sortable_controller.js: Full drag-and-drop support (mouse, touch with 150ms hold delay, keyboard navigation with Arrow keys), visual feedback, haptic feedback, and persistence via/reports/update_preferencesUser model correctly handles state management with
reports_section_collapsed?,reports_section_order, andupdate_reports_preferences(atomic with pessimistic locking).Strengths:
- Excellent accessibility implementation across keyboard, mouse, and touch interactions
- Proper CSRF protection and error handling in async operations
- Consistent architecture with existing dashboard implementation
- Follows all coding guidelines (design tokens, semantic HTML, i18n, no inline JS)
This feature addition is substantial and well-executed. The PR title "FIX: Small layout adjustments" undersells the actual changes—consider separating feature additions from cosmetic fixes in future PRs for clearer review intent and change tracking.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/views/pages/dashboard.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/reports/index.html.erb
🧰 Additional context used
📓 Path-based instructions (17)
{app/**/*.{erb,html},app/javascript/**/*.js}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Prefer Hotwire-first approach: use Turbo + Stimulus for reactive UI without heavy JavaScript
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
app/views/**/*.erb
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
app/views/**/*.erb: Always use theiconhelper for icons in views, never uselucide_icondirectly
Use Tailwind design tokens (e.g., text-primary, bg-container, border-secondary) instead of raw color names
Pass data to Stimulus controllers via data-*-value attributes instead of inline JavaScript
Prefer semantic HTML elements (dialog, details, summary) over JavaScript components
Use Turbo Frames for page sections instead of client-side solutions
Use server-side formatting for currencies, numbers, and dates instead of client-side
app/views/**/*.erb: Avoid heavy logic in ERB views; prefer helpers and components instead
Ensure ERB views passerb-lintchecks as configured in.erb_lint.yml
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{css,erb}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Tailwind CSS v4.x with custom design system for styling
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{rb,erb}
📄 CodeRabbit inference engine (.cursor/rules/general-rules.mdc)
**/*.{rb,erb}: UseCurrent.userfor accessing the current user. Do NOT usecurrent_user
UseCurrent.familyfor accessing the current family. Do NOT usecurrent_family
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.html.erb
📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)
**/*.html.erb: Prefer native HTML elements over JavaScript-based components. Use semantic HTML: for modals,for disclosures
Leverage Turbo frames to break up pages instead of JavaScript-driven client-side solutions
Use theiconhelper from application_helper.rb for icons. Never uselucide_iconhelper directly
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{rb,js,erb}
📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)
Format currencies, numbers, dates, and other values server-side, then pass to Stimulus controllers for display only
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{rb,html.erb}
📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)
Use ActiveRecord validations for complex validations and business logic. Simple validations may be mirrored in ActiveRecord for form error handling convenience, but prioritize client-side form validation when possible
**/*.{rb,html.erb}: UseCurrent.userfor the current user, NOTcurrent_user
UseCurrent.familyfor the current family, NOTcurrent_family
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
{app/views/**,app/helpers/**,app/javascript/controllers/**}
📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)
{app/views/**,app/helpers/**,app/javascript/controllers/**}: Reference maybe-design-system.css for base primitives, functional tokens, and component tokens before writing styles
Prefer using functional design system tokens (e.g., text-primary, bg-container, border-primary) from maybe-design-system.css instead of raw Tailwind color values
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
{app/views/**,app/helpers/**}
📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)
Always generate semantic HTML
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{erb,html.erb}
📄 CodeRabbit inference engine (.cursor/rules/view_conventions.mdc)
**/*.{erb,html.erb}: Use ViewComponents when: element has complex logic or styling patterns, will be reused across multiple views/contexts, needs structured styling with variants/sizes, requires interactive behavior or Stimulus controllers, has configurable slots or complex APIs, or needs accessibility features or ARIA support
Use Partials when: element is primarily static HTML with minimal logic, used in only one or few specific contexts, is simple template content, doesn't need variants/sizes/complex configuration, or is more about content organization than reusable functionality
Prefer components over partials: if a component is available in app/components, use it; if not, look for a partial; if neither exists, decide between component or partial based on complexity and reusability criteria
Keep domain logic out of views: compute values like button classes, conditional logic, and data transformations in the component file, not the template file
Always use the declarative approach when integrating Stimulus controllers in views: the ERB template should declare what happens using data-* attributes, and the Stimulus controller should respond
Component controllers in app/components/ should only be used within their component templates; global controllers in app/javascript/controllers/ can be used across any view
Pass data from Rails to Stimulus using data-*-value attributes, not inline JavaScript
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{html.erb,erb}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{html.erb,erb}: Use<dialog>for modals and<details><summary>for disclosures instead of JavaScript components
Use Turbo frames for page sections instead of client-side solutions
Use theiconhelper for icons, NEVER uselucide_icondirectly
Keep domain logic OUT of view templates; logic belongs in component files, not template files
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{js,ts,html.erb,erb}
📄 CodeRabbit inference engine (CLAUDE.md)
Use query params for state instead of localStorage/sessions
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{html.erb,erb,css}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{html.erb,erb,css}: Always use functional tokens from the design system (e.g.,text-primaryinstead oftext-white,bg-containerinstead ofbg-white)
Referenceapp/assets/tailwind/maybe-design-system.cssfor primitives and tokens; never create new styles without permission
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{html.erb,erb,rb}
📄 CodeRabbit inference engine (CLAUDE.md)
All user-facing strings must use the
t()helper for localization (i18n); updateconfig/locales/en.ymlfor new strings
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{rb,html.erb,erb}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Rails pluralization for i18n:
t('transactions.count', count: @transactions.count)
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
**/*.{html.erb,erb,js,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{html.erb,erb,js,ts}: Stimulus controllers should use declarative actions in HTML (data-action attributes) rather than inline JavaScript
Pass data to Stimulus controllers viadata-*-valueattributes, not inline JavaScript
Files:
app/views/reports/index.html.erbapp/views/pages/dashboard/_outflows_donut.html.erbapp/views/pages/dashboard.html.erb
app/views/**/_*.html.erb
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use partials only for simple, static HTML with minimal logic in specific contexts
app/views/**/_*.html.erb: Use underscore prefix for partial files (e.g., _trend_change.html.erb, _form_errors.html.erb, _sync_indicator.html.erb)
Place context-specific partials in relevant controller view directory (e.g., accounts/_account_sidebar_tabs.html.erb)Use partials when element is static HTML with minimal logic, used in only one/few contexts, is simple template content, or doesn't need variants
Files:
app/views/pages/dashboard/_outflows_donut.html.erb
🧠 Learnings (2)
📚 Learning: 2025-11-24T16:54:59.198Z
Learnt from: CR
Repo: we-promise/sure PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:54:59.198Z
Learning: Applies to app/javascript/**/*.js : Use D3.js for financial visualizations (time series, donut, sankey charts)
Applied to files:
app/views/pages/dashboard/_outflows_donut.html.erb
📚 Learning: 2025-11-24T16:57:20.318Z
Learnt from: CR
Repo: we-promise/sure PR: 0
File: .cursor/rules/view_conventions.mdc:0-0
Timestamp: 2025-11-24T16:57:20.318Z
Learning: Applies to app/views/**/_*.html.erb : Place context-specific partials in relevant controller view directory (e.g., accounts/_account_sidebar_tabs.html.erb)
Applied to files:
app/views/pages/dashboard.html.erb
⏰ 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). (2)
- GitHub Check: Cursor Bugbot
- GitHub Check: ci / test
🔇 Additional comments (3)
app/views/pages/dashboard/_outflows_donut.html.erb (1)
16-16: LGTM: Padding adjustment for layout consistency.The change from
p-4topx-4removes vertical padding while maintaining horizontal padding, which aligns with the PR's objective of normalizing spacing across the dashboard. This creates more consistent vertical rhythm with the parent container's padding pattern.app/views/pages/dashboard.html.erb (1)
30-30: LGTM: Responsive padding adjustment improves mobile experience.The change from
pb-24topb-6 lg:pb-12implements a mobile-first responsive padding strategy that reduces bottom padding on smaller viewports while maintaining adequate spacing on larger screens. This aligns with the PR's objective of normalizing spacing across pages with attention to mobile.app/views/reports/index.html.erb (1)
185-185: LGTM: Consistent responsive padding adjustment.The change from
pb-24topb-4 lg:pb-6follows the same mobile-first responsive pattern as the dashboard, with slightly less padding overall. This is consistent with the PR's goal of normalizing spacing across pages.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This is the final PR Bugbot will review for you during this billing cycle
Your free Bugbot reviews will reset on February 15
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
alessiocappa
force-pushed
the
FIX-LayoutFixes
branch
from
cb49245 to
d1148ff
Compare
|
Related Documentation Checked 1 published document(s) in 0 knowledge base(s). No updates required. How did I do? Any feedback? |
2 participants
This PR introduces minor layout adjustments for consistency across pages and fixes a layout issue on the “Reports” page that disrupts the PWA mode.
This issue is only noticeable when using the PR link #237 but I believe the underlying HTML is in any case incorrect.
Here’s a list of the changes:
divon the “Reports” page.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.