mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 05:24:57 +00:00
fix(design-system): DS::Disclosure :default variant summary_content layout (#1929)
PRs #1855, #1857, #1858 (DS::Disclosure :card/:card_inset/:inline variants) introduced a `<div class="w-full">` wrapper around `summary_content`. The wrapper is required for non-default variants — their `<summary>` is `display: list-item` (no flex), so a caller's inner flex+justify-between div would shrink-wrap to content width. But for the `:default` variant, `<summary>` is already `flex items-center justify-between`. Wrapping caller siblings in a single `w-full` block collapses them into one flex child, killing the justify-between distribution. This regressed the only default-variant summary_content caller — `accounts/_accountable_group.html.erb` (the homepage account sidebar) — where the group name and total/sparkline divs no longer aligned across the row. Render `summary_content` bare for `:default` (summary is the flex container) and keep the `w-full` wrapper for `:card`, `:card_inset`, `:inline`.
This commit is contained in:
committed by
GitHub
parent
e15349d57e
commit
c8b1d8cf92
@@ -1,13 +1,21 @@
|
||||
<%= tag.details class: details_classes, open: open, **details_opts do %>
|
||||
<%= tag.summary class: summary_classes do %>
|
||||
<% if summary_content? %>
|
||||
<%# `<summary>` is `display: list-item`, so a flex inner div would
|
||||
shrink-wrap to content width and any `justify-between` inside
|
||||
the slot has nothing to distribute. Wrap in a `w-full` block
|
||||
so caller-supplied flex rows stretch across the card. %>
|
||||
<div class="w-full">
|
||||
<% if variant == :default %>
|
||||
<%# `:default` summary is already `flex justify-between`, so
|
||||
caller-provided sibling divs get distributed directly.
|
||||
Wrapping would collapse them into a single flex child and
|
||||
kill the justify-between distribution. %>
|
||||
<%= summary_content %>
|
||||
</div>
|
||||
<% else %>
|
||||
<%# Non-default summaries are `list-item` (no flex), so a flex
|
||||
caller div would shrink-wrap to content width and any
|
||||
`justify-between` inside has nothing to distribute. Wrap
|
||||
in `w-full` so caller flex rows stretch across the card. %>
|
||||
<div class="w-full">
|
||||
<%= summary_content %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="flex items-center gap-3">
|
||||
<% if align == :left %>
|
||||
|
||||
Reference in New Issue
Block a user