target maintenance content independently of decorative icons

app/assets/styles/deni.css

@@ -41,7 +41,7 @@
   background: var(--p-yellow-100);
   color: var(--p-yellow-900);
 }
-.deni-layout .maintenance-banner > span {
+.deni-layout .maintenance-message {
   min-width: 0;
   overflow-wrap: anywhere;
 }

app/layouts/default.vue

@@ -430,7 +430,7 @@ useHead(() => ({
       class="maintenance-banner"
     >
       <Icon name="lucide:triangle-alert" aria-hidden="true" />
-      <span>{{
+      <span class="maintenance-message">{{
         site.config.value?.maintenance_mode_message ||
         "站点维护中，部分功能可能不可用。"
       }}</span>

tests/review-style-layout.e2e.test.mjs

@@ -204,7 +204,7 @@ async function bannerGeometry(page) {
   return page.locator(".maintenance-banner").evaluate((banner) => {
     const box = banner.getBoundingClientRect(),
       range = document.createRange();
-    range.selectNodeContents(banner.querySelector("span"));
+    range.selectNodeContents(banner.querySelector(".maintenance-message"));
     const text = range.getBoundingClientRect(),
       bar = document.querySelector(".topbar").getBoundingClientRect();
     return {
@@ -250,7 +250,7 @@ test(
         );
         sizes.push({ width, noticeFits: true, headerBelowNotice: true });
       }
-      // 关闭控件按既有设计只在键盘焦点时显现，因此从键盘入口验证它不被维护条遮挡。
+      // 从键盘入口验证抽屉关闭控件不被维护条遮挡。
       const open = page.getByRole("button", { name: "打开菜单", exact: true });
       await open.focus();
       await page.keyboard.press("Enter");
@@ -308,7 +308,7 @@ test(
       const endReachable = await banner.evaluate((element) => {
         element.scrollTop = element.scrollHeight;
         const bounds = element.getBoundingClientRect(),
-          text = element.querySelector("span").firstChild,
+          text = element.querySelector(".maintenance-message").firstChild,
           end = document.createRange();
         end.setStart(text, text.length - 1);
         end.setEnd(text, text.length);