a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fixed issue with embed blocks overflowing page if link was longer than page width

celine 161d431b f442a179

+16 -16
+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
··· 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 };