From 5302e815f543da2b3dc7a24c3c2a6526e03dd879 Mon Sep 17 00:00:00 2001
From: Jason Thomas <jason@openc3.com>
Date: Thu, 14 Dec 2023 17:04:42 -0700
Subject: [PATCH 1/3] Further astro refinements

---
 .../tools/BucketExplorer/BucketExplorer.vue   |  2 +-
 .../CommandSender/CommandParameterEditor.vue  |  6 +--
 .../src/tools/CommandSender/CommandSender.vue |  4 +-
 .../src/tools/CmdTlmServer/CmdPacketsTab.vue  |  2 +-
 .../src/tools/CmdTlmServer/InterfacesTab.vue  |  2 +-
 .../src/tools/CmdTlmServer/RoutersTab.vue     |  2 +-
 .../src/tools/CmdTlmServer/StatusTab.vue      |  2 +-
 .../src/tools/CmdTlmServer/TargetsTab.vue     |  2 +-
 .../src/tools/CmdTlmServer/TlmPacketsTab.vue  |  2 +-
 .../src/tools/DataExtractor/DataExtractor.vue |  2 +-
 .../src/tools/Handbooks/Handbooks.vue         |  7 +++-
 .../src/tools/LimitsMonitor/LimitsControl.vue | 11 ++++--
 .../src/tools/LimitsMonitor/LimitsEvents.vue  |  4 +-
 .../src/tools/LimitsMonitor/LimitsMonitor.vue |  2 +-
 .../src/tools/PacketViewer/PacketViewer.vue   |  4 +-
 .../src/tools/ScriptRunner/RunningScripts.vue | 10 ++---
 .../tools/ScriptRunner/ScriptLogMessages.vue  |  2 +-
 .../src/tools/ScriptRunner/ScriptRunner.vue   |  3 ++
 .../src/tools/ScriptRunner/SuiteRunner.vue    |  9 +++--
 .../src/tools/TableManager/TableManager.vue   | 15 ++++++--
 .../src/tools/TlmViewer/TlmViewer.vue         |  4 ++
 .../assets/stylesheets/layout/_overrides.scss | 37 +++++++++++++++++++
 .../src/components/Graph.vue                  | 12 ++++--
 .../src/components/LogMessages.vue            |  1 +
 .../components/TargetPacketItemChooser.vue    |  9 ++++-
 .../src/components/TopBar.vue                 |  3 +-
 .../dataviewer/HistoryComponent.vue           |  6 +--
 .../src/components/widgets/ComboboxWidget.vue |  5 ++-
 .../src/tools/admin/tabs/InterfacesTab.vue    |  7 +---
 .../src/tools/admin/tabs/MicroservicesTab.vue |  4 +-
 .../src/tools/admin/tabs/PackagesTab.vue      |  4 +-
 .../src/tools/admin/tabs/RoutersTab.vue       |  2 +-
 .../src/tools/admin/tabs/TargetsTab.vue       |  4 +-
 .../tools/base/components/ScopeSelector.vue   |  3 +-
 34 files changed, 133 insertions(+), 61 deletions(-)

diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
index 6675c7d710..55671a8025 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
@@ -62,7 +62,7 @@
           dense
           single-line
           hide-details
-          style="max-width: 350px"
+          class="search"
         />
       </v-card-title>
       <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandParameterEditor.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandParameterEditor.vue
index 9f20c1b7c5..e9ceaf4716 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandParameterEditor.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandParameterEditor.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -33,17 +33,17 @@
     <v-container v-else>
       <v-row no-gutters>
         <v-col>
-          <v-overflow-btn
+          <v-select
             :items="states"
             v-model="value.selected_state"
             @change="handleStateChange"
             item-text="label"
             item-value="value"
-            label="State"
             style="primary"
             :class="stateClass()"
             hide-details
             dense
+            outlined
             data-test="cmd-param-select"
           />
         </v-col>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue
index e517a39554..7a1c1b76ca 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -49,7 +49,7 @@
             dense
             single-line
             hide-details
-            style="max-width: 350px"
+            class="search"
           />
         </v-card-title>
         <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdPacketsTab.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdPacketsTab.vue
index 4d4c3fabeb..cd28796f68 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdPacketsTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdPacketsTab.vue
@@ -34,7 +34,7 @@
         dense
         single-line
         hide-details
-        style="max-width: 350px"
+        class="search"
       />
     </v-card-title>
     <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfacesTab.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfacesTab.vue
index 1ec12efebd..07c93f0de2 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfacesTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfacesTab.vue
@@ -34,7 +34,7 @@
         dense
         single-line
         hide-details
-        style="max-width: 350px"
+        class="search"
       />
     </v-card-title>
     <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/RoutersTab.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/RoutersTab.vue
index c8feafa2b8..56b7783869 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/RoutersTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/RoutersTab.vue
@@ -34,7 +34,7 @@
         dense
         single-line
         hide-details
-        style="max-width: 350px"
+        class="search"
       />
     </v-card-title>
     <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/StatusTab.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/StatusTab.vue
index 35edfc57b2..da6318d02b 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/StatusTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/StatusTab.vue
@@ -36,7 +36,7 @@
           dense
           single-line
           hide-details
-          style="max-width: 350px"
+          class="search"
         />
       </v-card-title>
       <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/TargetsTab.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/TargetsTab.vue
index 128f6149cb..7b2ec20d12 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/TargetsTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/TargetsTab.vue
@@ -34,7 +34,7 @@
         dense
         single-line
         hide-details
-        style="max-width: 350px"
+        class="search"
       />
     </v-card-title>
     <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/TlmPacketsTab.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/TlmPacketsTab.vue
index 70cf468ebc..65743773c5 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/TlmPacketsTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/TlmPacketsTab.vue
@@ -34,7 +34,7 @@
         dense
         single-line
         hide-details
-        style="max-width: 350px"
+        class="search"
       />
     </v-card-title>
     <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue
index 824f4acc94..2850d808f5 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue
@@ -152,7 +152,7 @@
             dense
             single-line
             hide-details
-            style="max-width: 350px"
+            class="search"
           />
         </v-card-title>
         <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/src/tools/Handbooks/Handbooks.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/src/tools/Handbooks/Handbooks.vue
index d0af1df133..1ad7b89e61 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/src/tools/Handbooks/Handbooks.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/src/tools/Handbooks/Handbooks.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -30,7 +30,9 @@
             <v-select
               class="ma-0 pa-0"
               label="Select Target(s)"
+              dense
               hide-details
+              outlined
               :items="targetNames"
               v-model="selectedTargetNames"
               @change="targetSelect"
@@ -62,10 +64,11 @@
           <v-col>
             <v-select
               label="Item Columns"
+              dense
               hide-details
+              outlined
               v-model="columns"
               :items="columnItems"
-              dense
             ></v-select>
           </v-col>
         </v-row>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsControl.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsControl.vue
index 81520c6601..9f792fb2f8 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsControl.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsControl.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -23,22 +23,24 @@
 <template>
   <div>
     <v-card class="pa-5">
-      <v-row dense>
+      <v-row class="ma-1">
         <v-text-field
           dense
           outlined
           readonly
+          hide-details
           label="Overall Limits State"
           :prepend-inner-icon="astroIcon"
           :value="overallStateFormatted"
           :class="textFieldClass"
-          style="padding-right: 10px; max-width: 280px"
+          style="margin-right: 10px; max-width: 280px"
           data-test="overall-state"
         />
         <v-text-field
           dense
           outlined
           readonly
+          hide-details
           label="Current Limits Set"
           :value="currentLimitsSet"
           style="max-width: 200px"
@@ -476,6 +478,9 @@ export default {
   position: absolute;
   top: 50px;
 }
+.v-input {
+  background-color: var(--color-background-base-default);
+}
 /* TODO: Color the border */
 .textfield-green :deep(.v-text-field__slot) input,
 .textfield-green :deep(.v-text-field__slot) label {
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsEvents.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsEvents.vue
index e3b784fd2b..3de7ea4ccf 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsEvents.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsEvents.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -34,7 +34,7 @@
         dense
         single-line
         hide-details
-        style="max-width: 300px"
+        class="search"
       />
     </v-card-title>
     <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsMonitor.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsMonitor.vue
index 9963c0c622..1643030247 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsMonitor.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsMonitor.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue
index 5a1a3eb604..49279cc5a7 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -43,7 +43,7 @@
           dense
           single-line
           hide-details
-          style="max-width: 350px"
+          class="search"
         />
       </v-card-title>
       <v-data-table
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/RunningScripts.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/RunningScripts.vue
index 9987ffb033..d314a7624c 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/RunningScripts.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/RunningScripts.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -33,7 +33,7 @@
           <v-spacer />
           <v-text-field
             v-model="runningSearch"
-            class="pt-0"
+            class="pt-0 search"
             label="Search"
             prepend-inner-icon="mdi-magnify"
             clearable
@@ -41,8 +41,7 @@
             dense
             single-line
             hide-details
-            data-test="running-search"
-            style="max-width: 350px" /></v-row
+            data-test="running-search" /></v-row
       ></v-card-title>
       <v-data-table
         :headers="runningHeaders"
@@ -89,7 +88,7 @@
           <v-spacer />
           <v-text-field
             v-model="completedSearch"
-            class="pt-0"
+            class="pt-0 search"
             label="Search"
             prepend-inner-icon="mdi-magnify"
             clearable
@@ -97,7 +96,6 @@
             dense
             single-line
             hide-details
-            style="max-width: 350px"
           />
         </v-row>
       </v-card-title>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptLogMessages.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptLogMessages.vue
index 3048769a50..7ddd1337fb 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptLogMessages.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptLogMessages.vue
@@ -61,7 +61,7 @@
           dense
           single-line
           hide-details
-          style="max-width: 300px"
+          class="search"
           data-test="search-messages"
         />
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
index 10d25e17fe..a501454c22 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
@@ -2336,6 +2336,9 @@ hr {
   width: 5%;
   margin: auto;
 }
+.script-state {
+  background-color: var(--color-background-base-default);
+}
 .script-state :deep(input) {
   text-transform: capitalize;
 }
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/SuiteRunner.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/SuiteRunner.vue
index aa331b1e68..d6888b366c 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/SuiteRunner.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/SuiteRunner.vue
@@ -51,9 +51,10 @@
             <v-col cols="5">
               <v-select
                 label="Suite:"
-                class="ma-3"
+                class="mb-2 mr-2"
                 hide-details
                 dense
+                outlined
                 @change="suiteChanged"
                 :items="suites"
                 v-model="suite"
@@ -119,9 +120,10 @@
             <v-col cols="5">
               <v-select
                 label="Group:"
-                class="ma-3"
+                class="mb-2 mr-2"
                 hide-details
                 dense
+                outlined
                 @change="groupChanged"
                 :items="groups"
                 v-model="group"
@@ -194,9 +196,10 @@
             <v-col cols="5">
               <v-select
                 label="Script:"
-                class="ma-3"
+                class="mb-2 mr-2"
                 hide-details
                 dense
+                outlined
                 @change="scriptChanged"
                 :items="scripts"
                 v-model="script"
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue
index e82fa8592f..6a127bdfb6 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -58,7 +58,7 @@
       style="position: fixed; top: -100%"
     />
     <v-card>
-      <v-container style="padding-bottom: 0px">
+      <v-card-text>
         <v-row dense>
           <v-col cols="6">
             <v-text-field
@@ -69,6 +69,7 @@
               label="Filename"
               v-model="fullFilename"
               id="filename"
+              class="filename"
               data-test="filename"
             />
           </v-col>
@@ -81,6 +82,7 @@
               label="Definition"
               v-model="definitionFilename"
               id="definition-filename"
+              class="filename"
               data-test="definition-filename"
             />
           </v-col>
@@ -161,7 +163,7 @@
             </v-tooltip>
           </v-col>
         </v-row>
-      </v-container>
+      </v-card-text>
       <v-card-title style="padding-top: 0px">
         Items
         <v-spacer />
@@ -174,7 +176,7 @@
           dense
           single-line
           hide-details
-          style="max-width: 350px"
+          class="search"
         />
       </v-card-title>
       <v-tabs v-model="curTab">
@@ -754,3 +756,8 @@ export default {
   },
 }
 </script>
+<style scoped>
+.filename {
+  background-color: var(--color-background-base-default);
+}
+</style>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue
index b0400efb00..237f6d99a7 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue
@@ -31,7 +31,9 @@
             <v-row class="pt-3">
               <v-select
                 class="pa-0 mr-4"
+                dense
                 hide-details
+                outlined
                 label="Select Target"
                 :items="Object.keys(screens).sort()"
                 item-text="label"
@@ -42,7 +44,9 @@
               />
               <v-select
                 class="pa-0 mr-4"
+                dense
                 hide-details
+                outlined
                 label="Select Screen"
                 :items="screens[selectedTarget]"
                 v-model="selectedScreen"
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss
index e3dab4a522..7e026d7920 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss
@@ -133,6 +133,43 @@ body,
   background-color: var(--color-background-surface-hover) !important;
 }
 
+// Most tables have a search box
+.search {
+  max-width: 350px;
+  border-color: var(--color-border-interactive-muted);
+  background-color: var(--color-background-base-default);
+}
+
+// The next several styles effectively styles like an Astro select
+.theme--dark.v-select fieldset {
+  border: 1px solid var(--color-border-interactive-muted);
+  background-color: var(--color-background-base-default);
+}
+.theme--dark.v-select input {
+  color: var(--color-background-interactive-default) !important;
+}
+.theme--dark.v-select input:disabled {
+  color: var(--color-background-interactive-muted) !important;
+}
+.theme--dark.v-select .v-select__selections {
+  color: var(--color-text-interactive-default) !important;
+}
+
+// This formats the icon with a box around it but I don't really like it
+// .v-select .v-input__slot {
+//   padding-right: 0px !important;
+// }
+// .v-select .v-input__icon {
+//   width: auto;
+// }
+// .v-select i {
+//   background-color: var(--color-background-surface-selected) !important;
+//   border: 1px solid var(--color-border-interactive-muted) !important;
+//   border-radius: 3px !important;
+//   height: 40px !important;
+//   width: 40px !important;
+// }
+
 // Astro has a much higher app-bar
 .v-main {
   padding-top: 96px !important;
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue
index c4c5b0653a..3c16a7b3b3 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -190,7 +190,7 @@
         <v-spacer />
       </v-system-bar>
       <v-card class="pa-3">
-        <v-row dense>
+        <v-card-text class="pa-0">
           <v-text-field
             class="pb-2"
             label="Title"
@@ -198,7 +198,7 @@
             hide-details
             data-test="edit-graph-title"
           />
-        </v-row>
+        </v-card-text>
         <v-card-text class="pa-0">
           Select a start date/time for the graph. Leave blank for start now.
         </v-card-text>
@@ -219,12 +219,16 @@
           :date-time="graphEndDateTime"
           @date-time="graphEndDateTime = $event"
         />
-        <v-row dense>
+        <v-row dense class="mb-2">
           <v-select
             label="Legend Position"
+            dense
+            outlined
+            hide-details
             :items="legendPositions"
             v-model="legendPosition"
             data-test="edit-legend-position"
+            style="max-width: 280px"
           />
         </v-row>
         <v-card-text class="pa-0"> Optional Y axis settings. </v-card-text>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/LogMessages.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/LogMessages.vue
index e181e04a57..7c44458201 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/LogMessages.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/LogMessages.vue
@@ -72,6 +72,7 @@
         single-line
         hide-details
         style="max-width: 300px"
+        class="search"
         data-test="search-log-messages"
       />
       <v-tooltip top>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TargetPacketItemChooser.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TargetPacketItemChooser.vue
index db51a75039..837eeb1763 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TargetPacketItemChooser.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TargetPacketItemChooser.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -29,6 +29,7 @@
           label="Select Target"
           hide-details
           dense
+          outlined
           @change="targetNameChanged"
           :items="targetNames"
           item-text="label"
@@ -41,6 +42,7 @@
           label="Select Packet"
           hide-details
           dense
+          outlined
           @change="packetNameChanged"
           :disabled="packetsDisabled || buttonDisabled"
           :items="packetNames"
@@ -59,6 +61,7 @@
           label="Select Item"
           hide-details
           dense
+          outlined
           @change="itemNameChanged($event)"
           :disabled="itemsDisabled || buttonDisabled"
           :items="itemNames"
@@ -77,6 +80,7 @@
           label="Array Index"
           hide-details
           dense
+          outlined
           :disabled="itemsDisabled || buttonDisabled"
           :items="arrayIndexes()"
           item-text="label"
@@ -102,6 +106,7 @@
           label="Value Type"
           hide-details
           dense
+          outlined
           :items="valueTypes"
           v-model="selectedValueType"
         />
@@ -111,6 +116,7 @@
           label="Reduced"
           hide-details
           dense
+          outlined
           :items="reductionModes"
           v-model="selectedReduced"
         />
@@ -120,6 +126,7 @@
           label="Reduced Type"
           hide-details
           dense
+          outlined
           :disabled="selectedReduced === 'DECOM'"
           :items="reducedTypes"
           v-model="selectedReducedType"
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue
index 512c5e68b2..fbcf0582f6 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue
@@ -169,7 +169,8 @@ export default {
 }
 /* The next three styles effectively style the button like a select drop down */
 .menu-button {
-  background-color: var(--color-background-base-default);
+  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 {
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/dataviewer/HistoryComponent.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/dataviewer/HistoryComponent.vue
index bd8bf494ad..ec3003c6fa 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/dataviewer/HistoryComponent.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/dataviewer/HistoryComponent.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -22,12 +22,12 @@
 
 <template>
   <v-container class="pt-0">
-    <v-row dense>
+    <v-row dense class="mt-2">
       <v-col>
         <v-text-field
           v-model="filterText"
-          class="pt-0 mt-0"
           label="Search"
+          class="search"
           prepend-inner-icon="mdi-magnify"
           clearable
           outlined
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/ComboboxWidget.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/ComboboxWidget.vue
index 763dc3ef7b..875c8b37f9 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/ComboboxWidget.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/ComboboxWidget.vue
@@ -13,10 +13,10 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
-# This file may also be used under the terms of a commercial license 
+# This file may also be used under the terms of a commercial license
 # if purchased from OpenC3, Inc.
 -->
 
@@ -24,6 +24,7 @@
   <v-select
     hide-details
     dense
+    outlined
     :items="items"
     v-model="value"
     :style="computedStyle"
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/InterfacesTab.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/InterfacesTab.vue
index 4e1b56e99c..db9b099c80 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/InterfacesTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/InterfacesTab.vue
@@ -23,10 +23,7 @@
 <template>
   <div>
     <v-list class="list" data-test="interfaceList">
-      <div
-        v-for="(openc3_interface, index) in interfaces"
-        :key="openc3_interface"
-      >
+      <div v-for="openc3_interface in interfaces" :key="openc3_interface">
         <v-list-item>
           <v-list-item-content>
             <v-list-item-title>{{ openc3_interface }}</v-list-item-title>
@@ -46,7 +43,7 @@
             </v-tooltip>
           </v-list-item-icon>
         </v-list-item>
-        <v-divider v-if="index < interfaces.length - 1" :key="index" />
+        <v-divider />
       </div>
     </v-list>
     <edit-dialog
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/MicroservicesTab.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/MicroservicesTab.vue
index b1ea547fea..bcbe471fae 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/MicroservicesTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/MicroservicesTab.vue
@@ -23,7 +23,7 @@
 <template>
   <div>
     <v-list class="list" data-test="microserviceList">
-      <div v-for="(microservice, index) in microservices" :key="microservice">
+      <div v-for="microservice in microservices" :key="microservice">
         <v-list-item>
           <v-list-item-content>
             <v-list-item-title>{{ microservice }}</v-list-item-title>
@@ -67,7 +67,7 @@
             </v-tooltip>
           </v-list-item-icon>
         </v-list-item>
-        <v-divider v-if="index < microservices.length - 1" :key="index" />
+        <v-divider />
       </div>
     </v-list>
     <edit-dialog
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/PackagesTab.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/PackagesTab.vue
index 22499f77f9..007ef00de7 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/PackagesTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/PackagesTab.vue
@@ -120,7 +120,7 @@
             </v-tooltip>
           </v-list-item-icon>
         </v-list-item>
-        <v-divider v-if="index < gems.length - 1" :key="index" />
+        <v-divider />
       </div>
       <v-subheader>Python Packages</v-subheader>
       <div v-for="(pkg, index) in python" :key="index">
@@ -139,7 +139,7 @@
             </v-tooltip>
           </v-list-item-icon>
         </v-list-item>
-        <v-divider v-if="index < python.length - 1" :key="index" />
+        <v-divider />
       </div>
     </v-list>
     <download-dialog v-model="showDownloadDialog" />
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/RoutersTab.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/RoutersTab.vue
index e2b20c6127..ce11468d63 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/RoutersTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/RoutersTab.vue
@@ -39,7 +39,7 @@
             </v-tooltip>
           </v-list-item-icon>
         </v-list-item>
-        <v-divider v-if="index < routers.length - 1" :key="index" />
+        <v-divider />
       </div>
     </v-list>
     <edit-dialog
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/TargetsTab.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/TargetsTab.vue
index 7c8c8ae407..d6b9c77bd8 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/TargetsTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/TargetsTab.vue
@@ -23,7 +23,7 @@
 <template>
   <div>
     <v-list class="list" data-test="targetList">
-      <div v-for="(target, index) in targets" :key="target">
+      <div v-for="target in targets" :key="target">
         <v-list-item>
           <v-list-item-content>
             <v-list-item-title>{{ target.name }}</v-list-item-title>
@@ -60,7 +60,7 @@
             </v-tooltip>
           </v-list-item-icon>
         </v-list-item>
-        <v-divider v-if="index < targets.length - 1" :key="index" />
+        <v-divider />
       </div>
     </v-list>
     <edit-dialog
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/base/components/ScopeSelector.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/base/components/ScopeSelector.vue
index 19c7545c65..77b7b9f52e 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/base/components/ScopeSelector.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/base/components/ScopeSelector.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -28,6 +28,7 @@
       :disabled="scopes.length <= 1"
       label="Scope"
       dense
+      outlined
       hide-details
       style="max-width: 150px"
     />

From 18e664c17a43a6764994c9d6382a4bb9a9b20dd4 Mon Sep 17 00:00:00 2001
From: Jason Thomas <jason@openc3.com>
Date: Fri, 15 Dec 2023 09:35:06 -0700
Subject: [PATCH 2/3] Update calendar and autonomic components

---
 .../src/components/EnvironmentChooser.vue         |  3 ++-
 .../src/components/ScriptChooser.vue              | 15 ++++++---------
 .../calendar/Dialogs/ActivityUpdateDialog.vue     | 11 ++---------
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EnvironmentChooser.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EnvironmentChooser.vue
index c57dedc2a0..4e61322fda 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EnvironmentChooser.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EnvironmentChooser.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -23,6 +23,7 @@
 <template>
   <div>
     <v-simple-table dense>
+      <span> Add environment variables (optional)</span>
       <tbody>
         <tr>
           <th scope="col" class="text-left">Key</th>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/ScriptChooser.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/ScriptChooser.vue
index e428f78c90..766428c5a4 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/ScriptChooser.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/ScriptChooser.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -22,19 +22,16 @@
 
 <template>
   <div>
-    <v-row no-gutters>
-      <span> Select OpenC3 script </span>
-    </v-row>
-    <v-row class="my-2">
+    <v-row>
       <v-autocomplete
         v-model="selected"
         cache-items
-        flat
+        dense
+        outlined
         hide-no-data
         hide-details
-        solo-inverted
-        class="mx-4"
-        label="Select a script"
+        class="mb-5"
+        label="Select script"
         :loading="loading"
         :items="items"
         :search-input.sync="search"
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/calendar/Dialogs/ActivityUpdateDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/calendar/Dialogs/ActivityUpdateDialog.vue
index 6377056093..a44f798eaa 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/calendar/Dialogs/ActivityUpdateDialog.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/calendar/Dialogs/ActivityUpdateDialog.vue
@@ -139,15 +139,8 @@
                   />
                 </div>
                 <div v-else-if="kind === 'SCRIPT'">
-                  <script-chooser
-                    class="my-1"
-                    v-model="activityData"
-                    @file="fileHandler"
-                  />
-                  <environment-chooser
-                    class="my-2"
-                    v-model="activityEnvironment"
-                  />
+                  <script-chooser v-model="activityData" @file="fileHandler" />
+                  <environment-chooser v-model="activityEnvironment" />
                 </div>
                 <div v-else>
                   <span class="ma-2"> No required input </span>

From 5b1b5d2a4e071c73e2702dafaa43aa2372a3958d Mon Sep 17 00:00:00 2001
From: Jason Thomas <jason@openc3.com>
Date: Fri, 15 Dec 2023 18:11:06 -0700
Subject: [PATCH 3/3] Fix command-sender playwright

---
 .../packages/openc3-tool-common/src/components/Graph.vue   | 7 +------
 playwright/tests/command-sender.spec.ts                    | 6 +++---
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue
index 315af13a95..dce8a5bba9 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue
@@ -539,14 +539,9 @@ export default {
         '#00c7cb',
         '#938bdb',
         '#4dacff',
-        '#70dde0',
-        '#c9c5ed',
-        '#92cbff',
-        '#a1e9eb',
-        '#b7dcff',
-        'red',
         'lime',
         'darkorange',
+        'red',
         'gold',
         'hotpink',
         'tan',
diff --git a/playwright/tests/command-sender.spec.ts b/playwright/tests/command-sender.spec.ts
index 7c6bc51876..4e2aa707d3 100644
--- a/playwright/tests/command-sender.spec.ts
+++ b/playwright/tests/command-sender.spec.ts
@@ -28,7 +28,7 @@ test.use({
 // Helper function to select a parameter dropdown
 async function selectValue(page, param, value) {
   let row = page.locator(`tr:has-text("${param}")`)
-  await row.getByRole('combobox').click()
+  await row.getByRole('button').click()
   await page.getByRole('option', { name: value }).click()
 }
 
@@ -272,7 +272,7 @@ test('handles string values', async ({ page, utils }) => {
   await expect(page.locator('main')).toContainText('ASCII command')
   // The default text 'NOOP' should be selected
   let row = page.locator(`tr:has-text("STRING")`)
-  await expect(row.getByRole('combobox')).toContainText('NOOP')
+  await expect(row.getByRole('button')).toContainText('NOOP')
   await checkValue(page, 'STRING', 'NOOP')
   await page.locator('[data-test="select-send"]').click()
   await expect(page.locator('main')).toContainText(
@@ -301,7 +301,7 @@ test('handles string values', async ({ page, utils }) => {
   // Manually typing in an existing state value should change the state drop down
   await setValue(page, 'STRING', 'FIRE LASER')
   await expect(
-    page.locator('div[role=combobox]:has-text("FIRE LASER")'),
+    page.locator('div[role=button]:has-text("FIRE LASER")'),
   ).toBeVisible()
 })