Merge remote-tracking branch 'catstodon/feature/emoji_reactions'

app/javascript/styles/mastodon/components.scss

@@ -1160,6 +1160,7 @@ body > [data-popper-placement] {
     .video-player,
     .audio-player,
     .attachment-list,
+    .picture-in-picture-placeholder,
     .status-card {
       margin-inline-start: 46px + 10px;
       width: calc(100% - (46px + 10px));
@@ -1802,7 +1803,6 @@ a.account__display-name {
 .status__avatar {
   width: 46px;
   height: 46px;
-  box-shadow: 0 0 0 2px $ui-base-color;
 }
 
 .muted {
@@ -3128,6 +3128,10 @@ $ui-header-height: 55px;
 }
 
 .compose-form__highlightable {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 0 1 auto;
   border-radius: 4px;
   transition: box-shadow 300ms linear;
 
@@ -3822,6 +3826,10 @@ a.status-card {
 }
 
 .status-card-video {
+  // Firefox has a bug where frameborder=0 iframes add some extra blank space
+  // see https://bugzilla.mozilla.org/show_bug.cgi?id=155174
+  overflow: hidden;
+
   iframe {
     width: 100%;
     height: 100%;
@@ -6348,30 +6356,25 @@ a.status-card.compact:hover {
   z-index: 9999;
 }
 
-.media-gallery__gifv__label {
-  display: block;
+.media-gallery__item__badges {
   position: absolute;
-  color: $primary-text-color;
-  background: rgba($base-overlay-background, 0.5);
   bottom: 6px;
   inset-inline-start: 6px;
-  padding: 2px 6px;
-  border-radius: 2px;
-  font-size: 11px;
-  font-weight: 600;
-  z-index: 1;
-  pointer-events: none;
-  opacity: 0.9;
-  transition: opacity 0.1s ease;
-  line-height: 18px;
+  display: flex;
+  gap: 2px;
 }
 
-.media-gallery__gifv {
-  &:hover {
-    .media-gallery__gifv__label {
-      opacity: 1;
-    }
-  }
+.media-gallery__gifv__label {
+  display: block;
+  color: $white;
+  background: rgba($black, 0.65);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  z-index: 1;
+  pointer-events: none;
+  line-height: 18px;
 }
 
 .attachment-list {
@@ -6446,17 +6449,28 @@ a.status-card.compact:hover {
   position: relative;
   width: 100%;
   min-height: 64px;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 50% 50%;
+  gap: 2px;
 }
 
 .media-gallery__item {
   border: 0;
   box-sizing: border-box;
   display: block;
-  float: left;
   position: relative;
   border-radius: 4px;
   overflow: hidden;
 
+  &--tall {
+    grid-row: span 2;
+  }
+
+  &--wide {
+    grid-column: span 2;
+  }
+
   &.standalone {
     .media-gallery__item-gifv-thumbnail {
       transform: none;
@@ -6545,6 +6559,7 @@ a.status-card.compact:hover {
   background: darken($ui-base-color, 8%);
   border-radius: 4px;
   padding-bottom: 44px;
+  width: 100%;
 
   &.editable {
     border-radius: 0;
@@ -8353,6 +8368,7 @@ noscript {
   font-weight: 500;
   cursor: pointer;
   color: $darker-text-color;
+  aspect-ratio: 16 / 9;
 
   i {
     display: block;

app/javascript/styles/mastodon/forms.scss

@@ -722,7 +722,7 @@ code {
     }
   }
 
-  @media screen and (width <= 740px) and (width >= 441px) {
+  @media screen and (440px < width <= 740px) {
     margin-top: 40px;
   }