From a50c48d3cfd406bcbf04dcdd25d3d55dd50e5b6f Mon Sep 17 00:00:00 2001
From: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com>
Date: Thu, 15 Jan 2026 10:32:52 +0100
Subject: [PATCH] fix: Investments page mobile (#654)

* fix: Mobile layout UI adjustment for trade page

* fix: Adjust table in holdings tab on mobile

* fix: properly manage width on desktop
---
 app/views/holdings/index.html.erb | 34 +++++++++++++++++-------------
 app/views/trades/_trade.html.erb  | 35 ++++++++++++++++++++-----------
 2 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/app/views/holdings/index.html.erb b/app/views/holdings/index.html.erb
index 704284468..2ab1bbec0 100644
--- a/app/views/holdings/index.html.erb
+++ b/app/views/holdings/index.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag dom_id(@account, "holdings") do %>
-  <div class="bg-container space-y-4 p-5 rounded-xl shadow-border-xs">
+  <div class="bg-container space-y-4 px-3 py-4 lg:p-4 rounded-xl shadow-border-xs">
     <div class="flex items-center justify-between">
       <%= tag.h2 t(".holdings"), class: "font-medium text-lg" %>
       <%= link_to new_trade_path(account_id: @account.id),
@@ -13,22 +13,26 @@
       <% end %>
     </div>
 
-    <div class="bg-container-inset rounded-xl p-1">
-      <div class="grid grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
-        <%= tag.p t(".name"), class: "col-span-4" %>
-        <%= tag.p t(".weight"), class: "col-span-2 justify-self-end" %>
-        <%= tag.p t(".average_cost"), class: "col-span-2 justify-self-end" %>
-        <%= tag.p t(".holdings"), class: "col-span-2 justify-self-end" %>
-        <%= tag.p t(".return"), class: "col-span-2 justify-self-end" %>
-      </div>
+    <div class="bg-container-inset rounded-xl p-1 overflow-x-auto">
+      <div class="w-max lg:w-full">
+        <div class="grid grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
+          <%= tag.p t(".name"), class: "col-span-4" %>
+          <%= tag.p t(".weight"), class: "col-span-2 justify-self-end" %>
+          <%= tag.p t(".average_cost"), class: "col-span-2 justify-self-end" %>
+          <%= tag.p t(".holdings"), class: "col-span-2 justify-self-end" %>
+          <%= tag.p t(".return"), class: "col-span-2 justify-self-end" %>
+        </div>
 
-      <div class="bg-container rounded-lg shadow-border-xs">
-        <%= render "holdings/cash", account: @account %>
-        <%= render "shared/ruler" %>
+        <div class="bg-container rounded-lg shadow-border-xs">
+          <%= render "holdings/cash", account: @account %>
+          <%= render "shared/ruler" %>
 
-        <% if @account.current_holdings.any? %>
-          <%= render partial: "holdings/holding", collection: @account.current_holdings, spacer_template: "shared/ruler" %>
-        <% end %>
+          <% if @account.current_holdings.any? %>
+            <%= render partial: "holdings/holding",
+                      collection: @account.current_holdings,
+                      spacer_template: "shared/ruler" %>
+          <% end %>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/views/trades/_trade.html.erb b/app/views/trades/_trade.html.erb
index ff5ab18cb..30a38226b 100644
--- a/app/views/trades/_trade.html.erb
+++ b/app/views/trades/_trade.html.erb
@@ -7,19 +7,30 @@
     <div class="grid grid-cols-12 items-center <%= entry.excluded ? "text-gray-400 bg-gray-25" : "text-primary" %> text-sm font-medium p-4">
       <div class="col-span-8 flex items-center gap-4">
         <%= check_box_tag dom_id(entry, "selection"),
-                        class: "checkbox checkbox--light",
-                        data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
+                        class: "checkbox checkbox--light hidden lg:block",
+                        data: { 
+                          id: entry.id, 
+                          "bulk-select-target": "row", 
+                          action: "bulk-select#toggleRowSelection",
+                          checkbox_toggle_target: "selectionEntry"
+                        } %>
 
         <div class="max-w-full">
-          <%= tag.div class: ["flex items-center gap-2"] do %>
-            <%= render DS::FilledIcon.new(
-              variant: :text,
-              text: entry.name,
-              size: "sm",
-              rounded: true
-            ) %>
+          <%= tag.div class: ["flex items-center gap-2 min-w-0"] do %>
+            <div class="hidden lg:flex">
+              <%= render DS::FilledIcon.new(
+                variant: :text,
+                text: entry.name,
+                size: "sm",
+                rounded: true
+              ) %>
+            </div>
 
-            <div class="truncate">
+            <div class="flex lg:hidden">
+              <%= render "categories/badge_mobile", category: trade.category || trade_category %>
+            </div>
+
+            <div class="truncate flex-shrink">
               <%= link_to entry.name,
                         entry_path(entry),
                         data: { turbo_frame: "drawer", turbo_prefetch: false },
@@ -29,11 +40,11 @@
         </div>
       </div>
 
-      <div class="col-span-2 flex items-center">
+      <div class="hidden lg:flex">
         <%= render "categories/badge", category: trade.category || trade_category %>
       </div>
 
-      <div class="col-span-2 justify-self-end font-medium text-sm">
+      <div class="shrink-0 col-span-4 lg:col-span-2 ml-auto text-right">
         <%= content_tag :p,
                     format_money(-entry.amount_money),
                     class: ["text-green-600": entry.amount.negative?] %>