🎨 Improve tab title editing width, borders and gutter alignment #17642

Author: 88250

app/src/assets/scss/protyle/_tabs.scss

@@ -4,6 +4,14 @@
     padding: 0;
     margin: 4px 0;
     position: relative;
+    border: 1px solid var(--b3-border-color);
+    border-radius: var(--b3-border-radius-b);
+
+    &.protyle-wysiwyg--select::after,
+    &.protyle-wysiwyg--select-mode::after,
+    &.protyle-wysiwyg--hl::after {
+      border-radius: inherit;
+    }
   }
 
   .tabs-header {
@@ -112,6 +120,12 @@
     visibility: hidden;
   }
 
+  .tabs[data-tabs-orientation="horizontal"] > .tabs-header > .tabs-list > .tabs-tab--editing {
+    width: 186px;
+    max-width: 100%;
+    justify-content: flex-start;
+  }
+
   .tabs-title-editor {
     position: absolute;
     z-index: 1;

app/src/protyle/gutter/index.ts

@@ -3882,7 +3882,8 @@ data-type="fold"${viewOccurrenceID ? ` data-view-occurrence-id="${encodeURICompo
             rect = nodeElement.getBoundingClientRect();
             space = 0;
         }
-        let horizontalAnchorLeft = rect.left;
+        // 页签栏只用于垂直定位；水平方向和其他块一样以整个块的外边界为基准。
+        let horizontalAnchorLeft = tabsHeader ? tabsHeader.parentElement.getBoundingClientRect().left : rect.left;
         if (listItem && element.classList.contains("protyle-action") &&
             element.parentElement.getAttribute("data-type") === "NodeListItem") {
             const listItemElement = element.parentElement;
@@ -3891,6 +3892,8 @@ data-type="fold"${viewOccurrenceID ? ` data-view-occurrence-id="${encodeURICompo
             horizontalAnchorLeft = getListGutterAnchorLeft(rect.left, contentLeft, isRTL);
         }
         const buttonCount = html.split("</button>").length - 1;
+        // 所有块标与内容统一留出间距，并在判断是否压缩时计入这段空间。
+        const gutterGap = 4;
         const getNaturalLeft = (width: number) => {
             let left = horizontalAnchorLeft - width - space;
             if (nodeElement.getAttribute("data-type") === "NodeBlockQueryEmbed" && buttonCount === 1) {
@@ -3900,7 +3903,7 @@ data-type="fold"${viewOccurrenceID ? ` data-view-occurrence-id="${encodeURICompo
                 // 为数据库行
                 left = nodeElement.getBoundingClientRect().left - width - space + parseInt(getComputedStyle(nodeElement).paddingLeft);
             }
-            return left;
+            return left - gutterGap;
         };
         let naturalLeft = getNaturalLeft(this.naturalWidth || this.element.clientWidth);
         let compressed = naturalLeft < this.element.parentElement.getBoundingClientRect().left;
@@ -3951,7 +3954,7 @@ data-type="fold"${viewOccurrenceID ? ` data-view-occurrence-id="${encodeURICompo
         const top = Math.max(rect.top + marginHeight, contentTop, foldElement ? foldElement.getBoundingClientRect().top : 0);
         this.element.style.top = `${getFixedGutterPosition(top, fixedContainerRect?.top)}px`;
         // 压缩模式需加 2，否则和折叠标题无法对齐
-        const left = compressed ? horizontalAnchorLeft - this.element.clientWidth - space / 2 + 3 :
+        const left = compressed ? horizontalAnchorLeft - this.element.clientWidth - space / 2 + 3 - gutterGap :
             getNaturalLeft(this.element.clientWidth);
         this.element.style.left = `${getFixedGutterPosition(left, fixedContainerRect?.left)}px`;
     }

app/src/protyle/render/tabsRender.ts

@@ -284,6 +284,7 @@ export const tabsRender = (element: Element, options: ITabsRenderOptions = {}) =
                 }
                 const list = header.querySelector<HTMLElement>(".tabs-list");
                 list.setAttribute("aria-orientation", vertical ? "vertical" : "horizontal");
+                let editingButton: HTMLElement;
                 items.forEach((item, index) => {
                     if (readonly) {
                         item.dataset.tabsEditing = "false";
@@ -312,6 +313,9 @@ export const tabsRender = (element: Element, options: ITabsRenderOptions = {}) =
                         title.setAttribute("contenteditable", "true");
                     }
                     const editing = !readonly && selected && item.dataset.tabsEditing === "true";
+                    if (editing && !button.classList.contains("tabs-tab--editing")) {
+                        editingButton = button;
+                    }
                     button.classList.toggle("tabs-tab--editing", editing);
                     button.draggable = !readonly && !editing && !!controller.options.move;
                     const info = item.querySelector<HTMLElement>(":scope > .tab-item-info");
@@ -323,6 +327,13 @@ export const tabsRender = (element: Element, options: ITabsRenderOptions = {}) =
                     }
                 });
                 tabs.setAttribute("data-tabs-ready", "true");
+                if (editingButton && !vertical) {
+                    // 展开编辑标签后滚动到完整可见的位置，避免右侧页签的输入区域被裁切。
+                    const listRect = list.getBoundingClientRect();
+                    const rect = editingButton.getBoundingClientRect();
+                    list.scrollLeft += rect.left < listRect.left ? rect.left - listRect.left :
+                        Math.max(0, rect.right - listRect.right);
+                }
                 items.forEach((item, index) => {
                     const info = item.querySelector<HTMLElement>(":scope > .tabs-title-editor");
                     if (!info) {