Merge pull request #44 from ClovertaTheTrilobita/dev

fix menu button

src/components/LatestComments.astro

@@ -2,7 +2,7 @@
 const { lang = "zh" } = Astro.props;
 const host = import.meta.env.PUBLIC_REMARK42_HOST;
 const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
-const max = 5;
+const max = 7;
 const heading = lang === "zh" ? "最新评论" : "Latest comments";
 ---
 

src/components/Posts/PostMenu.astro

@@ -202,7 +202,7 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
             position: fixed;
             top: 0.75rem;
             right: 0.8rem;
-            z-index: 30;
+            z-index: 40;
             max-width: min(78vw, 22rem);
             padding: 0.6rem 0.75rem;
             border: 1.5px solid var(--deep-blue);
@@ -252,7 +252,7 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
             position: fixed;
             top: calc(env(safe-area-inset-top) + 4.2rem);
             right: 0.8rem;
-            z-index: 29;
+            z-index: 39;
             width: min(88vw, 24rem);
             max-height: min(65vh, 32rem);
             overflow-x: hidden;
@@ -299,6 +299,10 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
             if (btn.dataset.bound === "true") return;
             btn.dataset.bound = "true";
 
+            // Keep the fixed controls outside the animated article container so
+            // the header and its divider cannot create a higher paint layer.
+            document.body.append(btn, panel);
+
             const defaultText =
                 preview.getAttribute("data-default-text") || "本文目录";
 

src/layouts/MarkdownPostLayout.astro

@@ -318,6 +318,7 @@ const publishedDate = new Intl.DateTimeFormat(
       "Noto Sans CJK SC",
       "Source Han Sans SC",
       sans-serif;
+    font-size: 1.07rem;
     font-weight: 400;
     line-height: 1.85;
     overflow-wrap: break-word;

src/styles/latest-comments.css

@@ -151,11 +151,18 @@
 .comment-source-context {
     display: flex;
     align-items: baseline;
+    flex: 1 1 auto;
     gap: 0.4rem;
     min-width: 0;
 }
 
+.comment-source-context > span {
+    flex: 0 0 auto;
+    white-space: nowrap;
+}
+
 .comment-title-link {
+    flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     color: #6f8090;