Improve spending chart mobile layout (#3435)

* Improve spending chart mobile layout

- Name the compared month ("August 2026") instead of the generic
  "Previous month" label that truncated on narrow viewports
- Keep the signed delta on one line: nowrap amounts, wrap as a unit
- On mobile widths, label x-axis ticks for the selected month only so a
  longer previous month's tail tick ("Aug 31") doesn't read like a bug
- Show a compact date range ("Sep 01 - 6, 2026") on narrow viewports

* Compute comparison label and compact date range in the controller

Addresses review on #3435: moves previous_label and date_range_short out
of the partial into build_spending_trend_data, and puts the single-day
compact range behind its own i18n key instead of a hard-coded format.

* Revert accidental local-env ruby version bump

.ruby-version and Gemfile.lock were swept into the previous commit by a
git add -A from the local verification sandbox (3.4.10 vs the repo's
pinned 3.4.9, which setup-ruby cannot provision on ubuntu-24.04).

* Use the controller t() helper for compact date range translations

Project convention is t() over I18n.t for user-facing strings in
controllers (CodeRabbit review on #3435).

* Don't over-explain in comments

app/javascript/controllers/spending_chart_controller.js

@@ -48,6 +48,7 @@ export default class extends Controller {
     const height = this.element.clientHeight;
     const {
       days = 30,
+      current_days: currentDays = days,
       axis_labels: axisLabels = [],
       current = [],
       previous = [],
@@ -84,7 +85,7 @@ export default class extends Controller {
       .range([innerHeight, 0]);
 
     this._drawGridlines(group, y, innerWidth, innerHeight);
-    this._drawXAxis(group, x, days, innerHeight, axisLabels);
+    this._drawXAxis(group, x, days, innerHeight, axisLabels, currentDays);
 
     const line = d3
       .line()
@@ -171,8 +172,10 @@ export default class extends Controller {
       .style("font-weight", "500");
   }
 
-  _drawXAxis(group, x, days, innerHeight, axisLabels) {
-    const tickDays = [...new Set([1, Math.round((1 + days) / 2), days])];
+  _drawXAxis(group, x, days, innerHeight, axisLabels, currentDays = days) {
+    const mobile = !window.matchMedia("(min-width: 640px)").matches;
+    const span = mobile ? Math.min(days, currentDays) : days;
+    const tickDays = [...new Set([1, Math.round((1 + span) / 2), span])];
 
     group
       .append("g")