From da5fd305eb57d50d0d23de84ab28fc782115c90a Mon Sep 17 00:00:00 2001
From: zenfyr <git@zenfyr.dev>
Date: Mon, 8 Jun 2026 14:26:56 +0700
Subject: [PATCH] remove height animations from fake dropdowns

---
 src/components/Header.astro  | 4 ++--
 src/components/header.css    | 2 --
 src/layouts/WikiLayout.astro | 2 +-
 src/layouts/layout.css       | 5 ++++-
 src/styles/base.css          | 7 +++++++
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 2e02feb..a71d3d7 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -23,7 +23,7 @@ const { locale, version } = Astro.props;
 
   <div class="header-right">
     <div class="header-switches">
-      <details class="header-version">
+      <details class="static header-version">
         <summary>
           <span title={t(locale, "switch.versions")}
             ><TablerIcon icon="git-fork" /></span
@@ -42,7 +42,7 @@ const { locale, version } = Astro.props;
         </ul>
       </details>
 
-      <details class="header-language">
+      <details class="static header-language">
         <summary>
           <span title={t(locale, "switch.language")}
             ><TablerIcon icon="language-hiragana" /></span
diff --git a/src/components/header.css b/src/components/header.css
index 78eb08e..3f4d15c 100644
--- a/src/components/header.css
+++ b/src/components/header.css
@@ -73,8 +73,6 @@ header {
       border-radius: 0.75rem;
       padding: 0.75rem;
 
-      margin-block-start: 0;
-
       background-color: var(--color-elevation-1);
       filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.25));
       min-width: 200px;
diff --git a/src/layouts/WikiLayout.astro b/src/layouts/WikiLayout.astro
index 9f102de..da62cd7 100644
--- a/src/layouts/WikiLayout.astro
+++ b/src/layouts/WikiLayout.astro
@@ -65,7 +65,7 @@ const content = headings.filter((h) => h.depth == 2);
 
         {
           content.length > 0 && (
-            <details>
+            <details class="static">
               <summary>
                 <span>{t(locale, "content.title")}</span>
               </summary>
diff --git a/src/layouts/layout.css b/src/layouts/layout.css
index bdc0e12..cd4aef5 100644
--- a/src/layouts/layout.css
+++ b/src/layouts/layout.css
@@ -173,8 +173,11 @@ body {
 
           background-color: var(--color-elevation-1);
           filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.25));
+
           min-width: 250px;
           max-width: 90vw;
+          overflow-y: auto;
+          max-height: min(300px, 60dvh);
 
           white-space: normal;
 
@@ -273,7 +276,7 @@ body {
       margin-block-start: var(--article-margin);
       right: 0;
       position: sticky;
-      height: calc(100vh - var(--article-margin));
+      height: calc(100dvh - var(--article-margin));
 
       overflow-x: hidden;
       overflow-y: auto;
diff --git a/src/styles/base.css b/src/styles/base.css
index dc6e042..4686987 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -122,6 +122,13 @@ details {
     border-radius: 0.75rem;
   }
 
+  &.static {
+    &::details-content {
+      height: auto;
+      margin-block-start: 0.25rem;
+    }
+  }
+
   &::details-content {
     z-index: -1;
     border-radius: 0.75rem;
-- 
2.51.2