🐛 fix: 引入了容器查询导致 toolbar absolute 布局失效

Author: frostime

src/components/docs-flow/docs-flow-toolbar.svelte

@@ -300,9 +300,7 @@
             />
 
             <button
-                class="b3-button {isMobile()
-                    ? 'b3-button--text'
-                    : ''}"
+                class="b3-button {isMobile() ? 'b3-button--text' : ''}"
                 on:click={onOpenConfig}
             >
                 {i18n.button.moreConfig}
@@ -390,25 +388,21 @@
     }
 
     .docs-flow__toolbar.is-mobile {
-        --width: 95%;
+        --width: 90%;
+        top: 25px;
+        section.docs-flow__toolbar-body {
+            width: 70%;
+            min-width: max-content;
+        }
     }
     .docs-flow__toolbar:not(.is-mobile) {
-        @container docs-flow (min-width: 1000px) {
-            --width: 72%;
-        }
-
-        @container docs-flow (max-width: 800px) {
-            --width: 90%;
-        }
+        --width: 80%;
 
         section.docs-flow__toolbar-body {
             @container docs-flow-toolbar (min-width: 720px) {
                 width: 720px;
             }
             @container docs-flow-toolbar (max-width: 720px) {
-                max-width: 100%;
-            }
-            @container docs-flow-toolbar (max-width: 400px) {
                 width: 100%;
             }
         }

src/components/docs-flow/docs-flow.svelte

@@ -3,7 +3,7 @@
  Author       : Yp Z
  Date         : 2023-07-28 20:49:27
  FilePath     : /src/components/docs-flow/docs-flow.svelte
- LastEditTime : 2025-01-18 17:31:07
+ LastEditTime : 2025-01-18 18:40:13
  Description  : 
 -->
 <script lang="ts">
@@ -208,9 +208,10 @@
 
     //全局 css，用于隐藏gutter
     let hideGutterClass: "" | "hide-gutter" = "";
+    let container: HTMLElement;
 </script>
 
-<main class="docs-flow-container">
+<main class="docs-flow-container" bind:this={container}>
     <Toolbar
         bind:rule
         bind:config
@@ -237,12 +238,6 @@
 </main>
 
 <style lang="scss">
-    .docs-flow-container {
-        container-type: inline-size;
-        container-name: docs-flow;
-        width: 100%;
-        position: relative;
-    }
 
     .docs-flow {
         :global(div.docs-flow__protyle .protyle-breadcrumb) {

src/display.ts

@@ -72,7 +72,7 @@ export class TabHub {
             this.plugin.saveRule(rule);
         });
         flow.$on("renameThis", ({ detail }) => {
-            console.log("renameThis", detail);
+            // console.log("renameThis", detail);
             let ruleHash = detail.ruleHash;
             const rule = this.tabs[ruleHash].rule;
 
@@ -112,7 +112,7 @@ export class TabHub {
             },
             destroy: () => {
                 delete Tabs[hash];
-                console.log("destroy tab:", hash);
+                // console.log("destroy tab:", hash);
             }
         });
         this.tabs[hash] = {
@@ -124,7 +124,7 @@ export class TabHub {
 
     private openTab(hash: any, title?: string) {
         // let tab = this.tabs[hash].tab;
-        console.log(`Open tab ${hash}`)
+        // console.log(`Open tab ${hash}`)
         let rule = this.tabs[hash].rule;
         title = title || rule.title;
         rule.title = title;
@@ -139,7 +139,7 @@ export class TabHub {
             keepCursor: false,
             removeCurrentTab: true
         }).then(tab => {
-            console.log(tab);
+            // console.log(tab);
             if (window.siyuan.config.fileTree.openFilesUseCurrentTab) {
                 let dblclickEvent = new MouseEvent('dblclick', {
                     view: window,