diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 2cdff0814..ca632aa16 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -345,10 +345,33 @@ li > p { .embed-container { position: relative; + padding: 0; + margin: $space-small auto; + overflow: hidden; border-radius: $border-radius-base; border: 1px solid $color-neutral-70; - padding: $space-x-small; - overflow: hidden; + background-color: $color-neutral-90; +} + +.embed-content { + width: 100%; + height: 100%; + cursor: pointer; + + h4 { + margin: $space-small 0 0 $space-small; + } + + p, + a { + display: block; + margin: 0 0 0 $space-small; + } +} + +.embed-preview-image { + width: 100%; + height: auto; } .embed-overlay { diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js index 92aee59fc..3513b6c41 100644 --- a/webapp/components/Editor/nodes/Embed.js +++ b/webapp/components/Editor/nodes/Embed.js @@ -6,25 +6,25 @@ import { allowEmbedIframesMutation } from '~/graphql/User.js' const template = ` +
+ +
+

{{embedTitle}}

+

{{embedDescription}}

+ {{dataEmbedUrl}} +
- dataEmbedUrl -
-

-

{{ embedTitle }}
-
{{ embedDescription }}
- - {{ dataEmbedUrl }} - `