Merge pull request #737 from basecamp/terminal-command-overflow

Truncate long commands

app/assets/stylesheets/terminals.css

@@ -38,7 +38,12 @@
     --btn-color: var(--color-terminal-text);
 
     font-weight: normal;
+    overflow: hidden;
     transition: unset;
+
+    span:first-letter {
+      text-transform: capitalize;
+    }
   }
 
   .terminal__container {
@@ -54,7 +59,7 @@
     inline-size: auto;
     inset: 50% auto auto 50%;
     max-inline-size: 90vw;
-    
+
     padding: calc(var(--block-space) * 1.5) var(--block-space-double);
     position: fixed;
     transform: translate(-50%, -50%);

app/views/commands/_command.html.erb

@@ -1,8 +1,10 @@
 <%= tag.li class: "min-width full-width flex gap-half terminal__item justify-start", tabindex: 0, data: {
       action: "keydown.enter->terminal#restoreCommand:prevent keydown.enter->toggle-class#remove:prevent",
       navigable_list_target: "item" } do %>
-  <%= button_tag command.title, type: "button", class: "btn btn--plain overflow-ellipsis terminal__command flex-item-grow justify-start",
-        data: { action: "toggle-class#remove terminal#restoreCommand", line: command.line }, tabindex: -1 %>
+  <%= button_tag type: "button", class: "btn btn--plain terminal__command flex-item-grow justify-start",
+        data: { action: "toggle-class#remove terminal#restoreCommand", line: command.line }, tabindex: -1 do %>
+      <span class="overflow-ellipsis"><%= command.title %></span>
+  <% end %>
 
   <% if command.undoable? %>
     <%= button_to "Undo", command_undo_path(command), class: "btn btn--plain terminal__button flex-item-justify-end",