feat: Bookmark responsive add

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/Bookmark/Bookmark.tsx

@@ -101,7 +101,7 @@ const Bookmark: React.FC<BookmarkProps> = ({ url }) => {
             {ogData?.favicon && (
               <img src={ogData.favicon} alt="" className={favicon} />
             )}
-            <span className={urlText}>{ogData?.url || ''}</span>
+            <div className={urlText}>{ogData?.url || ''}</div>
           </div>
         </div>
         {ogData?.image && (

packages/notion-to-jsx/src/components/Renderer/components/Bookmark/styles.css.ts

@@ -36,6 +36,11 @@ export const previewContainer = style({
   justifyContent: 'center',
   maxHeight: '8rem',
   overflow: 'hidden',
+  '@media': {
+    '(max-width: 420px)': {
+      display: 'none',
+    },
+  },
 });
 
 export const previewImage = style({
@@ -55,7 +60,9 @@ export const title = style({
   minHeight: '1.5rem',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
+  display: '-webkit-box',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
 });
 
 export const description = style({
@@ -93,4 +100,6 @@ export const urlText = style({
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   maxWidth: '100%',
+  width: '1px',
+  flexGrow: 1,
 });