fix(categories): keep durations readable for long names

[TimeToBuildBob]

Summary

• replace the floated duration in CategoryTree with a two-column flex row
• let long category labels wrap inside the left column while keeping the duration pinned in a no-wrap right column
• preserve the existing expand/collapse behavior and indentation

Root cause

CategoryTree rendered the category label inline and floated the duration to the right. When a category name got long enough, the float could drop onto the next line and visually mix with the next row.

Validation

• npm run lint -- src/visualizations/CategoryTree.vue
• npm run build

Closes #842.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 34.38%. Comparing base (be8e249) to head (84a729b).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #843   +/-   ##
=======================================
  Coverage   34.38%   34.38%           
=======================================
  Files          36       36           
  Lines        2114     2114           
  Branches      403      386   -17     
=======================================
  Hits          727      727           
- Misses       1308     1366   +58     
+ Partials       79       21   -58     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[greptile-apps]

Greptile Summary

This PR fixes a visual bug in CategoryTree where long category names would cause the floated duration span to drop to the next line and visually collide with the row below. The fix replaces the float approach with a flex two-column layout: a growing left column for the indented icon + label, and a no-wrap right column pinned to the right for the duration value.

• The outer row div becomes a display: flex; justify-content: space-between container; the label column (flex: 1 1 auto; min-width: 0) can wrap freely using overflow-wrap: anywhere, while the value column (flex: 0 0 auto; white-space: nowrap) always stays pinned to the right.
• No JavaScript or component logic is changed; only the template structure (a span promoted to div.category-label for proper flex semantics) and scoped CSS are modified.

Confidence Score: 5/5

Safe to merge — the change is a self-contained CSS/template layout fix with no logic, data, or behavioral changes.

Only the template structure and scoped CSS are touched. The flex layout correctly constrains the label column while pinning the duration column, overflow-wrap: anywhere plus min-width: 0 on the label is a well-established pattern for wrapping flex children, and the existing click/expand logic is untouched. No regressions are introduced.

No files require special attention.

Important Files Changed

Filename	Overview
src/visualizations/CategoryTree.vue	Template and CSS-only change: replaces float-right duration span with a flex two-column layout to prevent long category names from pushing the duration onto the next row. No JavaScript logic touched.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    ROW["div.px-1.category-row\n(flex row, space-between)"]
    ROW --> LABEL["div.category-label\n(flex: 1 1 auto, min-width:0)\npadding-left: 1.4 * depth em"]
    ROW --> VALUE["span.category-value\n(flex: 0 0 auto, no-wrap)\nduration / percentage"]
    LABEL --> ICON_EXP["span (v-if children > 0)\nexpand/collapse icon"]
    LABEL --> ICON_LEAF["span (v-else)\ncircle icon"]
    LABEL --> TITLE["span.category-title\n(min-width:0, overflow-wrap:anywhere)\ncat.subname — wraps freely"]

Loading

_{Reviews (1): Last reviewed commit: "fix(categories): keep durations readable..." | Re-trigger Greptile}

[TimeToBuildBob]

@0xbrayo CI is green and Greptile came back clean on this one.

I tried to self-merge, but this account does not have merge permission on ActivityWatch/aw-webui, so it is ready for maintainer review/merge.

[0xbrayo]

Works