handle long command stem overflow

NASA-AMMOS · Dec 6, 2024 · 02f41c1 · 02f41c1
1 parent 7e68b82
commit 02f41c1
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/components/sequencing/CommandPanel/CommandDictionary.svelte b/src/components/sequencing/CommandPanel/CommandDictionary.svelte
@@ -139,7 +139,7 @@
       {#if commandResults.length > 0}
         {#each commandResults as commandResult}
           <div class="dictionary-result">
-            <button class="st-button-link" on:click={() => onSelectCommandDefinition(commandResult)}>
+            <button class="st-button-link command-stem" on:click={() => onSelectCommandDefinition(commandResult)}>
               {commandResult.stem}
             </button>
           </div>
@@ -278,6 +278,13 @@
     font-style: italic;
   }
 
+  .command-stem {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .command-arguments {
     display: flex;
     flex-flow: column;