a tool for shared writing and social publishing
fixed issue with embed blocks overflowing page if link was longer than page width
+16
-16
+1
-1
components/Blocks/Block.tsx
+1
-1
components/Blocks/Block.tsx
···
130
130
let BlockTypeComponent = BlockTypeComponents[props.type];
131
131
if (!BlockTypeComponent) return <div>unknown block</div>;
132
132
return (
133
-
<div className="blockContentWrapper grow flex gap-2 z-[1]">
133
+
<div className="blockContentWrapper w-full grow flex gap-2 z-[1]">
134
134
{props.listData && <ListMarker {...props} />}
135
135
{props.areYouSure ? (
136
136
<AreYouSure
+15
-15
components/Blocks/EmbedBlock.tsx
+15
-15
components/Blocks/EmbedBlock.tsx
···
38
38
id={props.preview ? undefined : elementId.block(props.entityID).input}
39
39
className={`
40
40
w-full h-[420px] p-2
41
-
text-tertiary hover:text-accent-contrast hover:cursor-pointer
42
-
flex flex-auto gap-2 items-center justify-center hover:border-2 border-dashed rounded-lg
43
-
${isSelected ? "border-2 border-tertiary" : "border border-border"}
41
+
text-tertiary hover:text-accent-contrast hover:cursor-pointer
42
+
flex flex-auto gap-2 items-center justify-center hover:border-2 border-dashed rounded-lg
43
+
${isSelected ? "border-2 border-tertiary" : "border border-border"}
44
44
${props.pageType === "canvas" && "bg-bg-page"}`}
45
45
onMouseDown={() => {
46
46
focusBlock(
···
55
55
}
56
56
57
57
return (
58
-
<div className={`w-full aspect-[4/3]`}>
58
+
<div className="w-full aspect-[4/3]">
59
59
{/*
60
-
the iframe!
60
+
the iframe!
61
61
very simple, just a fixed height (could add as an option)
62
-
can also add 'allow' and 'referrerpolicy' attributes later if needed
62
+
can also add 'allow' and 'referrerpolicy' attributes later if needed
63
63
*/}
64
64
<iframe
65
65
className={`
···
72
72
allow="fullscreen"
73
73
loading="lazy"
74
74
></iframe>
75
-
76
-
<a
77
-
href={url?.data.value}
78
-
target="_blank"
79
-
style={{ wordBreak: "break-word" }} // better than tailwind break-all!
80
-
className={`py-0.5 min-w-0 w-max line-clamp-1 text-xs italic text-accent-contrast`}
81
-
>
82
-
{url?.data.value}
83
-
</a>
75
+
<div className="w-full overflow-x-hidden truncate text-xs italic text-accent-contrast">
76
+
<a
77
+
href={url?.data.value}
78
+
target="_blank"
79
+
className={`py-0.5 min-w-0 w-full whitespace-nowrap`}
80
+
>
81
+
{url?.data.value}
82
+
</a>
83
+
</div>
84
84
</div>
85
85
);
86
86
};