sure/app/views/budgets/show.html.erb

<div class="pb-6 lg:pb-12">
  <%= render "budgets/budget_header",
            budget: @budget,
            previous_budget: @previous_budget,
            next_budget: @next_budget,
            latest_budget: @latest_budget %>

  <div class="space-y-4">
    <%# Top Section: Donut and Summary side by side %>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <%# Budget Donut %>
      <div class="min-h-[300px] bg-container rounded-xl shadow-border-xs p-8">
        <% if !@budget.initialized? && @source_budget.present? %>
          <%= render "budgets/copy_previous_prompt", budget: @budget, source_budget: @source_budget %>
        <% elsif @budget.initialized? && @budget.available_to_allocate.negative? %>
          <%= render "budgets/over_allocation_warning", budget: @budget %>
        <% else %>
          <%= render "budgets/budget_donut", budget: @budget %>
        <% end %>
      </div>

      <%# Actuals Summary %>
      <% if @budget.initialized? && @budget.available_to_allocate.positive? %>
        <%= render DS::Tabs.new(active_tab: params[:tab].presence || "budgeted") do |tabs| %>
          <% tabs.with_nav do |nav| %>
            <% nav.with_btn(id: "budgeted", label: t("budgets.show.tabs.budgeted")) %>
            <% nav.with_btn(id: "actuals", label: t("budgets.show.tabs.actual")) %>
          <% end %>

          <% tabs.with_panel(tab_id: "budgeted") do %>
            <div class="bg-container rounded-xl shadow-border-xs">
              <%= render "budgets/budgeted_summary", budget: @budget %>
            </div>
          <% end %>

          <% tabs.with_panel(tab_id: "actuals") do %>
            <div class="bg-container rounded-xl shadow-border-xs">
              <%= render "budgets/actuals_summary", budget: @budget %>
            </div>
          <% end %>
        <% end %>
      <% else %>
        <div class="bg-container rounded-xl shadow-border-xs">
          <%= render "budgets/actuals_summary", budget: @budget %>
        </div>
      <% end %>
    </div>

    <%# Bottom Section: Categories full width %>
    <% has_over_budget = budget_has_over_budget?(@budget) %>
    <%= content_tag :div,
      class: "w-full bg-container rounded-xl shadow-border-xs p-4",
      data: (has_over_budget ? { controller: "budget-filter" } : {}) do %>
      <div class="flex items-center mb-4 flex-nowrap">
        <h2 class="text-lg font-medium shrink-0">
          <%= t("budgets.show.categories.title") %>
        </h2>

        <% if has_over_budget %>
        <div class="flex-1 min-w-0 px-1">
          <div class="w-full flex justify-center">
            <div class="max-w-full overflow-x-auto no-scrollbar">
              <div class="inline-flex whitespace-nowrap bg-container-inset rounded-lg p-1 text-sm font-medium gap-0.5">

                <button
                  data-action="click->budget-filter#setFilter"
                  data-budget-filter-filter-param="all"
                  data-budget-filter-target="tab"
                  class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 bg-white theme-dark:bg-gray-700 text-primary shadow-sm">
                  <%= t("budgets.show.filter.all") %>
                </button>

                <button
                  data-action="click->budget-filter#setFilter"
                  data-budget-filter-filter-param="over_budget"
                  data-budget-filter-target="tab"
                  class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
                  <%= t("budgets.show.filter.over_budget") %>
                </button>

                <button
                  data-action="click->budget-filter#setFilter"
                  data-budget-filter-filter-param="on_track"
                  data-budget-filter-target="tab"
                  class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
                  <%= t("budgets.show.filter.on_track") %>
                </button>

              </div>
            </div>
          </div>
        </div>
        <% end %>

        <div class="<%= has_over_budget ? "shrink-0 flex justify-end whitespace-nowrap" : "ml-auto" %>">
          <% if @budget.initialized? %>
            <%= render DS::Link.new(
              text: t("budgets.show.categories.edit"),
              variant: "secondary",
              icon: "settings-2",
              href: budget_budget_categories_path(@budget)
            ) %>
          <% end %>
        </div>
      </div>

      <%= render "budgets/budget_categories", budget: @budget %>
    <% end %>
  </div>
</div>