Adjust status embeds (#4808)

* Adjust status embeds

Adjust styles of embed code. Adjust styles of embed pages. Fix overflow of embed-modal.

* Remove trailing whitespace

* Using width from the variable

app/javascript/styles/components.scss

@@ -3966,41 +3966,10 @@ noscript {
   }
 }
 
-.embed-modal__html {
-  color: $ui-secondary-color;
-  outline: 0;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  border: none;
-  padding: 10px;
-  font-family: 'mastodon-font-monospace', monospace;
-  background: $ui-base-color;
-  color: $ui-primary-color;
-  font-size: 14px;
-  margin: 0;
-  margin-bottom: 15px;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-
-  &:focus {
-    background: lighten($ui-base-color, 4%);
-  }
-
-  @media screen and (max-width: 600px) {
-    font-size: 16px;
-  }
-}
-
 .embed-modal {
+  max-width: 80vw;
+  max-height: 80vh;
+
   h4 {
     padding: 30px;
     font-weight: 500;
@@ -4008,18 +3977,52 @@ noscript {
     text-align: center;
   }
 
-  .hint {
+  .embed-modal__container {
-    margin-bottom: 15px;
+    padding: 10px;
-  }
-}
 
-.embed-modal__container {
+    .hint {
-  padding: 10px;
+      margin-bottom: 15px;
-}
+    }
 
-.embed-modal__iframe {
+    .embed-modal__html {
-  width: 100%;
+      color: $ui-secondary-color;
-  min-width: 400px;
+      outline: 0;
-  overflow: hidden;
+      box-sizing: border-box;
-  border: 0;
+      display: block;
+      width: 100%;
+      border: none;
+      padding: 10px;
+      font-family: 'mastodon-font-monospace', monospace;
+      background: $ui-base-color;
+      color: $ui-primary-color;
+      font-size: 14px;
+      margin: 0;
+      margin-bottom: 15px;
+
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
+      &::-moz-focus-inner,
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+
+      &:focus {
+        background: lighten($ui-base-color, 4%);
+      }
+
+      @media screen and (max-width: 600px) {
+        font-size: 16px;
+      }
+    }
+
+    .embed-modal__iframe {
+      width: 400px;
+      max-width: 100%;
+      overflow: hidden;
+      border: 0;
+    }
+  }
 }

app/javascript/styles/stream_entries.scss

@@ -403,51 +403,54 @@
 
 .embed {
   .activity-stream {
-    border-radius: 4px;
     box-shadow: none;
 
     .entry {
-      &:last-child {
-        border-radius: 0 0 4px 4px;
-      }
 
-      &:first-child {
+      .detailed-status.light {
-        border-radius: 4px 4px 0 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: flex-start;
 
-        &:last-child {
+        .detailed-status__display-name {
-          border-radius: 4px;
+          flex: 1;
+          margin: 0 5px 15px 0;
         }
-      }
-    }
-  }
-}
 
-.button.button-secondary.logo-button {
+        .button.button-secondary.logo-button {
-  position: absolute;
+          flex: 0 auto;
-  right: 14px;
+          font-size: 14px;
-  top: 14px;
-  font-size: 14px;
 
-  svg {
+          svg {
-    width: 20px;
+            width: 20px;
-    height: auto;
+            height: auto;
-    vertical-align: middle;
+            vertical-align: middle;
-    margin-right: 5px;
+            margin-right: 5px;
 
-    path:first-child {
+            path:first-child {
-      fill: $ui-primary-color;
+              fill: $ui-primary-color;
-    }
+            }
 
-    path:last-child {
+            path:last-child {
-      fill: $simple-background-color;
+              fill: $simple-background-color;
-    }
+            }
-  }
+          }
 
-  &:active,
+          &:active,
-  &:focus,
+          &:focus,
-  &:hover {
+          &:hover {
-    svg path:first-child {
+            svg path:first-child {
-      fill: lighten($ui-primary-color, 4%);
+              fill: lighten($ui-primary-color, 4%);
+            }
+          }
+        }
+
+        .status__content,
+        .detailed-status__meta {
+          flex: 100%;
+        }
+      }
     }
   }
 }

app/serializers/oembed_serializer.rb

@@ -40,8 +40,7 @@ class OEmbedSerializer < ActiveModel::Serializer
     attributes = {
       src: embed_short_account_status_url(object.account, object),
       class: 'mastodon-embed',
-      frameborder: '0',
+      style: 'max-width: 100%; border: none;',
-      scrolling: 'no',
       width: width,
       height: height,
     }

app/views/stream_entries/_detailed_status.html.haml

@@ -1,9 +1,4 @@
 .detailed-status.light
-  - if embedded_view?
-    = link_to "web+mastodon://follow?uri=#{status.account.local_username_and_domain}", class: 'button button-secondary logo-button', target: '_new' do
-      = render file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')
-      = t('accounts.follow')
-
   = link_to TagManager.instance.url_for(status.account), class: 'detailed-status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do
     %div
       .avatar
@@ -12,6 +7,11 @@
       %strong.p-name.emojify= display_name(status.account)
       %span= acct(status.account)
 
+  - if embedded_view?
+    = link_to "web+mastodon://follow?uri=#{status.account.local_username_and_domain}", class: 'button button-secondary logo-button', target: '_new' do
+      = render file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')
+      = t('accounts.follow')
+
   .status__content.p-name.emojify<
     - if status.spoiler_text?
       %p{ style: 'margin-bottom: 0' }<