style: make the dropdown menu width fit the content

razonyang · Apr 6, 2023 · 9ba983b · 9ba983b
1 parent 6b763c1
commit 9ba983b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/assets/main/scss/_top-app-bar.scss b/assets/main/scss/_top-app-bar.scss
@@ -137,3 +137,9 @@ $header-caret-width: 0.35em;
     }
   }
 }
+
+.font-size-dropdown-menu,
+.mode-dropdown-menu,
+.language-dropdown-menu {
+  min-width: 1px;
+}
diff --git a/layouts/partials/header/font-size.html b/layouts/partials/header/font-size.html
@@ -4,7 +4,7 @@
         <i class="fas fa-fw fa-font"></i>
         <span class="d-xxl-none">{{ i18n "font_size" }}</span>
     </a>
-    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="fontSizeDropdown">
+    <ul class="font-size-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby="fontSizeDropdown">
         {{- range slice "xs" "sm" "md" "lg" "xl" }}
         <li>
             <button class="font-size-item dropdown-item{{ if eq . "md" }} active{{ end }}" data-size="{{ . }}">

diff --git a/layouts/partials/header/languages.html b/layouts/partials/header/languages.html
@@ -4,7 +4,7 @@
         <i class="fas fa-fw fa-globe"></i>
         <span class="d-xxl-none">{{ i18n "language" }}</span>
     </a>
-    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
+    <ul class="language-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
         {{- range $.Site.Home.AllTranslations }}
         <li>
         <a class="dropdown-item{{ if eq $.Lang .Language.Lang }} active{{ end }}" href="{{ .RelPermalink }}">

diff --git a/layouts/partials/header/theme.html b/layouts/partials/header/theme.html
@@ -9,7 +9,7 @@
         <i class="mode-icon fas fa-fw fa-{{ (index $modes $mode ).icon }}" id="modeIcon"></i>
         <span class="d-xxl-none">{{ i18n "mode" }}</span>
     </a>
-    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="modeDropdown">
+    <ul class="mode-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby="modeDropdown">
         {{- range slice "light" "dark" "auto" }}
         {{- $item := index $modes . }}
         <li class="mode-item{{ if eq $mode . }} active{{ end }}" data-color-mode="{{ . }}" data-icon="{{ $item.icon }}">