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>

app/views/categories/_badge.html.erb

@@ -1,8 +1,8 @@
 <%# locals: (category:) %>
 <% category ||= Category.uncategorized %>
 
-<div class="min-w-0">
-  <span class="flex max-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"
+<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);

app/views/categories/_menu.html.erb

@@ -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">

app/views/transactions/_transaction.html.erb

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

app/views/transactions/_transaction_category.html.erb

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

test/controllers/accounts_controller_test.rb

@@ -37,6 +37,31 @@ class AccountsControllerTest < ActionDispatch::IntegrationTest
     assert_select "a[href*='page=2'][href*='tab=holdings']", count: 0
   end
 
+  test "account activity constrains long category labels before the amount on wide screens" do
+    category = categories(:food_and_drink)
+    category.update!(name: "Super Long Category Name That Should Stop Before The Amount On Wide Screens Too")
+
+    entry = @account.entries.create!(
+      name: "Wide category verification",
+      date: Date.current,
+      amount: 187.65,
+      currency: @account.currency,
+      entryable: Transaction.new(category: category)
+    )
+
+    get account_url(@account, tab: "activity")
+
+    assert_response :success
+    assert_select "##{dom_id(entry.entryable, "category_menu_desktop")}"
+    assert_select "##{dom_id(entry.entryable, "category_menu_desktop")}.min-w-0"
+    assert_select "##{dom_id(entry.entryable, "category_menu_desktop")}.overflow-hidden"
+    assert_select "##{dom_id(entry.entryable, "category_menu_desktop")} button.block"
+    assert_select "##{dom_id(entry.entryable, "category_menu_desktop")} button.w-full"
+    assert_select "##{dom_id(entry.entryable, "category_menu_desktop")} button.overflow-hidden"
+    assert_select "##{dom_id(entry.entryable, "category_menu_desktop")} [data-testid='category-name']"
+    assert_select "div.hidden.md\\:flex.min-w-0"
+  end
+
   test "should sync account" do
     post sync_account_url(@account)
     assert_redirected_to account_url(@account)

test/system/account_activity_test.rb

@@ -65,4 +65,42 @@ class AccountActivityTest < ApplicationSystemTestCase
     assert_operator amount_rect.x + amount_rect.width, :<=, row_rect.x + row_rect.width
     assert_operator page_scroll_width, :<=, viewport_width
   end
+
+  test "account activity keeps long category names from overlapping the amount on wide screens" do
+    category = categories(:food_and_drink)
+    category.update!(name: "Super Long Category Name That Should Stop Before The Amount On Wide Screens Too")
+
+    page.current_window.resize_to(1280, 900)
+
+    visit account_url(@account, tab: "activity")
+
+    metrics = page.evaluate_script(<<~JS)
+      (() => {
+        const row = document.getElementById("#{dom_id(@transaction_entry)}");
+        const categoryButton = row.querySelector("##{dom_id(@transaction_entry.entryable, "category_menu_desktop")} button");
+        const categoryName = categoryButton.querySelector("[data-testid='category-name']");
+        const amount = row.querySelector(".privacy-sensitive");
+        const categoryRect = categoryButton.getBoundingClientRect();
+        const amountRect = amount.getBoundingClientRect();
+
+        return {
+          categoryRight: categoryRect.right,
+          amountLeft: amountRect.left,
+          categoryOverflow: categoryName.scrollWidth > categoryName.clientWidth
+        };
+      })()
+    JS
+
+    assert_operator metrics["categoryRight"], :<=, metrics["amountLeft"]
+    assert metrics["categoryOverflow"]
+  end
+
+  private
+    def ensure_tailwind_build
+      return if self.class.instance_variable_defined?(:@tailwind_css_built)
+
+      system({ "RAILS_ENV" => "test" }, "bin/rails", "tailwindcss:build", exception: true)
+      self.class.instance_variable_set(:@tailwind_css_built, true)
+    end
+
 end