diff --git a/blocksuite/affine/blocks/block-bookmark/src/components/bookmark-card.ts b/blocksuite/affine/blocks/block-bookmark/src/components/bookmark-card.ts
index 098b38899..0f052b4d5 100644
--- a/blocksuite/affine/blocks/block-bookmark/src/components/bookmark-card.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/components/bookmark-card.ts
@@ -125,10 +125,15 @@ export class BookmarkCard extends WithDisposable(ShadowlessElement) {
           <div class="affine-bookmark-content-description">
             ${descriptionText}
           </div>
-          <div class="affine-bookmark-content-url" @click=${this.bookmark.open}>
-            <span>${getHostName(url)}</span>
-            <div class="affine-bookmark-content-url-icon">
-              ${OpenInNewIcon({ width: '12', height: '12' })}
+          <div
+            class="affine-bookmark-content-url-wrapper"
+            @click=${this.bookmark.open}
+          >
+            <div class="affine-bookmark-content-url">
+              <span>${getHostName(url)}</span>
+              <div class="affine-bookmark-content-url-icon">
+                ${OpenInNewIcon({ width: '12', height: '12' })}
+              </div>
             </div>
           </div>
         </div>
diff --git a/blocksuite/affine/blocks/block-bookmark/src/styles.ts b/blocksuite/affine/blocks/block-bookmark/src/styles.ts
index cde0bc862..859753ccb 100644
--- a/blocksuite/affine/blocks/block-bookmark/src/styles.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/styles.ts
@@ -108,7 +108,6 @@ export const styles = css`
     gap: 4px;
     width: max-content;
     max-width: 100%;
-    cursor: pointer;
   }
 
   .affine-bookmark-content-url > span {
@@ -226,9 +225,12 @@ export const styles = css`
       max-height: 120px;
     }
 
-    .affine-bookmark-content-url {
-      flex-grow: 1;
+    .affine-bookmark-content-url-wrapper {
+      max-width: fit-content;
+      display: flex;
       align-items: flex-end;
+      flex-grow: 1;
+      cursor: pointer;
     }
 
     .affine-bookmark-banner {