Merge pull request #974 from logto-io/charles-log-10714-improve-layou…

…t-responsiveness

refactor: improve tutorial selection dropdown styles

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);
+  }
 }

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);
   }