Add text-overflow: ellipsis property for account name display (#1431)

maybe-finance · Nov 7, 2024 · e434ed0 · e434ed0
1 parent 2722254
commit e434ed0
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/app/views/account/transactions/_transaction.html.erb b/app/views/account/transactions/_transaction.html.erb
@@ -47,7 +47,7 @@
     </div>
 
     <% unless show_balance %>
-      <%= tag.div class: "col-span-2" do %>
+      <%= tag.div class: "col-span-2 overflow-hidden truncate" do %>
         <% if entry.new_record? %>
           <%= tag.p account.name %>
         <% else %>

diff --git a/app/views/accounts/_account_list.html.erb b/app/views/accounts/_account_list.html.erb
@@ -33,8 +33,8 @@
       <% account_trend = account_value_node.series.trend %>
       <%= link_to account, class: "flex items-center w-full gap-3 px-3 py-2 mb-1 hover:bg-gray-100 rounded-[10px]" do %>
         <%= render "accounts/logo", account: account, size: "sm" %>
-        <div>
-          <p class="font-medium"><%= account_value_node.name %></p>
+        <div class="overflow-hidden">
+          <p class="font-medium truncate"><%= account_value_node.name %></p>
           <% if account.subtype %>
             <p class="text-xs text-gray-500"><%= account.subtype&.humanize %></p>
           <% end %>

diff --git a/app/views/accounts/show/_header.html.erb b/app/views/accounts/show/_header.html.erb
@@ -7,11 +7,11 @@
     <% if content.present? %>
       <%= content %>
     <% else %>
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-3 overflow-hidden">
         <%= render "accounts/logo", account: account %>
 
-        <div>
-          <h2 class="font-medium text-xl"><%= title || account.name %></h2>
+        <div class="truncate">
+          <h2 class="font-medium text-xl truncate"><%= title || account.name %></h2>
           <% if subtitle.present? %>
             <p class="text-sm text-gray-500"><%= subtitle %></p>
           <% end %>

diff --git a/app/views/pages/_account_group_disclosure.erb b/app/views/pages/_account_group_disclosure.erb
@@ -24,9 +24,9 @@
   <div class="px-4 py-3 space-y-4">
     <% accountable_group.children.map do |account_value_node| %>
       <div class="flex items-center justify-between text-sm font-medium text-gray-900">
-        <div class="flex items-center gap-4">
+        <div class="flex items-center gap-4 overflow-hidden">
           <%= render "accounts/logo", account: account_value_node.original, size: "sm" %>
-          <div>
+          <div class="truncate">
             <p><%= account_value_node.name %></p>
           </div>
         </div>

diff --git a/app/views/transactions/_form.html.erb b/app/views/transactions/_form.html.erb
@@ -10,9 +10,9 @@
     </fieldset>
   </section>
 
-  <section class="space-y-2">
+  <section class="space-y-2 overflow-hidden">
     <%= f.text_field :name, label: t(".description"), placeholder: t(".description_placeholder"), required: true %>
-    <%= f.collection_select :account_id, Current.family.accounts.alphabetically, :id, :name, { prompt: t(".account_prompt"), label: t(".account") }, required: true %>
+    <%= f.collection_select :account_id, Current.family.accounts.alphabetically, :id, :name, { prompt: t(".account_prompt"), label: t(".account") }, required: true, class: "form-field__input text-ellipsis" %>
     <%= f.money_field :amount, label: t(".amount"), required: true %>
     <%= f.hidden_field :entryable_type, value: "Account::Transaction" %>
     <%= f.fields_for :entryable do |ef| %>