UI Scrub Fixes (#1059)

* Fix hover state for event summary rows

* Fix alignment of event row details

* Make terminated badge darker

* Add stopPropagation on keydown for inputs and textareas so they don't trigger keyboard shortcuts

Author: laurakwhit

Diff for: src/lib/components/event/event-details-row.svelte

@@ -40,7 +40,7 @@
       <CodeBlock content={getCodeBlockValue(value)} {inline} />
     </div>
   {:else if shouldDisplayAsExecutionLink(key)}
-    <div class="flex w-full flex-wrap gap-1 pr-1">
+    <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="mr-3 truncate text-sm">{format(key)}</p>
       <div class="truncate text-sm">
         <Copyable content={value} container-class=" xl:flex-row">
@@ -59,7 +59,7 @@
       </div>
     </div>
   {:else if shouldDisplayChildWorkflowLink(key, attributes)}
-    <div class="flex w-full flex-wrap  gap-1 pr-1">
+    <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="truncate text-sm">{format(key)}</p>
       <div class="truncate text-sm">
         <Copyable content={value} container-class="xl:flex-row">
@@ -78,7 +78,7 @@
       </div>
     </div>
   {:else if shouldDisplayAsTaskQueueLink(key)}
-    <div class="flex w-full flex-wrap  gap-1 pr-1">
+    <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="mr-3 truncate text-sm">{format(key)}</p>
       <div class="truncate  text-sm ">
         <Copyable content={value} container-class="">
@@ -93,7 +93,7 @@
       </div>
     </div>
   {:else}
-    <div class="flex w-full flex-wrap gap-1 pr-1">
+    <div class="flex w-full flex-wrap items-center gap-1 pr-1">
       <p class="mr-3 truncate text-sm">{format(key)}</p>
       <p class="truncate text-right text-sm xl:text-left">
         <span

Diff for: src/lib/components/event/event-summary-row.svelte

@@ -172,37 +172,34 @@
 
 <style lang="postcss">
   .row {
-    @apply flex table-row flex-wrap items-center border-gray-900 text-sm no-underline xl:py-3 xl:text-base;
+    @apply table-row flex-wrap items-center border-gray-900 text-sm no-underline xl:py-3 xl:text-base;
   }
 
   .row:hover {
-    @apply z-50 cursor-pointer bg-gray-50;
+    @apply z-50 cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100;
   }
 
   .expanded.row {
     @apply bg-blue-50;
   }
 
-  .failure,
-  .failure:hover {
+  .failure {
     @apply bg-red-50;
   }
 
   .failure .event-name {
     @apply text-red-700;
   }
 
-  .canceled,
-  .canceled:hover {
+  .canceled {
     @apply bg-yellow-50;
   }
 
   .canceled .event-name {
     @apply text-yellow-700;
   }
 
-  .terminated,
-  .terminated:hover {
+  .terminated {
     @apply bg-pink-50;
   }
 
@@ -211,7 +208,7 @@
   }
 
   .expanded-cell {
-    @apply flex table-cell w-full flex-wrap text-sm no-underline xl:text-base;
+    @apply table-cell w-full flex-wrap text-sm no-underline xl:text-base;
   }
 
   .typedError .expanded-cell {
@@ -230,14 +227,17 @@
     @apply z-50 cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100;
   }
 
+  .canceled:hover,
   .active.canceled {
     @apply bg-gradient-to-br from-yellow-100 to-yellow-200;
   }
 
+  .failure:hover,
   .active.failure {
     @apply bg-gradient-to-br from-red-100 to-red-200;
   }
 
+  .terminated:hover,
   .active.terminated {
     @apply bg-gradient-to-br from-pink-100 to-pink-200;
   }

Diff for: src/lib/components/namespace-list.svelte

@@ -55,6 +55,7 @@
     class="w-full"
     placeholder="Search"
     use:rootDocumentHandler
+    on:keydown|stopPropagation
     bind:value={searchValue}
     bind:this={searchField}
   />

Diff for: src/lib/components/search.svelte

@@ -27,6 +27,7 @@
     {placeholder}
     autocomplete="off"
     on:input
+    on:keydown|stopPropagation
   />
   <div>
     <Button class="m-2" type="submit">{label}</Button>

Diff for: src/lib/components/workflow-status.svelte

@@ -62,7 +62,7 @@
   }
 
   .gray {
-    @apply bg-gray-100 text-gray-900;
+    @apply bg-gray-200 text-gray-900;
   }
 
   .orange {

Diff for: src/lib/holocene/codec-endpoint-settings.svelte

@@ -29,6 +29,7 @@
       placeholder="Endpoint"
       data-cy="data-encoder-endpoint-input"
       bind:value={endpoint}
+      on:keydown|stopPropagation
     />
     {#if error}
       <small data-cy="data-encoder-endpoint-error" class="text-red-700"

Diff for: src/lib/holocene/data-converter-port-settings.svelte

@@ -14,5 +14,6 @@
     placeholder="Port"
     data-cy="data-encoder-port-input"
     bind:value={port}
+    on:keydown|stopPropagation
   />
 </div>

Diff for: src/lib/holocene/input/chip-input.svelte

@@ -106,7 +106,7 @@
       bind:this={input}
       bind:value={displayValue}
       on:blur={handleBlur}
-      on:keydown={handleKeydown}
+      on:keydown|stopPropagation={handleKeydown}
       on:paste={handlePaste}
     />
   </div>

Diff for: src/lib/holocene/textarea.svelte

@@ -20,6 +20,7 @@
   on:change
   on:focus
   on:blur
+  on:keydown|stopPropagation
 />
 <div class="error-msg" aria-live={isValid ? 'off' : 'assertive'}>
   {#if !isValid}

Diff for: src/lib/pages/schedule-view.svelte

@@ -224,6 +224,7 @@
           class="block w-full border border-gray-200 rounded-md p-2 mt-4"
           placeholder="Enter a reason"
           bind:value={reason}
+          on:keydown|stopPropagation
         />
       </div>
     </Modal>

Diff for: src/routes/(app)/namespaces/[namespace]/archival/_filter-input.svelte

@@ -30,6 +30,7 @@
     placeholder={name}
     {id}
     bind:value={_value}
+    on:keydown|stopPropagation
   />
 </div>
 

Diff for: src/routes/(app)/select-namespace/+page.svelte

@@ -53,6 +53,7 @@
     <input
       class="w-full"
       placeholder="Search"
+      on:keydown|stopPropagation
       bind:value={searchValue}
       bind:this={searchField}
     />