From fcae664425995be821f8c1f24e62a9e30df6589c Mon Sep 17 00:00:00 2001
From: Ryan Pratt <ryan.pratt@openc3.com>
Date: Wed, 18 Dec 2024 14:38:43 -0700
Subject: [PATCH] Fix menu button height when zoomed out

---
 .../src/components/TopBar.vue                 | 27 ++++++++++---------
 .../src/tools/base/Notifications.vue          |  1 -
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TopBar.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TopBar.vue
index 2882e461b..661f008a3 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TopBar.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TopBar.vue
@@ -34,10 +34,12 @@
             v-bind="props"
             variant="outlined"
             class="mx-1 menu-button"
+            :text="menu.label"
             :data-test="formatDT(`${title} ${menu.label}`)"
           >
-            <span v-text="menu.label" />
-            <v-icon class="myicon" end> mdi-menu-down </v-icon>
+            <template v-slot:append>
+              <v-icon class="menu-button-icon"> mdi-menu-down </v-icon>
+            </template>
           </v-btn>
         </template>
         <v-list>
@@ -184,22 +186,21 @@ export default {
 .menu-button {
   border-color: var(--color-border-interactive-muted) !important;
   background-color: var(--color-background-base-default) !important;
-  padding-right: 3px !important;
 }
-span.v-btn__content span {
-  padding-right: 5px;
-}
-.list-action :deep(label) {
-  color: white;
-  padding-left: 20px;
-}
-.myicon {
+.menu-button-icon {
   background-color: var(--color-background-surface-selected);
   border: 1px solid currentColor;
   border-radius: 3px;
-  height: 36px !important;
-  width: 36px !important;
+  height: calc(var(--v-btn-height));
+  width: calc(var(--v-btn-height));
   margin-top: -1px;
+  margin-bottom: -1px;
+  margin-left: 3px; /* parent's left margin (4px) - border (1px) */
+  margin-right: -13px; /* parent's right margin (4px) - border (1px) - padding (16px) */
+}
+.list-action :deep(label) {
+  color: white;
+  padding-left: 20px;
 }
 .v-list :deep(.v-label) {
   margin-left: 5px;
diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/base/Notifications.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/base/Notifications.vue
index 615b283c5..37d648c8e 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/base/Notifications.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/base/Notifications.vue
@@ -171,7 +171,6 @@
 <script>
 import { formatDistanceToNow } from 'date-fns'
 import { Api, Cable } from '@openc3/js-common/services'
-import { Icons } from '@/components'
 import {
   AstroStatusColors,
   AstroStatusIndicator,