Add responsive resize handling to chart controllers and update HTML structure

- Implemented resize listeners in various chart controllers to enhance responsiveness on window resize.
- Added debounce functionality to optimize performance during resize events.
- Updated SVG attributes in chart rendering for better responsiveness.
- Refactored HTML structure in retirement calculator views for improved layout and styling.

Author: Shpigford

.gitignore

@@ -75,3 +75,4 @@ scripts/
 tasks.json
 /tasks/
 .cursor/mcp.json
+CLAUDE.md

app/avo/resources/redirect.rb

@@ -0,0 +1,25 @@
+class Avo::Resources::Redirect < Avo::BaseResource
+  self.title = :source_path
+  self.includes = []
+  self.search = {
+    query: -> { query.ransack(source_path_cont: params[:q], destination_path_cont: params[:q], m: "or").result(distinct: false) }
+  }
+
+  def fields
+    field :id, as: :id, hide_on: [ :new, :edit ]
+
+    field :source_path, as: :text, required: true, help: "Examples: /old-page, /blog/*, ^/article/(\\d+)"
+    field :destination_path, as: :text, required: true, help: "Examples: /new-page, /posts, /posts/\\1 (for regex capture)"
+
+    field :redirect_type, as: :select, required: true, options: Redirect::REDIRECT_TYPES.map { |type| [ type.humanize, type ] }
+
+    field :pattern_type, as: :select, required: true, options: Redirect::PATTERN_TYPES.map { |type| [ type.humanize, type ] }
+
+    field :active, as: :boolean, required: true
+    field :priority, as: :number, required: true, help: "Lower numbers have higher priority"
+
+    field :created_at, as: :date_time, hide_on: [ :new, :edit ]
+    field :updated_at, as: :date_time, hide_on: [ :new, :edit ]
+  end
+
+end

app/controllers/application_controller.rb

@@ -1,5 +1,6 @@
 class ApplicationController < ActionController::Base
   include SentryContext
+  include Redirectable
 
   # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
   # allow_browser versions: :modern

app/controllers/avo/redirects_controller.rb

@@ -0,0 +1,4 @@
+# This controller has been generated to enable Rails' resource routes.
+# More information on https://docs.avohq.io/3.0/controllers.html
+class Avo::RedirectsController < Avo::ResourcesController
+end

app/controllers/concerns/redirectable.rb

@@ -0,0 +1,26 @@
+module Redirectable
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :check_for_redirects
+  end
+
+  private
+
+  def check_for_redirects
+    return if request.post? || request.patch? || request.put? || request.delete?
+
+    redirect_rule = find_matching_redirect(request.path)
+
+    if redirect_rule
+      destination = redirect_rule.process_destination(request.path)
+      redirect_to destination, status: redirect_rule.status_code
+    end
+  end
+
+  def find_matching_redirect(request_path)
+    Redirect.active.by_priority.find do |redirect|
+      redirect.matches_path?(request_path)
+    end
+  end
+end

app/controllers/redirects_controller.rb

@@ -0,0 +1,22 @@
+class RedirectsController < ApplicationController
+  skip_before_action :check_for_redirects
+
+  def catch_all
+    redirect_rule = find_matching_redirect(request.path)
+
+    if redirect_rule
+      destination = redirect_rule.process_destination(request.path)
+      redirect_to destination, status: redirect_rule.status_code
+    else
+      render file: Rails.root.join("public", "404.html"), status: :not_found, layout: false
+    end
+  end
+
+  private
+
+  def find_matching_redirect(request_path)
+    Redirect.active.by_priority.find do |redirect|
+      redirect.matches_path?(request_path)
+    end
+  end
+end

app/javascript/controllers/stack_bar_chart_controller.js

@@ -8,6 +8,7 @@ export default class extends Controller {
 
   #data = [];
   #isMobile = window.innerWidth <= 768;
+  #resizeHandler = null;
 
   dataValueChanged(value) {
     this.#data = value;
@@ -16,21 +17,57 @@ export default class extends Controller {
 
   connect() {
     this.#drawChart();
+    this.#addResizeListener();
+  }
+
+  disconnect() {
+    this.#removeResizeListener();
+  }
+
+  #addResizeListener() {
+    this.#resizeHandler = this.#debounce(() => {
+      this.#isMobile = window.innerWidth <= 768;
+      this.#drawChart();
+    }, 250);
+    window.addEventListener('resize', this.#resizeHandler);
+  }
+
+  #removeResizeListener() {
+    if (this.#resizeHandler) {
+      window.removeEventListener('resize', this.#resizeHandler);
+    }
+  }
+
+  #debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
   }
 
   #drawChart() {
     const data = this.#data.segments;
     const desiredHomePrice = this.#data.desiredHomePrice;
 
+    // Use container width instead of fixed widths
+    const containerWidth = this.element.clientWidth || 320;
     const margin = this.#isMobile ? { top: 20, right: 10, bottom: 40, left: 10 } : { top: 20, right: 30, bottom: 40, left: 50 };
-    const width = (this.#isMobile ? 350 : 600) - margin.left - margin.right;
+    const width = Math.max(280, containerWidth - margin.left - margin.right);
     const height = 400 - margin.top - margin.bottom;
 
     const svg = d3.select(this.element)
       .html("")
       .append("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
+      .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`)
+      .style("max-width", "100%")
+      .style("height", "auto")
       .append("g")
       .attr("transform", `translate(${margin.left},${margin.top})`);
 

app/javascript/controllers/time_series_bar_chart_controller.js

@@ -11,14 +11,17 @@ export default class extends Controller {
   #d3GroupMemo = null;
   #d3SvgMemo = null;
   #data = [];
+  #resizeHandler = null;
 
   connect() {
     this.#install();
+    this.#addResizeListener();
     document.addEventListener("turbo:load", this.#reinstall);
   }
 
   disconnect() {
     this.#teardown();
+    this.#removeResizeListener();
     document.removeEventListener("turbo:load", this.#reinstall);
   }
 
@@ -46,6 +49,31 @@ export default class extends Controller {
     this.#installTooltip();
   }
 
+  #addResizeListener() {
+    this.#resizeHandler = this.#debounce(() => {
+      this.#reinstall();
+    }, 250);
+    window.addEventListener('resize', this.#resizeHandler);
+  }
+
+  #removeResizeListener() {
+    if (this.#resizeHandler) {
+      window.removeEventListener('resize', this.#resizeHandler);
+    }
+  }
+
+  #debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  }
+
   // Normalize data when it is set
   dataValueChanged(value) {
     this.#data = value.map(d => ({
@@ -311,7 +339,9 @@ export default class extends Controller {
       .append("svg")
       .attr("width", this.#initialElementWidth)
       .attr("height", this.#initialElementHeight)
-      .attr("viewBox", [ 0, 0, this.#initialElementWidth, this.#initialElementHeight ]);
+      .attr("viewBox", [ 0, 0, this.#initialElementWidth, this.#initialElementHeight ])
+      .style("max-width", "100%")
+      .style("height", "auto");
 
     this.#d3SvgMemo.append("defs")
       .append("clipPath")

app/javascript/controllers/time_series_bogleheads_growth_chart_controller.js

@@ -12,6 +12,7 @@ export default class extends Controller {
 
   #initialElementWidth = 0;
   #initialElementHeight = 0;
+  #resizeHandler = null;
 
   connect() {
     console.log(this.showLegendValue, this.values);
@@ -25,6 +26,57 @@ export default class extends Controller {
       this.#drawLegend();
     }
     this.#installTooltip();
+    this.#addResizeListener();
+  }
+
+  disconnect() {
+    this.#removeResizeListener();
+  }
+
+  #redrawChart() {
+    this.#clearChart();
+    this.#rememberInitialElementSize();
+    this.#drawGridlines();
+    this.#drawBogleheadsGrowthChart();
+    if (this.useLabelsValue) {
+      this.#drawXAxis();
+    }
+    if (this.showLegendValue) {
+      this.#drawLegend();
+    }
+    this.#installTooltip();
+  }
+
+  #clearChart() {
+    this.#d3TooltipMemo = null;
+    this.#d3GroupMemo = null;
+    this.#d3SvgMemo = null;
+    this.#d3Element.selectAll("*").remove();
+  }
+
+  #addResizeListener() {
+    this.#resizeHandler = this.#debounce(() => {
+      this.#redrawChart();
+    }, 250);
+    window.addEventListener('resize', this.#resizeHandler);
+  }
+
+  #removeResizeListener() {
+    if (this.#resizeHandler) {
+      window.removeEventListener('resize', this.#resizeHandler);
+    }
+  }
+
+  #debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
   }
 
   // Normalize data when it is set
@@ -352,7 +404,9 @@ export default class extends Controller {
       .append("svg")
       .attr("width", this.#initialElementWidth)
       .attr("height", this.#initialElementHeight)
-      .attr("viewBox", [0, 0, this.#initialElementWidth, this.#initialElementHeight]);
+      .attr("viewBox", [0, 0, this.#initialElementWidth, this.#initialElementHeight])
+      .style("max-width", "100%")
+      .style("height", "auto");
 
     this.#d3SvgMemo.append("defs")
       .append("clipPath")

app/javascript/controllers/time_series_exchange_rate_chart_controller.js

@@ -11,6 +11,7 @@ export default class extends Controller {
 
   #initialElementWidth = 0;
   #initialElementHeight = 0;
+  #resizeHandler = null;
 
   connect() {
     this.#rememberInitialElementSize();
@@ -20,6 +21,54 @@ export default class extends Controller {
     this.#drawXAxis();
     this.#installTooltip();
     this.hideLoading();
+    this.#addResizeListener();
+  }
+
+  disconnect() {
+    this.#removeResizeListener();
+  }
+
+  #redrawChart() {
+    this.#clearChart();
+    this.#rememberInitialElementSize();
+    this.showLoading();
+    this.#drawGridlines();
+    this.#drawChart();
+    this.#drawXAxis();
+    this.#installTooltip();
+    this.hideLoading();
+  }
+
+  #clearChart() {
+    this.#d3TooltipMemo = null;
+    this.#d3GroupMemo = null;
+    this.#d3SvgMemo = null;
+    this.#d3Element.selectAll("*").remove();
+  }
+
+  #addResizeListener() {
+    this.#resizeHandler = this.#debounce(() => {
+      this.#redrawChart();
+    }, 250);
+    window.addEventListener('resize', this.#resizeHandler);
+  }
+
+  #removeResizeListener() {
+    if (this.#resizeHandler) {
+      window.removeEventListener('resize', this.#resizeHandler);
+    }
+  }
+
+  #debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
   }
 
   showLoading() {
@@ -254,7 +303,9 @@ export default class extends Controller {
       .append("svg")
       .attr("width", this.#initialElementWidth)
       .attr("height", this.#initialElementHeight)
-      .attr("viewBox", [0, 0, this.#initialElementWidth, this.#initialElementHeight]);
+      .attr("viewBox", [0, 0, this.#initialElementWidth, this.#initialElementHeight])
+      .style("max-width", "100%")
+      .style("height", "auto");
   }
 
   get #d3Element() {