Repository: temporalio/ui
Pull request #420 (2022-04-12 20:37:42)

Decrease row padding, lower line-height, event details as Inter
## What was changed
Decrease row padding and line-height for more compact visual of table, make event details Inter font, check for label.length incase label doesn't exist.
<img width="1701" alt="Screen Shot 2022-04-12 at 3 34 44 PM" src="https://user-images.githubusercontent.com/7967403/163049498-8f89ef8a-aa2b-42a5-86c6-34da3f32aa68.png">



cloudflare-pages[bot]: ## Deploying with &nbsp;<a href="https://pages.dev"><img alt="Cloudflare Pages" src="https://user-images.githubusercontent.com/23264/106598434-9e719e00-654f-11eb-9e59-6167043cfa01.png" width="16"></a> &nbsp;Cloudflare Pages

<table><tr><td><strong>Latest commit:</strong> </td><td>
<code>4cb6c9d</code>
</td></tr>
<tr><td><strong>Status:</strong></td><td>&nbsp;✅&nbsp; Deploy successful!</td></tr>
<tr><td><strong>Preview URL:</strong></td><td>
<a href='https://b075d684.ui-c3x.pages.dev'>https://b075d684.ui-c3x.pages.dev</a>
</td></tr>
</table>

[View logs](https://dash.cloudflare.com/?to=/:account/pages/view/temporal-pizza/b075d684-eb8a-45b3-9633-735f39963b9e)

cypress[bot]: 
<p align="center">
  <br />
  <img src="https://assets.cypress.io/github-pr-comment-icons/cypress-logo.png" height="32" />
</p>

---

### Test summary
<a href="https://dashboard.cypress.io/projects/g7xfxw/runs/124/overview?utm_source=github"><img src="https://assets.cypress.io/github-pr-comment-icons/green-check-mark.png" width="14" height="14" title="Passed" /></a> <b title="Passed">28</b>  &bull; <a href="https://dashboard.cypress.io/projects/g7xfxw/runs/124/test-results?utm_source=github&statuses=%5B%7B%22value%22%3A%22FAILED%22%2C%22label%22%3A%22FAILED%22%7D%5D"><img src="https://assets.cypress.io/github-pr-comment-icons/red-x.png" width="14" height="14" title="Failed" /></a> <b title="Failed">0</b>  &bull; <img src="https://assets.cypress.io/github-pr-comment-icons/gray-circle.png" width="14" height="14" title="Tests that did not run due to a developer annotating a test with .skip" /> <b title="Pending">0</b> &bull; <img src="https://assets.cypress.io/github-pr-comment-icons/yellow-triangle.png" width="14" height="14" title="Tests that did not run due to a failure in a mocha hook" /> <b title="Skipped">0</b> 

---

### Run details
| | |
| --- | --- |
| **Project** | Temporal UI |
| **Status** | Passed |
| **Commit** | b6414d4bdb <span style="cursor:help;" title="Your CI provider generated this commit by merging this branch into the target branch.">ℹ️</span> |
| **Started** | Apr 12, 2022 8:39 PM |
| **Ended** | Apr 12, 2022 8:40 PM |
| **Duration** | 01:08 <a href="https://on.cypress.io/parallelization?utm_source=github" title="Enable parallelization to reduce run duration">💡</a> |
| **OS** | Linux Ubuntu - 20.04 |
| **Browser** | Chrome 100 <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/48.0.4/chrome/chrome_32x32.png" width="16" height="16" /> |

[View run in Cypress Dashboard ➡️](https://dashboard.cypress.io/projects/g7xfxw/runs/124/overview?utm_source=github)





---

This comment has been generated by **cypress-bot** as a result of this project's GitHub integration settings. You can manage this integration in [this project's settings in the Cypress Dashboard](https://dashboard.cypress.io/projects/g7xfxw/settings?utm_source=github)



Patch:
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
index a20dac64..451cf4fc 100644
--- a/src/lib/components/event/event-details-row.svelte
+++ b/src/lib/components/event/event-details-row.svelte
@@ -17,7 +17,7 @@
 <article
   class="flex flex-col lg:flex-row gap-2 lg:gap-4 py-2 last:border-b-0 border-gray-200 first:pt-0 {$$props.class}"
 >
-  <h4 class="w-1/3 text-normal">{format(key)}</h4>
+  <p class="w-1/3 text-normal">{format(key)}</p>
   <div class="flex-grow w-full">
     {#if typeof value === 'object'}
       <CodeBlock content={value} />
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index 035f623a..6856bcc8 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-
   import { getGroupForEvent, isEventGroup } from '$lib/models/group-events';
 
   import { formatDate } from '$lib/utilities/format-date';
@@ -31,9 +29,8 @@
 
 <article class="row" id={event.id}>
   <div class="cell">
-    <a
-      class="text-gray-500 text-normal mx-1 text-lg md:text-base"
-      href="#{event.id}">{event.id}</a
+    <a class="text-gray-500 mx-1 text-lg md:text-base" href="#{event.id}"
+      >{event.id}</a
     >
     <span
       class="md:mx-2 text-lg md:text-base font-semibold"
@@ -55,7 +52,7 @@
 
 <style lang="postcss">
   .cell {
-    @apply md:table-cell md:border-b-2 text-left py-1 px-3 pt-2;
+    @apply md:table-cell md:border-b-2 text-left py-1 px-3 leading-4;
   }
 
   .row {
diff --git a/src/lib/utilities/format-camel-case.ts b/src/lib/utilities/format-camel-case.ts
index 87233ee5..c0bd419e 100644
--- a/src/lib/utilities/format-camel-case.ts
+++ b/src/lib/utilities/format-camel-case.ts
@@ -3,11 +3,11 @@ const isUpperCase = (label: string, index: number): boolean => {
   return charCode >= 65 && charCode <= 90;
 };
 
-export const format = (label: string): string => {
+export const format = (label?: string): string => {
   let result = '';
   let index = 0;
 
-  while (index < label.length) {
+  while (index < label?.length) {
     const current = label[index];
     const next = label[index + 1];
 


Test patch:
diff --git a/src/lib/utilities/format-camel-case.test.ts b/src/lib/utilities/format-camel-case.test.ts
index 2133eaec..ff9c75bb 100644
--- a/src/lib/utilities/format-camel-case.test.ts
+++ b/src/lib/utilities/format-camel-case.test.ts
@@ -34,4 +34,8 @@ describe(format, () => {
   it('should format requestIdSomething as "Request ID Something"', () => {
     expect(format('requestIdSomething')).toBe('Request ID Something');
   });
+
+  it('should format undefined as ""', () => {
+    expect(format()).toBe('');
+  });
 });