fix: menu vertical overflow

2026-01-30 16:31:52 +01:00 · 2025-12-27 15:05:12 +08:00
parent 94fdf4fded
commit 522bdbe29e
4 changed files with 84 additions and 106 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -390,9 +390,6 @@
  .mx-auto {
    margin-inline: auto;
  }
-  .-my-2 {
-    margin-block: calc(var(--spacing) * -2);
-  }
  .my-0 {
    margin-block: calc(var(--spacing) * 0);
  }
@@ -1144,8 +1141,8 @@
  .max-h-3 {
    max-height: calc(var(--spacing) * 3);
  }
-  .max-h-\[5rem\] {
-    max-height: 5rem;
+  .max-h-20 {
+    max-height: calc(var(--spacing) * 20);
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
@@ -1213,8 +1210,8 @@
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
-  .max-w-\[5rem\] {
-    max-width: 5rem;
+  .max-w-20 {
+    max-width: calc(var(--spacing) * 20);
  }
  .max-w-\[200px\] {
    max-width: 200px;
@@ -1267,6 +1264,9 @@
  .flex-none {
    flex: none;
  }
+  .shrink {
+    flex-shrink: 1;
+  }
  .shrink-0 {
    flex-shrink: 0;
  }
@@ -1417,9 +1417,6 @@
      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
-  .gap-x-3 {
-    column-gap: calc(var(--spacing) * 3);
-  }
  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }
@@ -1450,6 +1447,11 @@
  .self-center {
    align-self: center;
  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
  .\!overflow-hidden {
    overflow: hidden !important;
  }
@@ -1764,6 +1766,9 @@
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
@@ -1866,15 +1871,9 @@
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
-  .pt-\[2px\] {
-    padding-top: 2px;
-  }
  .pt-\[5px\] {
    padding-top: 5px;
  }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
@@ -1893,12 +1892,6 @@
  .pb-32 {
    padding-bottom: calc(var(--spacing) * 32);
  }
-  .pb-\[3px\] {
-    padding-bottom: 3px;
-  }
-  .pl-0 {
-    padding-left: calc(var(--spacing) * 0);
-  }
  .text-center {
    text-align: center;
  }
@@ -2762,11 +2755,6 @@
      margin-right: calc(var(--spacing) * 7);
    }
  }
-  .md\:ml-12 {
-    @media (width >= 853px) {
-      margin-left: calc(var(--spacing) * 12);
-    }
-  }
  .md\:flex {
    @media (width >= 853px) {
      display: flex;
@@ -2822,11 +2810,6 @@
      padding-inline: calc(var(--spacing) * 24);
    }
  }
-  .md\:pr-4 {
-    @media (width >= 853px) {
-      padding-right: calc(var(--spacing) * 4);
-    }
-  }
  .lg\:absolute {
    @media (width >= 1024px) {
      position: absolute;
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -15,7 +15,7 @@
              src="{{ $logo.RelPermalink }}"
              width="{{ div $logo.Width 2 }}"
              height="{{ div $logo.Height 2 }}"
-              class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom"
+              class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
              alt="">
          {{ end }}
        </a>
@@ -26,7 +26,7 @@

 {{/* Desktop navigation */}}
 {{ define "HeaderDesktopNavigation" }}
-  <nav class="hidden md:flex items-center gap-x-5 md:ml-12 h-12">
+  <nav class="hidden md:flex items-center gap-x-5 h-12">
    {{ if .Site.Menus.main }}
      {{ range .Site.Menus.main }}
        {{ partial "header/header-option.html" . }}
@@ -49,7 +49,7 @@
    {{ end }}

    {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
-      <div class="{{ if .Site.Params.footer.showScrollToTop | default true -}}{{- end }} flex items-center">
+      <div class="flex items-center">
        <button
          id="appearance-switcher"
          aria-label="Dark mode switcher"
@@ -67,11 +67,9 @@
  </nav>
 {{ end }}

-{{/* Mobile navigation */}}
-{{ define "HeaderMobileToolbar" }}
-  <div class="flex md:hidden items-center gap-x-5 md:ml-12 h-12">
-    <span></span>
-
+{{/* Mobile navigation - now includes toolbar functions */}}
+{{ define "HeaderMobileNavigation" }}
+  <div class="flex md:hidden items-center gap-x-5 h-12">
    {{ partial "translations.html" . }}
    {{ if .Site.Params.enableA11y | default false }}
      {{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }}
@@ -92,7 +90,7 @@
        id="appearance-switcher-mobile"
        aria-label="Dark mode switcher"
        type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400 me-1">
+        class="text-base hover:text-primary-600 dark:hover:text-primary-400">
        <div class="flex items-center justify-center dark:hidden">
          {{ partial "icon.html" "moon" }}
        </div>
@@ -101,62 +99,61 @@
        </div>
      </button>
    {{ end }}
+
+    {{/* Hamburger menu button */}}
+    {{ if .Site.Menus.main }}
+      <div id="menu-button" class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
+        {{ partial "icon.html" "bars" }}
+      </div>
+    {{ end }}
  </div>
-{{ end }}

-{{ define "HeaderMobileNavigation" }}
-  <div class="-my-2 md:hidden">
-    <div id="menu-button" class="block">
-      {{ if .Site.Menus.main }}
-        <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
-          {{ partial "icon.html" "bars" }}
-        </div>
-        <div
-          id="menu-wrapper"
-          class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
-          <ul
-            class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
-            <li id="menu-close-button">
-              <span
-                class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
-                {{ partial "icon.html" "xmark" }}
-              </span>
+  {{/* Mobile menu overlay */}}
+  {{ if .Site.Menus.main }}
+    <div
+      id="menu-wrapper"
+      class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
+      <ul
+        class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
+        <li id="menu-close-button">
+          <span
+            class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
+            {{ partial "icon.html" "xmark" }}
+          </span>
+        </li>
+
+        {{ range .Site.Menus.main }}
+          {{ partial "header/header-mobile-option.html" . }}
+        {{ end }}
+
+      </ul>
+      {{ if .Site.Menus.subnavigation }}
+        <hr>
+        <ul
+          class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
+          {{ range .Site.Menus.subnavigation }}
+            <li class="mb-1">
+              <a
+                href="{{ .URL }}"
+                {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
+                  target="_blank"
+                {{ end }}
+                class="flex items-center">
+                {{ if .Pre }}
+                  <span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
+                    {{ partial "icon.html" .Pre }}
+                  </span>
+                {{ end }}
+                <p class="text-sm font-sm" title="{{ .Title }}">
+                  {{ .Name | markdownify }}
+                </p>
+              </a>
            </li>
-
-            {{ range .Site.Menus.main }}
-              {{ partial "header/header-mobile-option.html" . }}
-            {{ end }}
-
-          </ul>
-          {{ if .Site.Menus.subnavigation }}
-            <hr>
-            <ul
-              class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
-              {{ range .Site.Menus.subnavigation }}
-                <li class="mb-1">
-                  <a
-                    href="{{ .URL }}"
-                    {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
-                      target="_blank"
-                    {{ end }}
-                    class="flex items-center">
-                    {{ if .Pre }}
-                      <span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
-                        {{ partial "icon.html" .Pre }}
-                      </span>
-                    {{ end }}
-                    <p class="text-sm font-sm" title="{{ .Title }}">
-                      {{ .Name | markdownify }}
-                    </p>
-                  </a>
-                </li>
-              {{ end }}
-            </ul>
          {{ end }}
-        </div>
+        </ul>
      {{ end }}
    </div>
-  </div>
+  {{ end }}
 {{ end }}

 {{ define "HeaderA11y" }}
@@ -200,7 +197,7 @@
      <div class="space-y-5">
        {{ $toggles := slice }}
        {{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
-        {{ $shouldDisableBackgroundImage := or 
+        {{ $shouldDisableBackgroundImage := or
          (eq site.Params.homepage.layout "background")
          (eq site.Params.article.heroStyle "background")
          (eq site.Params.list.heroStyle "background")
@@ -251,21 +248,19 @@
 {{ end }}

 {{/* ========== Render HTML ========== */}}
-<div
-  class="main-menu flex items-center justify-between py-6 md:justify-start gap-x-3 pt-[2px] pr-2 md:pr-4 pb-[3px] pl-0">
+<div class="main-menu flex items-center w-full gap-2 p-1">
  {{ template "HeaderLogo" . }}
-  <div class="flex flex-1 items-center justify-between">
-    <nav class="flex space-x-3">
-      {{ if not .Site.Params.disableTextInHeader | default true }}
-        <a href="{{ "" | relLangURL }}" class="text-base font-medium">
-          {{ .Site.Title | markdownify }}
-        </a>
-      {{ end }}
-    </nav>
+  {{ if not .Site.Params.disableTextInHeader | default true }}
+    <a
+      href="{{ "" | relLangURL }}"
+      class="text-base font-medium truncate min-w-0 shrink">
+      {{ .Site.Title | markdownify }}
+    </a>
+  {{ end }}
+  <div class="flex items-center ms-auto">
    {{ template "HeaderDesktopNavigation" . }}
-    {{ template "HeaderMobileToolbar" . }}
+    {{ template "HeaderMobileNavigation" . }}
  </div>
-  {{ template "HeaderMobileNavigation" . }}
 </div>

 {{ if .Site.Menus.subnavigation }}
--- a/layouts/partials/header/header-option-nested.html
+++ b/layouts/partials/header/header-option-nested.html
@@ -15,7 +15,7 @@
      {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
      class="text-base font-medium hover:text-primary-600 dark:hover:text-primary-400"
      title="{{ .Title }}">
-      <p>
+      <p class="break-normal">
        {{ .Name | markdownify }}
      </p>
    </a>
--- a/layouts/partials/header/header-option-simple.html
+++ b/layouts/partials/header/header-option-simple.html
@@ -10,7 +10,7 @@
    </span>
  {{ end }}
  {{ if .Name }}
-    <p class="text-base font-medium">
+    <p class="text-base font-medium break-normal">
      {{ .Name | markdownify }}
    </p>
  {{ end }}