From d472836d5fe80439dcb9ae19e35654378bef250e Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 30 Apr 2024 17:13:32 +0800
Subject: [PATCH] fix: styling discrepancies on macOS 11.x below (#245)

---
 frontend/src/components/sidebar/Ribbon.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/sidebar/Ribbon.vue b/frontend/src/components/sidebar/Ribbon.vue
index e78f1961..1ab43e62 100644
--- a/frontend/src/components/sidebar/Ribbon.vue
+++ b/frontend/src/components/sidebar/Ribbon.vue
@@ -172,7 +172,6 @@ const exThemeVars = computed(() => {
                 :options="preferencesOptions"
                 :render-icon="({ icon }) => render.renderIcon(icon)"
                 :render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
-                content-class="nav-menu-button"
                 trigger="click"
                 @select="onSelectPreferenceMenu">
                 <icon-button :icon="Config" :size="iconSize" :stroke-width="3" />
@@ -182,7 +181,6 @@ const exThemeVars = computed(() => {
                 :icon="QRCode"
                 :size="iconSize"
                 :tooltip-delay="100"
-                class="nav-menu-button"
                 t-tooltip="ribbon.wechat_official"
                 @click="openWechatOfficial" />
             <icon-button
@@ -191,14 +189,12 @@ const exThemeVars = computed(() => {
                 :icon="Twitter"
                 :size="iconSize"
                 :tooltip-delay="100"
-                class="nav-menu-button"
                 t-tooltip="ribbon.follow_x"
                 @click="openX" />
             <icon-button
                 :icon="Github"
                 :size="iconSize"
                 :tooltip-delay="100"
-                class="nav-menu-button"
                 t-tooltip="ribbon.github"
                 @click="openGithub" />
         </div>
@@ -280,15 +276,10 @@ const exThemeVars = computed(() => {
     .nav-menu-item {
         align-items: center;
         padding: 10px 0 15px;
-        gap: 20px;
         --wails-draggable: none;
 
-        .nav-menu-button {
-            margin-bottom: 6px;
-
-            :hover {
-                color: v-bind('themeVars.primaryColor');
-            }
+        button {
+            margin: 10px 0;
         }
     }
 }