From 43809e0b43f126ed2e5aece7a476e975e8231655 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Fri, 17 Jan 2025 20:39:36 +0800
Subject: [PATCH] refactor: improve tutorial selection dropdown styles

---
 .../SelectionDropdown/index.module.scss       | 22 +++++++++++++++++++
 .../index.module.scss                         | 13 +++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/theme/BlogPostItem/Header/SelectionDropdown/index.module.scss b/src/theme/BlogPostItem/Header/SelectionDropdown/index.module.scss
index 83c8e79ee59..c6e990d05fa 100644
--- a/src/theme/BlogPostItem/Header/SelectionDropdown/index.module.scss
+++ b/src/theme/BlogPostItem/Header/SelectionDropdown/index.module.scss
@@ -8,10 +8,12 @@
 .dropdown {
   position: absolute;
   min-width: 650px;
+  max-height: 70vh;
   padding: 28px 24px;
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 20%);
+  overflow-y: auto;
 
   label {
     display: block;
@@ -74,4 +76,24 @@ html[data-theme='dark'] {
   .dropdown {
     background: var(--logto-container-neutral-bg);
   }
+}
+
+@media (max-width: 996px) {
+  .dropdown {
+    min-width: 500px;
+  }
+
+  .dropdownGroup {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .dropdown {
+    min-width: 250px;
+  }
+
+  .dropdownGroup {
+    grid-template-columns: repeat(1, 1fr);
+  }
 }
\ No newline at end of file
diff --git a/src/theme/BlogPostItem/Header/TitleWithSelectionDropdown/index.module.scss b/src/theme/BlogPostItem/Header/TitleWithSelectionDropdown/index.module.scss
index 778c06f017b..5ef565233c1 100644
--- a/src/theme/BlogPostItem/Header/TitleWithSelectionDropdown/index.module.scss
+++ b/src/theme/BlogPostItem/Header/TitleWithSelectionDropdown/index.module.scss
@@ -1,16 +1,21 @@
 .dropdownAnchor {
   padding-inline: 2px 0;
   outline: 2px solid transparent;
+  outline-offset: -2px;
   border-radius: 12px;
   cursor: pointer;
 
+  &:hover {
+    background: var(--logto-overlay-brand-hover);
+  }
+
   &::after {
     content: '';
     display: inline-block;
-    width: 24px;
-    height: 24px;
-    margin-inline-start: 4px;
-    background: var(--ifm-menu-link-sublist-icon) no-repeat 50% / 24px 24px;
+    width: 28px;
+    height: 28px;
+    margin-inline-start: 2px;
+    background: var(--ifm-menu-link-sublist-icon) no-repeat 50% / 28px 28px;
     transform: rotate(180deg);
   }