Make command a button

app/assets/stylesheets/buttons.css

@@ -154,7 +154,7 @@
 
   .btn--plain {
     --btn-background: transparent;
-    --btn-border-radius: 0.5em;
+    --btn-border-radius: 0;
     --btn-border-size: 0;
     --btn-color: inherit;
     --btn-icon-size: 100%;

app/assets/stylesheets/terminals.css

@@ -54,6 +54,13 @@
     white-space: nowrap;
   }
 
+  .terminal__command {
+    --btn-background: transparent;
+    --btn-color: var(--color-terminal-text);
+
+    font-weight: normal;
+  }
+
   .terminal__link {
     --hover-size: 0;
 
@@ -69,6 +76,15 @@
     }
   }
 
+  .terminal__item {
+    @media (any-hover: hover) {
+      &:where(:not(:active):hover),
+      &:where(:not(:active)):focus-visible {
+        background: color-mix(in srgb, var(--color-terminal-text) 15%, var(--color-terminal-bg));
+      }
+    }
+  }
+
   .has-error .terminal__input {
     border: 2px solid red;
   }

app/views/commands/_command.html.erb

@@ -1,7 +1,7 @@
-<li class="min-width flex gap-half">
-  <span class="overflow-ellipsis"><%= command.title %></span>
+<li class="min-width full-width flex gap-half terminal__item justify-start">
+  <button class="btn btn--plain overflow-ellipsis terminal__command flex-item-grow justify-start"><%= command.title %></button>
 
   <% if command.undoable? %>
-    <%= button_to "Undo", command_undo_path(command), class: "btn btn--plain terminal__button", data: { turbo_confirm: "Are you sure you want to undo '#{command.title}'?", turbo_frame: "_top" } %>
+    <%= button_to "Undo", command_undo_path(command), class: "btn btn--plain terminal__button flex-item-justify-end", data: { turbo_confirm: "Are you sure you want to undo '#{command.title}'?", turbo_frame: "_top" } %>
   <% end %>
 </li>