diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 240dadb4b..3ebbe09ce 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -292,10 +292,7 @@ /* Overlap the card BG by half the button height */ &:has(.btn) { - &, - ~ .card-perma__closure-message { - translate: 0 calc(-1 * var(--half-btn-height)); - } + translate: 0 -50%; } form { @@ -341,7 +338,19 @@ .card-perma__closure-message { color: var(--card-color); grid-area: closure-message; - margin-block-start: 0.5ch; + margin-block: var(--block-space) var(--block-space-double); padding-inline: 1ch; + + @media (max-width: 799px) { + margin-block: var(--block-space-half); + translate: 0 calc(-0.5 * var(--half-btn-height)); + } + + @media (min-width: 800px) { + .card-perma__notch--bottom:has(.btn) ~ & { + margin-block: var(--block-space-half) var(--block-space); + translate: 0 calc(-0.5 * var(--half-btn-height)); + } + } } } diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css index d79c2627f..1158c7de9 100644 --- a/app/assets/stylesheets/native.css +++ b/app/assets/stylesheets/native.css @@ -35,6 +35,15 @@ margin-block-start: 0; } + .card-perma__bg { + padding-block: clamp(0.25rem, 2vw, var(--padding-block)); + } + + .card-perma__closure-message { + margin-block: var(--block-space); + translate: unset; + } + /* Search /* ------------------------------------------------------------------------ */ diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb index 09b7a4ef4..1afbaaaac 100644 --- a/app/views/cards/container/_closure.html.erb +++ b/app/views/cards/container/_closure.html.erb @@ -1,15 +1,13 @@
<% if card.closed? %> -
-
- Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>. - <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %> - Undo - <% end %> -
+
+ Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>. + <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %> + Undo + <% end %>
<% else %> -
+
<%= render "cards/container/closure_buttons", card: card %>
<% if card.entropic? && card.open? && !card.postponed? %>