fix: restore drawer positioning for transaction modals on desktop (#857) (#896)

* feat: Add responsive dialog behavior for transaction modals

Add responsive option to DS::Dialog component that switches between:
- Mobile (< 1024px): Modal style (centered) with inline close button
- Desktop (≥ 1024px): Drawer style (right side panel) with header close button
Update transaction, transfer, holding, trade, and valuation views to use
responsive behavior, maintaining mobile experience while reverting desktop
to drawer style like budget categories.

Changes:
- app/components/DS/dialog.rb: Add responsive parameter and helper methods
- app/components/DS/dialog.html.erb: Apply responsive styling
- app/views/*/show.html.erb: Add responsive: true and hide close icons on mobile

* fix: Enhance close button accessibility in dialog components

* fix: Refactor dialog component to improve close button handling and accessibility
This commit is contained in:
StalkerSea
2026-02-10 17:02:15 -06:00
committed by GitHub
parent 28d99a2b0d
commit 4cf25ada63
9 changed files with 71 additions and 136 deletions

View File

@@ -9,7 +9,6 @@
class: "bg-container border border-secondary font-medium rounded-lg px-3 py-2 text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0" %>
<% end %>
</div>
<% if sankey_data[:links].present? %>
<div class="w-full h-96">
<div
@@ -18,9 +17,8 @@
data-sankey-chart-currency-symbol-value="<%= sankey_data[:currency_symbol] %>"
class="w-full h-full"></div>
</div>
<%= render DS::Dialog.new(id: "cashflow-expanded-dialog", auto_open: false, width: "custom", disable_frame: true, content_class: "!w-[96vw] max-w-[1650px]", data: { action: "close->cashflow-expand#restore" }) do |dialog| %>
<% dialog.with_header(title: t("pages.dashboard.cashflow_sankey.title"), hide_close_icon: false) %>
<% dialog.with_header(title: t("pages.dashboard.cashflow_sankey.title")) %>
<% dialog.with_body do %>
<div class="w-full h-[85dvh] max-h-[90dvh] overflow-y-auto overscroll-contain">
<div
@@ -38,7 +36,6 @@
variant: :container,
icon: "activity" # cashflow placeholder icon
) %>
<p class="text-sm font-medium text-primary"><%= t("pages.dashboard.cashflow_sankey.no_data_title") %></p>
<p class="text-secondary text-sm"><%= t("pages.dashboard.cashflow_sankey.no_data_description") %></p>
<%= render DS::Link.new(