:bug: Fixed the issue that the gutters of attribute view overlapped with layout resize bar (#9772)

app/src/assets/scss/business/_av.scss

@@ -63,11 +63,8 @@
 
   &__gutters {
     @extend .protyle-gutters;
-    position: fixed;
-    top: 0;
-    left: -44px;
-    opacity: 0;
-    display: flex;
+    display: none;
+    z-index: 2;
 
     svg {
       height: 25px;
@@ -108,7 +105,7 @@
       }
 
       .av__gutters {
-        opacity: 1;
+        display: flex;
       }
     }
 

app/src/protyle/render/av/action.ts

@@ -69,7 +69,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         return true;
     }
 
-    const gutterElement = hasClosestByClassName(event.target, "ariaLabel");
+    const gutterElement = hasClosestByClassName(event.target, "av__gutter");
     if (gutterElement && gutterElement.parentElement.classList.contains("av__gutters")) {
         const rowElement = hasClosestByClassName(gutterElement, "av__row");
         if (!rowElement) {

app/src/protyle/render/av/render.ts

@@ -115,8 +115,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                 data.rows.forEach((row: IAVRow) => {
                     tableHTML += `<div class="av__row" data-id="${row.id}">
 <div class="av__gutters">
-    <button class="ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
-    <button class="ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg></button>
+    <button class="av__gutter ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
+    <button class="av__gutter ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg></button>
 </div>`;
                     if (pinIndex > -1) {
                         tableHTML += '<div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>';

app/src/protyle/wysiwyg/index.ts

@@ -1459,7 +1459,13 @@ export class WYSIWYG {
                     // database 行块标
                     const rowElement = hasClosestByClassName(event.target, "av__row");
                     if (rowElement && rowElement.dataset.id) {
-                        rowElement.firstElementChild.setAttribute("style", `left:${rowElement.parentElement.parentElement.getBoundingClientRect().left - 44}px;top:${rowElement.getBoundingClientRect().top}px`);
+                        const scrollElement = hasClosestByClassName(rowElement, "av__scroll");
+                        const guttersElement = rowElement.querySelector<HTMLElement>(".av__gutters");
+                        if (scrollElement && guttersElement) {
+                            const width = guttersElement.offsetWidth;
+                            guttersElement.style.top = `${rowElement.getBoundingClientRect().top}px`;
+                            guttersElement.style.left = `${scrollElement.getBoundingClientRect().left - width}px`;
+                        }
                     }
                     protyle.gutter.render(protyle, nodeElement, this.element);
                 }