From e855197acfa06a0ef4088166e22b2e7a05dbf1ed Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Thu, 27 Mar 2025 08:53:27 +0000
Subject: [PATCH] feat(editor): responsive edgeless toolbar pen menu (#11150)

close BS-2855
---
 .../components/toolbar/common/slide-menu.ts   | 24 +++++++----
 .../src/toolbar/components/pen/pen-menu.ts    | 42 ++++++++++---------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/slide-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/slide-menu.ts
index b79ab3e6a8..029a6aa31d 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/slide-menu.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/slide-menu.ts
@@ -29,21 +29,26 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
       align-items: center;
       width: fit-content;
       max-width: 100%;
-      overflow-x: auto;
-      overscroll-behavior: none;
-      scrollbar-width: none;
       position: relative;
       height: calc(var(--menu-height) + 1px);
       box-sizing: border-box;
-      padding: 0 10px;
+      padding-left: 10px;
       scroll-snap-type: x mandatory;
     }
+    .menu-container-scrollable {
+      overflow-x: auto;
+      overscroll-behavior: none;
+      scrollbar-width: none;
+      height: 100%;
+      padding-right: 10px;
+    }
     .slide-menu-content {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100%;
       transition: left 0.5s ease-in-out;
+      width: fit-content;
     }
     .next-slide-button,
     .previous-slide-button {
@@ -109,7 +114,7 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
     const menuWidth = this._menuContainer.clientWidth;
 
     const leftMin = 0;
-    const leftMax = this._slideMenuContent.clientWidth - menuWidth + 2; // border is 2
+    const leftMax = this._slideMenuContent.clientWidth - menuWidth;
     this.showPrevious = scrollLeft > leftMin;
     this.showNext = scrollLeft < leftMax;
   }
@@ -140,8 +145,11 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
           class="menu-container"
           style=${styleMap({ '--menu-height': this.height })}
         >
-          <div class="slide-menu-content" @wheel=${this._handleWheel}>
-            <slot></slot>
+          <slot name="prefix"></slot>
+          <div class="menu-container-scrollable">
+            <div class="slide-menu-content" @wheel=${this._handleWheel}>
+              <slot></slot>
+            </div>
           </div>
         </div>
         <div
@@ -155,7 +163,7 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
     `;
   }
 
-  @query('.menu-container')
+  @query('.menu-container-scrollable')
   private accessor _menuContainer!: HTMLDivElement;
 
   @query('.slide-menu-content')
diff --git a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts
index 6231b28ab4..bbd9ff4a9a 100644
--- a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts
+++ b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts
@@ -25,11 +25,13 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
     }
 
     .pens {
-      position: fixed;
       display: flex;
+      padding: 0 4px;
+      align-items: center;
 
       .pen-wrapper {
         display: flex;
+        min-width: 38px;
         height: 64px;
         align-items: flex-end;
         justify-content: center;
@@ -55,7 +57,7 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
 
     menu-divider {
       height: 24px;
-      margin: 0 9px 0 70px;
+      margin: 0 9px;
     }
   `;
 
@@ -93,26 +95,26 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
 
     return html`
       <edgeless-slide-menu>
-        <div class="menu-content">
-          <div class="pens">
-            <div
-              class="pen-wrapper edgeless-brush-button"
-              ?data-active="${pen === 'brush'}"
-              style=${styleMap({ color: brushColor })}
-              @click=${() => this._onPickPen('brush')}
-            >
-              ${brushIcon}
-            </div>
-            <div
-              class="pen-wrapper edgeless-highlighter-button"
-              ?data-active="${pen === 'highlighter'}"
-              style=${styleMap({ color: highlighterColor })}
-              @click=${() => this._onPickPen('highlighter')}
-            >
-              ${highlighterIcon}
-            </div>
+        <div class="pens" slot="prefix">
+          <div
+            class="pen-wrapper edgeless-brush-button"
+            ?data-active="${pen === 'brush'}"
+            style=${styleMap({ color: brushColor })}
+            @click=${() => this._onPickPen('brush')}
+          >
+            ${brushIcon}
+          </div>
+          <div
+            class="pen-wrapper edgeless-highlighter-button"
+            ?data-active="${pen === 'highlighter'}"
+            style=${styleMap({ color: highlighterColor })}
+            @click=${() => this._onPickPen('highlighter')}
+          >
+            ${highlighterIcon}
           </div>
           <menu-divider .vertical=${true}></menu-divider>
+        </div>
+        <div class="menu-content">
           <edgeless-color-panel
             class="one-way"
             @select=${this._onPickColor}