fix(splits): let category selector size to its content instead of clipping names (#2962)

* fix(splits): let category selector size to its content instead of clipping names

- Replace the fixed md:w-44 column with flex-initial + md:min-w-44/md:max-w-72
  so the button grows with the selected category name
- Truncate the badge label in an inner span with a native title tooltip and a
  max-w-64 cap, keeping the color dot from shrinking
- Widen the dropdown to md:w-80 so option badges stay readable
- select_controller: stop forcing the menu width to 100% inline (the markup's
  width classes now decide) and anchor the menu to the button's right edge
  when it would overflow the scroll container

Fixes #2934

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* refactor(splits): render category badges via DS::Pill

- Options render the canonical categories/badge partial; the button renders
  the same DS::Pill directly (a button only allows phrasing content, so the
  partial's div wrapper stays out). category_badge_select's clone selector
  follows the pill markup.
- The client-side row template in split_transaction_controller gets the same
  md:min-w-28 name-field floor as the server-rendered rows.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

app/javascript/controllers/split_transaction_controller.js

@@ -71,7 +71,7 @@ export default class extends Controller {
 
     row.innerHTML = `
       <div class="flex flex-wrap md:flex-nowrap items-end gap-2">
-        <div class="w-full md:flex-1 md:w-auto min-w-0">
+        <div class="w-full md:flex-1 md:w-auto min-w-0 md:min-w-28">
           <label class="text-xs font-medium text-secondary uppercase tracking-wide block mb-1">Name</label>
           <input type="text"
                  name="split[splits][${index}][name]"