diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx index 341476820..3737edfd8 100644 --- a/app/soapbox/components/status_action_bar.tsx +++ b/app/soapbox/components/status_action_bar.tsx @@ -381,11 +381,14 @@ class StatusActionBar extends ImmutablePureComponent { menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed, - icon: require('feather-icons/dist/icons/link-2.svg'), + icon: require('@tabler/icons/icons/share.svg'), }); } } diff --git a/app/soapbox/features/ui/components/embed_modal.js b/app/soapbox/features/ui/components/embed_modal.js index dde549af1..42a1bbd94 100644 --- a/app/soapbox/features/ui/components/embed_modal.js +++ b/app/soapbox/features/ui/components/embed_modal.js @@ -5,6 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import api from 'soapbox/api'; +import { Modal, Stack, Text, Input } from 'soapbox/components/ui'; export default @connect() @injectIntl @@ -42,9 +43,13 @@ class EmbedModal extends ImmutablePureComponent { iframeDocument.write(res.data.html); iframeDocument.close(); + const innerFrame = iframeDocument.querySelector('iframe'); + iframeDocument.body.style.margin = 0; - this.iframe.width = iframeDocument.body.scrollWidth; - this.iframe.height = iframeDocument.body.scrollHeight; + + if (innerFrame) { + innerFrame.width = '100%'; + } }).catch(error => { this.props.onError(error); }); @@ -62,35 +67,30 @@ class EmbedModal extends ImmutablePureComponent { const { oembed } = this.state; return ( -
-

+ }> + + + + + -
-

- -

- - - -

- -

+ +