Align bottom notch when no closure message exists

This commit is contained in:
Andy Smith
2025-08-20 15:54:53 -05:00
parent 5c819dbe88
commit 95a2c1646a
2 changed files with 18 additions and 18 deletions
+8 -8
View File
@@ -12,9 +12,10 @@
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"
"closure-message closure-message closure-message";
grid-template-columns: 48px minmax(0, 1120px) 48px;
inline-size: fit-content;
max-inline-size: 100%;
@@ -95,7 +96,8 @@
"notch-top notch-top"
"card card"
"actions-left actions-right"
"notch-bottom notch-bottom";
"notch-bottom notch-bottom"
"closure-message closure-message";
grid-template-columns: 1fr 1fr;
inline-size: calc(100% + 2 * var(--padding-inline));
margin-inline: calc(-1 * var(--padding-inline));
@@ -194,7 +196,7 @@
.card-perma__notch--bottom {
grid-area: notch-bottom;
translate: 0 -25%;
translate: 0 -50%;
&:has([open]) {
z-index: 1;
@@ -220,9 +222,7 @@
.card-perma__closure-message {
color: var(--card-color);
&:first-child {
padding-left: 1ch;
}
grid-area: closure-message;
translate: 0 -50%;
}
}
+10 -10
View File
@@ -20,15 +20,15 @@
<% end %>
</div>
</details>
<span class="card-perma__closure-message">
<% if card.entropic? %>
<% if card.doing? %>
Falls back to <em>Considering</em> 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 %>
</span>
<% end %>
</div>
<div class="card-perma__closure-message">
<% if card.entropic? %>
<% if card.doing? %>
Falls back to <em>Considering</em> 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 %>
</div>