:lipstick: https://github.com/siyuan-note/siyuan/issues/6197

app/src/assets/scss/_layout.scss

@@ -1,11 +1,9 @@
 .layout {
-  &__wnd--active {
-    .layout-tab-bar .item--focus {
-      box-shadow: inset 0 -2px 0 0 var(--b3-theme-primary);
+  &__wnd--active .layout-tab-bar .item--focus {
+    box-shadow: inset 0 -2px 0 0 var(--b3-theme-primary);
 
-      & > .item__text {
-        color: var(--b3-theme-on-background);
-      }
+    & > .item__text {
+      color: var(--b3-theme-on-background);
     }
   }
 

app/src/assets/scss/_list.scss

@@ -35,7 +35,7 @@
       top: 0;
       position: absolute;
       border-left: 1px solid var(--b3-theme-background-light);
-      left: -55px;
+      left: -47px;
     }
 
     & > ul li:before {

app/src/assets/scss/_reset.scss

@@ -19,8 +19,36 @@ body {
   max-height: 100%;
   overflow: hidden;
 
-  &.body--blur .toolbar {
-    background: var(--b3-toolbar-blur-background);
+  &.body--blur {
+    .toolbar {
+      background: var(--b3-toolbar-blur-background);
+    }
+
+    .layout {
+      &__wnd--active .layout-tab-bar .item--focus {
+        box-shadow: inset 0 -2px 0 0 var(--b3-theme-background-light);
+
+        & > .item__text {
+          color: var(--b3-theme-on-surface);
+        }
+      }
+
+      &__tab--active {
+        .b3-list--background .b3-list-item--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) {
+          background-color: var(--b3-list-hover);
+        }
+
+        .graph__svg,
+        .inbox__list {
+          background-color: var(--b3-theme-surface);
+        }
+      }
+    }
+
+    .dock__item--activefocus {
+      color: var(--b3-theme-on-surface-light) !important;
+      background-color: var(--b3-theme-background-light) !important;
+    }
   }
 
   &.body--win32 {

app/src/config/index.ts

@@ -27,7 +27,7 @@ export const openSetting = () => {
         content: `<div class="fn__flex-column" style="border-radius: 4px;overflow: hidden;position: relative">
 <div class="b3-form__icon search__header"><svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg><input class="b3-text-field b3-text-field--text fn__block b3-form__icon-input"></div>
 <div class="fn__flex-1 fn__flex">
-  <ul class="b3-tab-bar b3-list b3-list--background" style="user-select:none;width: 180px;height:${height}px;overflow: auto">
+  <ul class="b3-tab-bar b3-list b3-list--background" style="user-select:none;width: 180px;height:${height}px;overflow: auto;padding: 8px 0;box-sizing: border-box">
     <li data-name="editor" class="b3-list-item--focus b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconEdit"></use></svg>${window.siyuan.languages.editor}</li>
     <li data-name="filetree" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconFiles"></use></svg>${window.siyuan.languages.fileTree}</li>
     <li data-name="image" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconImage"></use></svg>${window.siyuan.languages.assets}</li>

app/src/layout/dock/Bookmark.ts

@@ -71,7 +71,7 @@ export class Bookmark extends Model {
     <span class="fn__space"></span>
     <span data-type="min" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
 </div>
-<div class="fn__flex-1"></div>`;
+<div class="fn__flex-1" style="margin-bottom: 8px"></div>`;
         this.tree = new Tree({
             element: this.element.lastElementChild as HTMLElement,
             data: null,

app/src/layout/dock/Inbox.ts

@@ -285,7 +285,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
             if (response.data.data.shorthands.length === 0) {
                 html = '<ul class="b3-list b3-list--background"><li class="b3-list--empty">打开帮助文档搜索 <b>收集箱</b> 查看使用说明</li></ul>';
             } else {
-                html = "<ul class=\"b3-list b3-list--background\">";
+                html = '<ul style="padding: 8px 0" class="b3-list b3-list--background">';
                 response.data.data.shorthands.forEach((item: IInbox) => {
                     html += `<li style="padding-left: 0" data-id="${item.oId}" class="b3-list-item">
     <label data-type="select" class="fn__flex">

app/src/layout/dock/Outline.ts

@@ -85,7 +85,7 @@ export class Outline extends Model {
     <span data-type="min" class="${this.type === "local" ? "fn__none " : ""}block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
 </div>
 <div class="b3-list-item"></div>
-<div class="fn__flex-1"></div>`;
+<div class="fn__flex-1" style="margin-bottom: 8px"></div>`;
         this.element = options.tab.panelElement.lastElementChild as HTMLElement;
         this.headerElement = options.tab.panelElement.firstElementChild as HTMLElement;
         this.tree = new Tree({

app/src/layout/dock/Tag.ts

@@ -72,7 +72,7 @@ export class Tag extends Model {
     <span class="fn__space"></span>
     <span data-type="min" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
 </div>
-<div class="fn__flex-1"></div>`;
+<div class="fn__flex-1" style="margin-bottom: 8px"></div>`;
 
         this.tree = new Tree({
             element: this.element.lastElementChild as HTMLElement,

app/src/layout/util.ts

@@ -412,11 +412,15 @@ export const layoutToJSON = (layout: Layout | Wnd | Tab | Model, json: any) => {
 
 export const resizeDrag = () => {
     const dragElement = document.getElementById("drag");
-    const right = dragElement.getBoundingClientRect().left - document.querySelector("#windowControls").clientWidth - document.querySelector("#barSearch").clientWidth * 4;
-    if (right < dragElement.clientWidth) {
-        dragElement.style.paddingRight = right + "px";
+    const width = dragElement.clientWidth
+    const left = dragElement.getBoundingClientRect().left
+    const right = document.querySelector("#windowControls").clientWidth + document.querySelector("#barSearch").clientWidth * 4;
+    if (left > right && left - right < width) {
+        dragElement.style.paddingRight = (left - right) + "px";
+    } else if (left < right && right - left < width) {
+        dragElement.style.paddingLeft = (right - left) + "px";
     } else {
-        dragElement.style.paddingRight = "";
+        dragElement.style.padding = "";
     }
 };
 

app/src/protyle/hint/index.ts

@@ -209,7 +209,7 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
             if (hintData.html === "separator") {
                 hintsHTML += '<div class="b3-menu__separator"></div>';
             } else {
-                hintsHTML += `<button class="b3-list-item b3-list-item--two fn__block${focusClass}" data-value="${encodeURIComponent(hintData.value)}">${hintData.html}</button>`;
+                hintsHTML += `<button style="width: calc(100% - 16px)" class="b3-list-item b3-list-item--two${focusClass}" data-value="${encodeURIComponent(hintData.value)}">${hintData.html}</button>`;
             }
         });
         if (hasSearch) {

app/src/search/index.ts

@@ -43,6 +43,7 @@ export class Search extends Model {
         </div>
         <div id="globalSearchResult" class="b3-list-item ft__smaller ft__on-surface"></div>
         <div id="globalSearchList" class="fn__flex-1 b3-list b3-list--background"></div>
+        <div class="fn__hr"></div>
         <div class="fn__loading fn__loading--top"><img width="120px" src="/stage/loading-pure.svg"></div>
     </div>
     <div class="fn__flex-1" id="searchPreview"></div>

app/src/search/spread.ts

@@ -140,7 +140,7 @@ export const openSearch = async (hotkey: string, key?: string, notebookId?: stri
             <svg class="svg ft__on-surface" id="searchFilter" style="height: 19px;float: left"><use xlink:href="#iconSettings"></use></svg>
         </span>
     </div>
-    <div id="searchList" style="position:relative;height:calc(50% - 69px);overflow: auto" class="b3-list b3-list--background search__list"></div>
+    <div id="searchList" style="position:relative;height:calc(50% - 69px);overflow: auto;padding-bottom: 8px" class="b3-list b3-list--background search__list"></div>
     <div id="searchPreview" class="fn__flex-1 spread-search__preview"></div></div>
     <div id="searchFilterPanel" class="fn__none spread-search__filter">
         <label class="fn__flex">

app/src/util/history.ts

@@ -259,7 +259,7 @@ export const openHistory = () => {
                 <button data-type="rebuildIndex" class="b3-button b3-button--outline">${window.siyuan.languages.rebuildIndex}</button>
             </div>
             <div class="fn__flex fn__flex-1"${isMobile() ? ' style="flex-direction: column;"' : ""}>
-                <ul style="${isMobile() ? "height: 30%" : "width:200px"};overflow: auto;" class="b3-list b3-list--background">
+                <ul style="${isMobile() ? "height: 30%" : "width:200px"};overflow: auto;padding-bottom: 8px;" class="b3-list b3-list--background">
                     <li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>
                 </ul>
                 <div class="fn__flex-1 history__text fn__none" data-type="assetPanel"></div>
@@ -267,7 +267,7 @@ export const openHistory = () => {
                 <div class="fn__flex-1 history__text fn__none" style="padding: 0" data-type="docPanel"></div>
             </div>
         </div>
-        <ul data-type="notebook" style="background-color: var(--b3-theme-background);border-radius: 0 0 4px 4px" class="fn__none b3-list b3-list--background">
+        <ul data-type="notebook" style="background-color: var(--b3-theme-background);border-radius: 0 0 4px 4px;padding-bottom: 8px;" class="fn__none b3-list b3-list--background">
             <li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>
         </ul>
         <div data-type="repo" class="fn__none history__repo">
@@ -286,7 +286,7 @@ export const openHistory = () => {
                     <svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.createSnapshot}
                 </button>
             </div>    
-            <ul style="background: var(--b3-theme-background);" class="b3-list b3-list--background fn__flex-1">
+            <ul style="background: var(--b3-theme-background);padding-bottom: 8px;" class="b3-list b3-list--background fn__flex-1">
                 <li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>
             </ul>
         </div>

app/src/util/pathName.ts

@@ -93,7 +93,8 @@ export const movePathTo = async (notebookId: string, path: string, focus = true)
     <svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
     <input class="b3-text-field fn__block b3-form__icon-input" value="" placeholder="${window.siyuan.languages.search}">
 </div>
-<ul id="foldList" class="b3-list b3-list--background" style="height: 50vh;overflow: auto;position: relative"></ul>`,
+<ul id="foldList" class="b3-list b3-list--background" style="height: 50vh;overflow: auto;position: relative"></ul>
+<div class="fn__hr"></div>`,
         width: isMobile() ? "80vw" : "50vw",
         destroyCallback() {
             if (range && focus) {