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,7 +3966,25 @@ noscript {
   }
 }
 
-.embed-modal__html {
+.embed-modal {
+  max-width: 80vw;
+  max-height: 80vh;
+
+  h4 {
+    padding: 30px;
+    font-weight: 500;
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .embed-modal__container {
+    padding: 10px;
+
+    .hint {
+      margin-bottom: 15px;
+    }
+
+    .embed-modal__html {
       color: $ui-secondary-color;
       outline: 0;
       box-sizing: border-box;
@@ -3998,28 +4016,13 @@ noscript {
       @media screen and (max-width: 600px) {
         font-size: 16px;
       }
-}
-
-.embed-modal {
-  h4 {
-    padding: 30px;
-    font-weight: 500;
-    font-size: 16px;
-    text-align: center;
     }
 
-  .hint {
-    margin-bottom: 15px;
-  }
-}
-
-.embed-modal__container {
-  padding: 10px;
-}
-
-.embed-modal__iframe {
-  width: 100%;
-  min-width: 400px;
+    .embed-modal__iframe {
+      width: 400px;
+      max-width: 100%;
       overflow: hidden;
       border: 0;
+    }
+  }
 }

app/javascript/styles/stream_entries.scss

@@ -403,29 +403,23 @@
 
 .embed {
   .activity-stream {
-    border-radius: 4px;
     box-shadow: none;
 
     .entry {
-      &:last-child {
-        border-radius: 0 0 4px 4px;
+
+      .detailed-status.light {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .detailed-status__display-name {
+          flex: 1;
+          margin: 0 5px 15px 0;
         }
 
-      &:first-child {
-        border-radius: 4px 4px 0 0;
-
-        &:last-child {
-          border-radius: 4px;
-        }
-      }
-    }
-  }
-}
-
-.button.button-secondary.logo-button {
-  position: absolute;
-  right: 14px;
-  top: 14px;
+        .button.button-secondary.logo-button {
+          flex: 0 auto;
           font-size: 14px;
 
           svg {
@@ -450,4 +444,13 @@
               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',
-      scrolling: 'no',
+      style: 'max-width: 100%; border: none;',
       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' }<