fix: Investments page mobile

[alessiocappa]

This PR introduces some UI fixes for the investments and holdings page to match the layout of the transactions page.

For “Activities”, overlapping information has been adjusted to display correctly on mobile. The “Holdings” tab now features a scrollable table on mobile, preventing compressed data.

Activities:

Before	After

Holdings:

Before	After

Summary by CodeRabbit

Release Notes

• Style
  • Improved responsive layouts with optimized spacing and horizontal scrolling support on mobile devices
  • Enhanced mobile experience with better category information visibility and streamlined control accessibility across screen sizes

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[dosubot]

Related Documentation

Checked 1 published document(s) in 0 knowledge base(s). No updates required.

^{How did I do? Any feedback?}  

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated responsive design for holdings index and trade card templates. Adjusted container padding, introduced horizontal scrolling support for headers, and implemented responsive rendering of UI elements (checkboxes, icons, badges) based on viewport size using Tailwind breakpoints.

Changes

Cohort / File(s)	Summary
Responsive UI Layout app/views/holdings/index.html.erb	Reduced outer container padding (p-5 → px-3 py-4 lg:p-4), added overflow-x-auto for horizontal scrolling on header row, wrapped grid with width constraints (w-max lg:w-full) to enable scrolling on smaller viewports. Holdings rendering logic unchanged.
Responsive Trade Card app/views/trades/_trade.html.erb	Hid checkbox on small screens (hidden lg:block), added checkbox_toggle_target data attribute, introduced responsive icon/badge rendering (desktop shows icon, mobile shows category badge), converted name container to flex with truncation, adjusted monetary amount container with responsive grid spans (col-span-4 lg:col-span-2).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

mobile/PWA

Suggested reviewers

• jjmata
• sokie

Poem

🐰 Hop, scroll, and hide with grace,
Mobile-first screens find their place,
Checkboxes vanish, badges bloom,
Responsive design lights up the room! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: Investments page mobile' accurately describes the primary purpose of this PR, which is to fix mobile layout issues on the Investments page (Holdings and Activities tabs).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3f62e84 and d68f7b9.

📒 Files selected for processing (2)

• app/views/holdings/index.html.erb
• app/views/trades/_trade.html.erb

🧰 Additional context used

📓 Path-based instructions (15)

{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/trades/_trade.html.erb
• app/views/holdings/index.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)

Files:

• app/views/trades/_trade.html.erb

app/views/**/*.erb

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

app/views/**/*.erb: Always use the icon helper for icons in views, never use lucide_icon directly
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 pass erb-lint checks as configured in .erb_lint.yml

Files:

• app/views/trades/_trade.html.erb
• app/views/holdings/index.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/trades/_trade.html.erb
• app/views/holdings/index.html.erb

**/*.{rb,erb}

📄 CodeRabbit inference engine (.cursor/rules/general-rules.mdc)

**/*.{rb,erb}: Use Current.user for accessing the current user. Do NOT use current_user
Use Current.family for accessing the current family. Do NOT use current_family

Files:

• app/views/trades/_trade.html.erb
• app/views/holdings/index.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 the icon helper from application_helper.rb for icons. Never use lucide_icon helper directly

Files:

• app/views/trades/_trade.html.erb
• app/views/holdings/index.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/trades/_trade.html.erb
• app/views/holdings/index.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

Files:

• app/views/trades/_trade.html.erb
• app/views/holdings/index.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/trades/_trade.html.erb
• app/views/holdings/index.html.erb

{app/views/**,app/helpers/**}

📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)

Always generate semantic HTML

Files:

• app/views/trades/_trade.html.erb
• app/views/holdings/index.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/trades/_trade.html.erb
• app/views/holdings/index.html.erb

**/*.erb

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.erb: In view templates, use native HTML elements preferred over JS components: use <dialog> for modals, <details><summary> for disclosures
Leverage Turbo frames for page sections over client-side solutions in views
Always use server-side formatting for currencies, numbers, and dates in views
Always use icon helper in application_helper.rb. NEVER use lucide_icon directly in templates.
Always generate semantic HTML in view templates
Keep domain logic OUT of view templates. Logic belongs in component files, not template files.

Files:

• app/views/trades/_trade.html.erb
• app/views/holdings/index.html.erb

**/*.{erb,js,ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{erb,js,ts,tsx}: Use query params for state management over localStorage/sessions in views
In TailwindCSS, always reference app/assets/tailwind/maybe-design-system.css for primitives and tokens
Use functional tokens defined in design system (e.g., text-primary instead of text-white, bg-container instead of bg-white)
Pass data to Stimulus controllers via data-*-value attributes, not inline JavaScript

Files:

• app/views/trades/_trade.html.erb
• app/views/holdings/index.html.erb

**/*.{erb,rb}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{erb,rb}: All user-facing strings must use localization (i18n). Always use t() helper. Update locale files for each new or changed element.
Use i18n interpolation for dynamic content: t("users.greeting", name: user.name)
Use Rails pluralization in i18n: t("transactions.count", count: @transactions.count)

Files:

• app/views/trades/_trade.html.erb
• app/views/holdings/index.html.erb

**/*.{js,ts,tsx,erb}

📄 CodeRabbit inference engine (CLAUDE.md)

In Stimulus controllers, use Declarative Actions (HTML declares what happens). Example: data-action="click->toggle#toggle"

Files:

• app/views/trades/_trade.html.erb
• app/views/holdings/index.html.erb

🧠 Learnings (6)

📚 Learning: 2026-01-10T19:11:44.566Z

Learnt from: CR
Repo: we-promise/sure PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-10T19:11:44.566Z
Learning: Applies to **/*.erb : In view templates, use native HTML elements preferred over JS components: use `<dialog>` for modals, `<details><summary>` for disclosures

Applied to files:

• app/views/trades/_trade.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/holdings/index.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 : Leverage Turbo frames to break up pages instead of JavaScript-driven client-side solutions

Applied to files:

• app/views/holdings/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 : Use Turbo Frames for page sections instead of client-side solutions

Applied to files:

• app/views/holdings/index.html.erb

📚 Learning: 2026-01-10T19:11:44.566Z

Learnt from: CR
Repo: we-promise/sure PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-10T19:11:44.566Z
Learning: Applies to **/*.erb : Leverage Turbo frames for page sections over client-side solutions in views

Applied to files:

• app/views/holdings/index.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/holdings/index.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 (7)

app/views/holdings/index.html.erb (3)

2-2: LGTM on responsive padding.

The responsive padding px-3 py-4 lg:p-4 provides appropriate spacing for mobile vs. desktop viewports.

---

16-24: Good approach for mobile horizontal scrolling.

The combination of overflow-x-auto on the container with w-max lg:w-full on the inner wrapper is the correct pattern for enabling horizontal scroll on mobile while maintaining full-width on larger screens. This keeps the table data readable without compression.

---

26-35: LGTM!

The holdings content structure is well-organized with proper use of design system tokens (bg-container, shadow-border-xs) and the conditional rendering for current_holdings is appropriately preserved.

app/views/trades/_trade.html.erb (4)

9-16: Good responsive visibility for checkbox.

Hiding the checkbox on mobile with hidden lg:block is appropriate since bulk selection is typically a desktop interaction. The Stimulus data attributes are correctly structured.

---

19-38: Well-structured responsive rendering.

The approach of showing the filled icon on large screens (hidden lg:flex) and the mobile category badge on small screens (flex lg:hidden) is clean. The min-w-0 and truncate flex-shrink classes properly handle text overflow.

---

43-51: LGTM on responsive column layout.

Hiding the category badge on mobile and adjusting the amount column span (col-span-4 lg:col-span-2) properly redistributes the grid space when elements are hidden.

---

29-31: The original concern is unfounded. trade_category is properly defined as a helper method in app/helpers/categories_helper.rb (line 16), which creates a new Category instance with name "Trade". It's safely accessible in the view as a fallback via the pattern trade.category || trade_category. No changes needed.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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