diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 21a45d36b..2f919a1a2 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -12,9 +12,9 @@ column-gap: var(--inline-space); display: grid; grid-template-areas: - "qw notch-top we" + "notch-top notch-top notch-top" "actions-left card actions-right" - "er notch-bottom rt"; + "notch-bottom notch-bottom notch-bottom"; grid-template-columns: 48px minmax(0, 1120px) 48px; inline-size: fit-content; max-inline-size: 100%; @@ -92,11 +92,10 @@ column-gap: 0; grid-template-areas: - "notch-top notch-top" - "card card" - "actions-left actions-right" - "notch-bottom notch-bottom"; - grid-template-columns: 1fr 1fr; + "notch-top notch-top notch-top" + "card card card" + "actions-left notch-bottom actions-right"; + grid-template-columns: 1fr auto 1fr; inline-size: calc(100% + 2 * var(--padding-inline)); margin-inline: calc(-1 * var(--padding-inline)); max-inline-size: none; @@ -142,10 +141,8 @@ @media (max-width: 800px) { .card-perma__actions { display: flex; - inset-block-end: 0; padding-inline: var(--padding-inline); - position: absolute; - translate: 0 50%; + translate: 0 -50%; } .card-perma__actions--right { @@ -194,7 +191,11 @@ .card-perma__notch--bottom { grid-area: notch-bottom; - translate: 0 -25%; + + /* Translate the buttons instead of the container to allow for wrapping */ + .btn { + translate: 0 -50%; + } &:has([open]) { z-index: 1; @@ -216,13 +217,14 @@ --btn-color: var(--card-color); --btn-border-color: var(--color-container); } + + @media (max-width: 639px) { + flex-direction: column; + } } .card-perma__closure-message { color: var(--card-color); - - &:first-child { - padding-left: 1ch; - } + translate: 0 -100%; } } diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb index 7d5914a9a..8c07e2c64 100644 --- a/app/views/cards/container/_closure.html.erb +++ b/app/views/cards/container/_closure.html.erb @@ -20,15 +20,15 @@ <% end %> - - - <% if card.entropic? %> + <% if card.entropic? %> +
<% if card.doing? %> Falls back to Considering if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>. <% else %> Auto-closes if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>. <% end %> - <% end %> - +
+ <% end %> <% end %> +