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
This commit is contained in:
Alessio Cappa
2026-01-15 10:32:52 +01:00
committed by GitHub
parent 3f62e84531
commit a50c48d3cf
2 changed files with 42 additions and 27 deletions

View File

@@ -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?] %>