From de9a686a7c69b7b291fcc9561b04fbc4816662a7 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 29 Nov 2023 17:19:09 +0800
Subject: [PATCH] :recycle: fix https://github.com/siyuan-note/siyuan/pull/9772

---
 app/appearance/themes/daylight/theme.css  | 1 +
 app/appearance/themes/midnight/theme.css  | 1 +
 app/src/assets/scss/business/_av.scss     | 6 ++++--
 app/src/assets/scss/protyle/_protyle.scss | 3 +--
 app/src/protyle/wysiwyg/index.ts          | 9 ++++++++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css
index 685522a20..ec91716fd 100644
--- a/app/appearance/themes/daylight/theme.css
+++ b/app/appearance/themes/daylight/theme.css
@@ -106,6 +106,7 @@
     /* 动画效果 */
     --b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms;
     --b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms;
+    --b3-color-transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms;
 
     /* 下拉菜单 */
     --b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(95, 99, 104, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);
diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css
index a270a6013..879628733 100644
--- a/app/appearance/themes/midnight/theme.css
+++ b/app/appearance/themes/midnight/theme.css
@@ -106,6 +106,7 @@
     /* 动画效果 */
     --b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms;
     --b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms;
+    --b3-color-transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms;
 
     /* 下拉菜单 */
     --b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(154, 160, 166, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);
diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 8a91ae9fb..1be477f9f 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -63,12 +63,14 @@
 
   &__gutters {
     @extend .protyle-gutters;
-    position: fixed;
     top: 0;
     left: -44px;
     opacity: 0;
     display: flex;
-    z-index: 2;
+
+    &--min .av__gutter {
+      padding: 4px 0;
+    }
 
     svg {
       height: 25px;
diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index 41e609d9c..46d09360b 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -71,7 +71,6 @@
     border: 0;
     background-color: transparent;
     padding: 4px;
-    transition: var(--b3-transition);
     cursor: pointer;
     position: relative;
 
@@ -98,7 +97,7 @@
     color: var(--b3-theme-on-surface-light);
     width: 14px;
     float: left;
-    transition: var(--b3-transition);
+    transition: var(--b3-color-transition);
   }
 }
 
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index 1730e378f..75ba5e7ba 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -1460,7 +1460,14 @@ export class WYSIWYG {
                     const rowElement = hasClosestByClassName(event.target, "av__row");
                     if (rowElement && rowElement.dataset.id) {
                         const guttersElement = rowElement.querySelector(".av__gutters");
-                        guttersElement.setAttribute("style", `left:${rowElement.parentElement.parentElement.getBoundingClientRect().left - guttersElement.clientWidth}px;top:${rowElement.getBoundingClientRect().top}px`);
+                        guttersElement.classList.remove("av__gutters--min")
+                        let guttersLeft = rowElement.parentElement.parentElement.getBoundingClientRect().left - guttersElement.clientWidth;
+                        const contentLeft = protyle.contentElement.getBoundingClientRect().left
+                        if (guttersLeft < contentLeft) {
+                            guttersLeft = contentLeft;
+                            guttersElement.classList.add("av__gutters--min")
+                        }
+                        guttersElement.setAttribute("style", `left:${guttersLeft}px;top:${rowElement.getBoundingClientRect().top}px`);
                     }
                     protyle.gutter.render(protyle, nodeElement, this.element);
                 }