Properly display selected action in UI

Author: Mytrill

src/components/RunActionItem.scss

@@ -5,8 +5,13 @@
 }
 
 .run-action-item {
-  width: 100%;
+  display: block;
+
   &:hover {
     background-color: $secondary-color;
   }
+
+  &.selected {
+    background-color: $secondary-color-dark;
+  }
 }

src/components/RunActionItem.tsx

@@ -94,9 +94,13 @@ export function RunActionItem(props: RunActionItemProps) {
     actions.select(action)
   }
 
+  const selected = state.selectedAction === action
+  console.log(state.selectedAction, "   ", action, selected)
+  const className = "run-action-item" + (selected ? " selected" : "")
+
   return (
     <li key={index}>
-      <a href="" class="run-action-item" onclick={onclick}>
+      <a href="" class={className} onclick={onclick}>
         {action.name}({getActionDataText(action)}){" "}
         {state.collapseRepeatingActions && (
           <span class="run-action-item-count">

src/components/RunsPane.scss

@@ -2,13 +2,15 @@
   flex: 0 0 40%;
   border: 1px solid #666666;
   margin: 0.1rem;
+  align-items: stretch;
 
   ul {
     list-style-type: none;
     margin: 0.3rem 0 0 0.3rem;
 
     li {
       margin: 0rem;
+      width: 100%;
     }
   }
 }