From ea7dc16f031fb4069c88fcf4c34f3c344b89843a Mon Sep 17 00:00:00 2001
From: HEIGE-PCloud <heige.pcloud@outlook.com>
Date: Fri, 29 Mar 2024 01:27:05 +0000
Subject: [PATCH] fix: mobile icon alignments

---
 assets/css/main.css          | 8 ++++++++
 layouts/partials/header.html | 8 ++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index b0b31d989..0b41274f3 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -602,6 +602,10 @@ ul {
   display: inline-block;
 }
 
+.tw-h-10 {
+  height: 2.5rem;
+}
+
 .tw-max-h-4 {
   max-height: 1rem;
 }
@@ -610,6 +614,10 @@ ul {
   max-height: 2rem;
 }
 
+.tw-w-full {
+  width: 100%;
+}
+
 .tw-translate-y-\[-2px\] {
   --tw-translate-y: -2px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f69f37f09..94ae2e110 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -142,7 +142,7 @@
                     <input type="text"
                         placeholder="{{ .Site.Params.search.placeholder | default (T `searchPlaceholder`) }}"
                         id="search-input-mobile">
-                    <button class="search-button search-toggle" id="search-toggle-mobile" title="{{ T `search` }}">
+                    <button class="search-button search-toggle tw-h-10" id="search-toggle-mobile" title="{{ T `search` }}">
                         {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "search") }}
                     </button>
                     <button class="search-button search-clear" id="search-clear-mobile" title="{{ T `clear` }}">
@@ -169,7 +169,7 @@
             </a>
             {{- end -}}
             {{- if eq .Site.Params.header.themeChangeMode "select" -}}
-            <button class="menu-item theme-select" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
+            <button class="menu-item theme-select tw-w-full" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                 {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "adjust") }}
                 <select class="color-theme-select" id="theme-select-mobile" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                     <option value="light">{{ T "Light" }}</option>
@@ -179,12 +179,12 @@
                 </select>
             </button>
             {{- else -}}
-            <button class="menu-item theme-switch" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
+            <button class="menu-item theme-switch tw-w-full" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                 {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "adjust") }}
             </button>
             {{- end -}}
             {{- if .Site.IsMultiLingual -}}
-            <button class="menu-item" title="{{ T " selectLanguage" }}">
+            <button class="menu-item tw-w-full" title="{{ T " selectLanguage" }}">
                 {{- .Language.LanguageName -}}
                 {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "chevron-right") }}
                 <select class="language-select" title="{{ T " selectLanguage" }}" onchange="location = this.value;">