:lipstick: fix https://github.com/siyuan-note/siyuan/issues/7598

app/src/assets/scss/component/_menu.scss

@@ -39,13 +39,14 @@
 
     .b3-menu {
       &__submenu {
-        top: 45px;
+        top: 57px;
         left: 0;
         bottom: 0;
         max-height: none;
         right: 0;
         box-shadow: none;
         border: 0;
+        padding: 0;
       }
 
       &__item {
@@ -64,6 +65,10 @@
           line-height: 24px;
           padding-left: 16px;
         }
+
+        .color__square {
+          margin: 0 16px 0 8px;
+        }
       }
 
       &__title {
@@ -141,13 +146,9 @@
           padding: 4px;
           align-content: flex-start;
 
-          .b3-menu__icon {
-            display: none;
-          }
-
           .b3-menu__item {
-            width: auto;
-            padding: 4px;
+            min-width: auto;
+            margin-top: 7px;
           }
 
           .b3-menu__label {

app/src/menus/Menu.ts

@@ -50,6 +50,8 @@ export class Menu {
             itemElement.classList.add("b3-menu__item--show");
             if (!this.element.classList.contains("b3-menu--fullscreen")) {
                 this.showSubMenu(subMenuElement);
+            } else {
+                this.element.scrollTop = 0
             }
         });
     }

app/src/protyle/gutter/index.ts

@@ -668,7 +668,9 @@ export class Gutter {
             submenu: this.genCardStyle(selectsElement, protyle).concat(this.genFontStyle(selectsElement, protyle)).concat(this.genBGStyle(selectsElement, protyle))
         }).element;
         window.siyuan.menus.menu.append(appearanceElement);
-        appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
+        if (!isMobile()) {
+            appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
+        }
         this.genAlign(selectsElement, protyle);
         this.genWidths(selectsElement, protyle);
         window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
@@ -1439,7 +1441,9 @@ export class Gutter {
                 submenu: this.genCardStyle([nodeElement], protyle).concat(this.genFontStyle([nodeElement], protyle)).concat(this.genBGStyle([nodeElement], protyle))
             }).element;
             window.siyuan.menus.menu.append(appearanceElement);
-            appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
+            if (!isMobile()) {
+                appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row");
+            }
             this.genAlign([nodeElement], protyle);
             this.genWidths([nodeElement], protyle);
         }
@@ -1588,12 +1592,14 @@ export class Gutter {
 
     private genBGStyle(nodeElements: Element[], protyle: IProtyle) {
         const styles: IMenu[] = [];
+        const isM = isMobile();
         ["var(--b3-font-background1)", "var(--b3-font-background2)", "var(--b3-font-background3)", "var(--b3-font-background4)",
             "var(--b3-font-background5)", "var(--b3-font-background6)", "var(--b3-font-background7)", "var(--b3-font-background8)",
             "var(--b3-font-background9)", "var(--b3-font-background10)", "var(--b3-font-background11)", "var(--b3-font-background12)",
             "var(--b3-font-background13)"].forEach((item, index) => {
             styles.push({
-                label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorPrimary} ${index + 1}">
+                iconHTML: isM ? `<span style="background-color:${item};" class="color__square fn__flex-center"></span>` : Constants.ZWSP,
+                label: isM ? `${window.siyuan.languages.colorPrimary} ${index + 1}` : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorPrimary} ${index + 1}">
     <span style="background-color:${item};" class="color__square fn__flex-center"></span>
 </div>`,
                 click: () => {
@@ -1607,7 +1613,8 @@ export class Gutter {
             type: "separator"
         });
         styles.push({
-            label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.clearFontStyle}">
+            iconHTML: isM ? '<span class="color__square fn__flex-center">A</span>' : Constants.ZWSP,
+            label: isM ? window.siyuan.languages.clearFontStyle : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.clearFontStyle}">
     <span class="color__square fn__flex-center">A</span>
 </div>`,
             click: () => {
@@ -1703,12 +1710,14 @@ export class Gutter {
 
     private genFontStyle(nodeElements: Element[], protyle: IProtyle) {
         const styles: IMenu[] = [];
+        const isM = isMobile();
         ["var(--b3-font-color1)", "var(--b3-font-color2)", "var(--b3-font-color3)", "var(--b3-font-color4)",
             "var(--b3-font-color5)", "var(--b3-font-color6)", "var(--b3-font-color7)", "var(--b3-font-color8)",
             "var(--b3-font-color9)", "var(--b3-font-color10)", "var(--b3-font-color11)", "var(--b3-font-color12)",
             "var(--b3-font-color13)"].forEach((item, index) => {
             styles.push({
-                label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorFont} ${index + 1}">
+                iconHTML: isM ? `<span style="color:${item};" class="color__square fn__flex-center">A</span>` : Constants.ZWSP,
+                label: isM ? `${window.siyuan.languages.colorFont} ${index + 1}` : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorFont} ${index + 1}">
     <span style="color:${item};" class="color__square fn__flex-center">A</span>
 </div>`,
                 click: () => {
@@ -1726,9 +1735,11 @@ export class Gutter {
 
     private genCardStyle(nodeElements: Element[], protyle: IProtyle) {
         const styles: IMenu[] = [];
+        const isM = isMobile();
         ["error", "warning", "info", "success"].forEach((item) => {
             styles.push({
-                label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages[item + "Style"]}">
+                iconHTML: isM ? `<span style="color: var(--b3-card-${item}-color);background-color: var(--b3-card-${item}-background);" class="color__square fn__flex-center">A</span>` : Constants.ZWSP,
+                label: isM ? window.siyuan.languages[item + "Style"] : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages[item + "Style"]}">
     <span style="color: var(--b3-card-${item}-color);background-color: var(--b3-card-${item}-background);" class="color__square fn__flex-center">A</span>    
 </div>`,
                 click: () => {
@@ -1743,7 +1754,8 @@ export class Gutter {
             type: "separator"
         });
         return styles.concat([{
-            label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.hollow}">
+            iconHTML: isM ? '<span style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;" class="color__square fn__flex-center">A</span>' : Constants.ZWSP,
+            label: isM ? window.siyuan.languages.hollow : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.hollow}">
     <span style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;" class="color__square fn__flex-center">A</span>
 </div>`,
             click: () => {
@@ -1753,7 +1765,8 @@ export class Gutter {
                 });
             }
         }, {
-            label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.shadow}">
+            iconHTML: isM ? ' <span style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" class="color__square fn__flex-center">A</span>' : Constants.ZWSP,
+            label: isM ? window.siyuan.languages.shadow : `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.shadow}">
     <span style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" class="color__square fn__flex-center">A</span>
 </div>`,
             click: () => {