feat: improve responsive design for cover and bookmark components

Author: 01-binary

apps/storybook/.storybook/preview-head.html

@@ -1,9 +1,11 @@
 <!-- .storybook/preview-head.html -->
 <style>
   /* 스토리북 루트 요소에 적용될 스타일 */
-  #storybook-root, #storybook-docs, .docs-story, .sb-main-padded, .sb-main, .docs-story .simplebar-content {
+  #storybook-root {
     width: 100% !important;
     max-width: 100% !important;
     box-sizing: border-box !important;
+    padding: 0 !important;
   }
+
 </style>

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

@@ -9,4 +9,10 @@ export const cover = style({
   objectPosition: 'center 50%',
   borderRadius: '1.5rem',
   margin: '0 auto',
+  '@media': {
+    '(max-width: 900px)': {
+      borderRadius: '0.5rem',
+      height: '25vh',
+    },
+  },
 });

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} />
             )}
-            <div className={urlText}>{ogData?.url || ''}</div>
+            <span className={urlText}>{ogData?.url || ''}</span>
           </div>
         </div>
         {ogData?.image && (

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

@@ -60,9 +60,7 @@ export const title = style({
   minHeight: '1.5rem',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  display: '-webkit-box',
-  WebkitLineClamp: 1,
-  WebkitBoxOrient: 'vertical',
+  whiteSpace: 'nowrap',
 });
 
 export const description = style({
@@ -100,6 +98,4 @@ export const urlText = style({
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   maxWidth: '100%',
-  width: '1px',
-  flexGrow: 1,
 });