Fix WorkflowDetail and Summary section styling

temporalio · Jun 17, 2024 · 1a52015 · 1a52015
1 parent 61ea6fe
commit 1a52015
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/src/lib/components/workflow/workflow-detail.svelte b/src/lib/components/workflow/workflow-detail.svelte
@@ -31,10 +31,17 @@
         {title}
       {/if}
       {#if href}
-        <Link {href} class="value">{content}</Link>
+        <Link
+          {href}
+          class="surface-subtle w-fit truncate rounded-sm p-1 leading-4"
+          >{content}</Link
+        >
       {:else}
         <Tooltip text={tooltip} hide={!tooltip} top>
-          <span class="value select-all">{content}</span>
+          <span
+            class="surface-subtle w-fit select-all truncate rounded-sm p-1 leading-4"
+            >{content}</span
+          >
         </Tooltip>
       {/if}
     </Copyable>
@@ -46,17 +53,18 @@
       {title}
     {/if}
     {#if href}
-      <Link {href} class="value">{content}</Link>
+      <Link
+        {href}
+        class="surface-subtle w-fit truncate rounded-sm p-1 leading-4"
+        >{content}</Link
+      >
     {:else}
       <Tooltip text={tooltip} hide={!tooltip} top>
-        <span class="value select-all">{content}</span>
+        <span
+          class="surface-subtle w-fit select-all truncate rounded-sm p-1 leading-4"
+          >{content}</span
+        >
       </Tooltip>
     {/if}
   {/if}
 </p>
-
-<style lang="postcss">
-  .value {
-    @apply surface-subtle flex w-fit flex-row items-center justify-center truncate break-all rounded-sm p-1 leading-4 transition-colors;
-  }
-</style>
diff --git a/src/lib/components/workflow/workflow-summary.svelte b/src/lib/components/workflow/workflow-summary.svelte
@@ -32,7 +32,7 @@
     }}
   >
     <div class="flex flex-col gap-2 xl:flex-row">
-      <div class="grow overflow-hidden">
+      <div class="grow basis-1/3 overflow-hidden">
         <h3 class="font-medium">{translate('common.execution-details')}</h3>
         <div class="h-0.5 rounded-full bg-inverse" />
         <WorkflowDetail