eliott/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure synced 2026-04-25 17:15:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Prevent long category labels from overflowing or crowding adjacent controls (#1498)

Browse Source 
* Initial plan

* Fix category delete dialog dropdown overflow

Agent-Logs-Url: https://github.com/we-promise/sure/sessions/200da7a4-fd59-4ae4-a709-f631ccf21e8c

Co-authored-by: jjmata <187772+jjmata@users.noreply.github.com>

* Tighten category deletion regression test

Agent-Logs-Url: https://github.com/we-promise/sure/sessions/200da7a4-fd59-4ae4-a709-f631ccf21e8c

Co-authored-by: jjmata <187772+jjmata@users.noreply.github.com>

* Fix deletion button text overflow

Agent-Logs-Url: https://github.com/we-promise/sure/sessions/e802e01f-079e-4322-ba03-b222ab5d4b84

Co-authored-by: jjmata <187772+jjmata@users.noreply.github.com>

* Preserve category menu spacing on mobile

Agent-Logs-Url: https://github.com/we-promise/sure/sessions/74b5dd1e-7935-4356-806a-759bff911930

Co-authored-by: jjmata <187772+jjmata@users.noreply.github.com>

* Prevent account activity label overlap on mobile

Agent-Logs-Url: https://github.com/we-promise/sure/sessions/e94027d6-e230-44c8-99a1-6e5645bec82b

Co-authored-by: jjmata <187772+jjmata@users.noreply.github.com>

* Fix wide account activity category overflow

Agent-Logs-Url: https://github.com/we-promise/sure/sessions/4ad79894-2935-47a3-8d37-037e2bd14376

Co-authored-by: jjmata <187772+jjmata@users.noreply.github.com>

* Linter

* Fix flaky system tests in CI

Agent-Logs-Url: https://github.com/we-promise/sure/sessions/3507447f-363f-4759-807c-c62a2858d270

Co-authored-by: jjmata <187772+jjmata@users.noreply.github.com>

* Reset system test viewport between tests

Agent-Logs-Url: https://github.com/we-promise/sure/sessions/357a43b1-11c5-49be-972d-0592a37d97b1

Co-authored-by: jjmata <187772+jjmata@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jjmata <187772+jjmata@users.noreply.github.com>
Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
This commit is contained in:
Copilot
2026-04-19 18:40:50 +02:00
committed by GitHub
parent 7f17fbf6da
commit 3199c9b76d
16 changed files with 166 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/DS/button.html.erb
View File

@@ -4,7 +4,7 @@
<% end %>
<% unless icon_only? %>
<%= text %>
<span class="min-w-0 truncate"><%= text %></span>
<% end %>
<% if icon && icon_position == :right %>

10
app/views/categories/_badge.html.erb
View File

@@ -1,15 +1,17 @@
<%# locals: (category:) %>
<% category ||= Category.uncategorized %>
<div>
<span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border truncate focus-visible:outline-none focus-visible:ring-0"
<div class="min-w-0 w-full">
<span class="flex w-full items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border focus-visible:outline-none focus-visible:ring-0"
style="
background-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
border-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
color: <%= category.color %>;">
<% if category.lucide_icon.present? %>
<%= icon category.lucide_icon, size: "sm", color: "current" %>
<span class="shrink-0">
<%= icon category.lucide_icon, size: "sm", color: "current" %>
</span>
<% end %>
<%= category.name %>
<span class="min-w-0 flex-1 truncate" data-testid="category-name"><%= category.name %></span>
</span>
</div>

6
app/views/categories/_category.html.erb
View File

@@ -1,7 +1,7 @@
<%# locals: (category:) %>
<div id="<%= dom_id(category) %>" class="flex justify-between items-center px-4 pb-4 <%= "pt-4" unless category.subcategory? %> <%= "pb-4" unless category.subcategories.any? %> bg-container">
<div class="flex w-full items-center gap-2.5">
<div id="<%= dom_id(category) %>" class="flex items-center gap-3 px-4 pb-4 <%= "pt-4" unless category.subcategory? %> <%= "pb-4" unless category.subcategories.any? %> bg-container">
<div class="flex min-w-0 flex-1 items-center gap-2.5" data-testid="category-content">
<% if category.subcategory? %>
<span style="color: <%= category.color %>">
<%= icon "corner-down-right", size: "sm", color: "current", class: "ml-2" %>
@@ -11,7 +11,7 @@
<%= render partial: "categories/badge", locals: { category: category } %>
</div>
<div class="justify-self-end">
<div class="shrink-0" data-testid="category-actions">
<%= render DS::Menu.new do |menu| %>
<% menu.with_item(variant: "link", text: t(".edit"), icon: "pencil", href: edit_category_path(category), data: { turbo_frame: :modal }) %>

2
app/views/categories/_category_name_mobile.html.erb
View File

@@ -1,4 +1,4 @@
<span id="category_name_mobile_<%= transaction.id %>" class="text-secondary lg:hidden">
<span id="category_name_mobile_<%= transaction.id %>" class="text-secondary lg:hidden min-w-0 truncate">
<% if transaction.transfer&.categorizable? || transaction.transfer.nil? %>
<%= transaction.category&.name || Category.uncategorized.name %>
<% else %>

4
app/views/categories/_menu.html.erb
View File

@@ -1,8 +1,8 @@
<%# locals: (transaction:) %>
<%= render DS::Menu.new(variant: "button") do |menu| %>
<% menu.with_button do %>
<div class="hidden lg:flex">
<% menu.with_button(class: "block w-full overflow-hidden") do %>
<div class="hidden min-w-0 w-full lg:flex">
<%= render partial: "categories/badge", locals: { category: transaction.category } %>
</div>
<div class="flex lg:hidden">

6
app/views/transactions/_transaction.html.erb
View File

@@ -144,10 +144,10 @@
data: { turbo_frame: "_top" },
class: "hover:underline" %>
</span>
<div class="flex items-center gap-1 truncate">
<div class="flex min-w-0 items-center gap-1">
<%= render "categories/category_name_mobile", transaction: transaction %>
<% if transaction.merchant&.present? %>
<span class="lg:hidden truncate">• <%= transaction.merchant.name %></span>
<span class="lg:hidden min-w-0 truncate">• <%= transaction.merchant.name %></span>
<% end %>
</div>
<% end %>
@@ -158,7 +158,7 @@
</div>
</div>
<div class="hidden md:flex items-center gap-1 col-span-2">
<div class="hidden md:flex min-w-0 items-center gap-1 col-span-2">
<% if entry.account.investment? && !transaction.transfer? %>
<%# For investment accounts, show activity label instead of category %>
<%= render "investment_activity/quick_edit_badge", entry: entry, entryable: transaction %>

2
app/views/transactions/_transaction_category.html.erb
View File

@@ -1,6 +1,6 @@
<%# locals: (transaction:, variant:) %>
<div id="<%= dom_id(transaction, "category_menu_#{variant}") %>">
<div id="<%= dom_id(transaction, "category_menu_#{variant}") %>" class="min-w-0 overflow-hidden">
<% if transaction.transfer&.categorizable? || transaction.transfer.nil? %>
<%= render "categories/menu", transaction: transaction %>
<% else %>