Fix game/study embeds on mobile in forum

ui/analyse/css/embed/_layout.scss

@@ -19,7 +19,7 @@
   grid-template-columns: auto;
   grid-template-rows: 100vw minmax(150px, calc(100vh - 100vw - 5.5rem)) 3rem;
 
-  @include breakpoint(min-width 400px) {
+  @media (min-width: 400px) and (min-aspect-ratio: 1/1) {
     grid-template-columns: minmax(200px, calc(100vh - 2.5rem)) minmax(200px, 1fr);
     grid-template-rows: auto 2.5rem;
     grid-template-areas: 'board tools' 'board controls';

ui/common/css/abstract/_extends.scss

@@ -206,6 +206,12 @@
   }
 }
 
+%game-embed {
+  @include breakpoint($mq-not-xx-small) {
+    padding-bottom: 160%;
+  }
+}
+
 %data-icon {
   font-size: 1.2em;
   vertical-align: middle;

ui/msg/css/_convoMsgs.scss

@@ -103,6 +103,10 @@
   .embed {
     @extend %video;
 
+    &--game {
+      @extend %game-embed;
+    }
+
     &.not-found {
       height: 100px;
       padding: 0;

ui/site/css/_blog.scss

@@ -131,6 +131,10 @@
     .embed {
       @extend %video;
 
+      &--game {
+        @extend %game-embed;
+      }
+
       margin: $block-gap auto;
     }
   }

ui/site/css/forum/_post.scss

@@ -89,6 +89,10 @@
       @extend %video;
 
       margin: $block-gap auto;
+
+      .embed--game {
+        @extend %game-embed;
+      }
     }
 
     img {

ui/site/src/expandText.ts

@@ -93,7 +93,7 @@ lichess.load.then(() => {
     const $iframe: any = $('<iframe>')
       .addClass('analyse ' + a.type)
       .attr('src', a.src);
-    $(a.element).replaceWith($('<div class="embed">').prepend($iframe));
+    $(a.element).replaceWith($('<div class="embed embed--game">').prepend($iframe));
     return $iframe
       .on('load', function (this: HTMLIFrameElement) {
         if (this.contentDocument?.title.startsWith('404')) this.style.height = '100px';