diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 68d0cb2db..0d10762a4 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -38,20 +38,6 @@ &:has(.card__closed) { padding-block-start: 2rem; } - - &:has(.reactions .reaction) { - .card__meta-avatars--assignees { - margin-inline-end: unset; - } - } - - &:not(:has(.reactions .reaction)) { - &:has(.card__closed) { - .card__meta-text--assignees { - margin-inline-end: calc(var(--btn-size) + var(--meta-spacer-block)); - } - } - } } @media (max-width: 799px) { @@ -186,7 +172,7 @@ } .card__meta-avatars--assignees { - margin-inline: 0 calc(var(--btn-size) + var(--meta-spacer-block)); + margin-inline: 0; margin-block-start: var(--meta-spacer-block); } @@ -251,8 +237,12 @@ } @media (max-width: 639px) { + display: grid; font-size: var(--text-x-small); - position: relative; + grid-template-columns: 1fr auto; + grid-template-areas: + "meta bg-zoom" + "meta reactions"; } } @@ -286,17 +276,11 @@ } &:not(:has(.reaction)) { + margin: 0; + .reactions__trigger { --btn-border-color: var(--color-ink-light); } - - @media (max-width: 639px) { - inset-inline-end: 0; - } - - @media (min-width: 640px) { - position: static; - } } } diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 01a9fbe91..2369d62b3 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -84,6 +84,17 @@ .reactions { margin-block-start: var(--block-space-half); margin-inline: calc(var(--column-gap) / -1); + + &:not(:has(.reaction)) { + inset-block-end: var(--comment-padding-block); + inset-inline-end: calc(var(--comment-padding-inline) / 2); + margin: 0; + position: absolute; + + @media (max-width: 640px) { + inset-inline-end: calc(var(--comment-padding-inline) / 3); + } + } } } diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css index efd487f64..14e8b2086 100644 --- a/app/assets/stylesheets/reactions.css +++ b/app/assets/stylesheets/reactions.css @@ -17,14 +17,6 @@ &:not(:has(.reaction)) { inline-size: auto; - inset-block-end: var(--comment-padding-block); - inset-inline-end: calc(var(--comment-padding-inline) / 2); - margin: 0; - position: absolute; - - @media (max-width: 640px) { - inset-inline-end: calc(var(--comment-padding-inline) / 3); - } .reactions__list { display: none;