Lots of small styling updates

temporalio · Oct 3, 2024 · 38d7a37 · 38d7a37
1 parent 2bfdf11
commit 38d7a37
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 66 deletions.
diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
@@ -25,8 +25,12 @@
       {#each group.eventList as groupEvent}
         {@const attributes = formatAttributes(groupEvent)}
         {@const details = Object.entries(attributes)}
-        <div class="w-full border-subtle [&:not(:last-child)]:border-r-2">
-          <div class="flex w-full justify-between bg-subtle px-2 py-1">
+        <div
+          class="w-full border-subtle xl:w-1/3 [&:not(:last-child)]:border-r-2"
+        >
+          <div
+            class="flex w-full flex-wrap justify-between bg-subtle px-2 py-1"
+          >
             <div class="flex gap-2">
               {groupEvent.id}
               {spaceBetweenCapitalLetters(groupEvent.name)}

diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
@@ -101,7 +101,7 @@
   {:else}
     <div class="content detail-row">
       <p class="text-sm">{format(key)}</p>
-      <Badge type="subtle">
+      <Badge type="subtle" class="inline-block whitespace-pre-wrap">
         {shouldDisplayAsTime(key) ? formatDate(value, $timeFormat) : value}
       </Badge>
     </div>
@@ -118,6 +118,6 @@
   }
 
   .detail-row {
-    @apply flex w-full items-center gap-4 py-1 text-left xl:flex;
+    @apply flex w-full items-center gap-2 py-1 text-left;
   }
 </style>
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
@@ -20,16 +20,16 @@
 
 {#if key}
   <div
-    class="flex flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 {$$props.class}"
+    class="invisible flex w-0 items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 md:visible md:w-auto"
   >
     {#if showKey}
-      <p class="whitespace-nowrap text-right text-xs">
+      <p class="truncate whitespace-nowrap text-right text-xs">
         {format(key)}
       </p>
     {/if}
     {#if typeof value === 'object'}
       <div
-        class="flex w-full items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
+        class="flex max-w-sm items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
       >
         <PayloadDecoder {value} key="payloads" let:decodedValue>
           <div class="payload {$$props.class}">
@@ -43,18 +43,14 @@
         copySuccessIconTitle={translate('common.copy-success-icon-title')}
         content={value}
       >
-        <Badge type="subtle" class="select-none">
+        <p class="select-none truncate">
           <EventDetailsLink {value} {attributes} type={linkType} />
-        </Badge>
+        </p>
       </Copyable>
     {:else}
-      <div class="flex w-full items-center gap-2 pr-1">
-        <p class="truncate text-right text-sm xl:text-left">
-          <Badge type="subtle" class="select-none">
-            {value}
-          </Badge>
-        </p>
-      </div>
+      <Badge type="subtle" class="block min-w-fit select-none truncate">
+        {value}
+      </Badge>
     {/if}
   </div>
 {/if}

diff --git a/src/lib/components/event/event-link.svelte b/src/lib/components/event/event-link.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div
-  class="flex max-w-lg flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
+  class="flex flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
 >
   <p class="max-w-fit whitespace-nowrap text-right text-xs">Link</p>
   <div class="overflow-hidden truncate pr-1">

diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
@@ -136,55 +136,42 @@
     <td class="w-4" />
   {/if}
   <td
-    class="w-full overflow-hidden text-right text-sm font-normal xl:text-left"
+    class="flex w-full items-center gap-2 overflow-hidden text-right text-sm font-normal xl:text-left"
   >
-    <div class="flex w-full items-center gap-2">
-      <Icon name={icon} />
-      <p
-        class="event-name max-w-fit whitespace-nowrap pr-4 text-sm font-semibold md:text-base"
+    <Icon name={icon} />
+    <p
+      class="event-name max-w-fit whitespace-nowrap text-sm font-semibold md:text-base"
+    >
+      {displayName}
+    </p>
+    {#if pendingAttempt}
+      <div
+        class="flex items-center gap-1 {pendingAttempt > 1 &&
+          'surface-danger rounded px-1 py-0.5'}"
       >
-        {displayName}
-      </p>
-      <div class="flex w-full gap-4 truncate">
-        {#if pendingAttempt}
-          <div
-            class="flex items-center gap-1 {pendingAttempt > 1 &&
-              'surface-danger rounded px-1 py-0.5'}"
-          >
-            <Icon class="mr-1.5 inline" name="retry" />
-            {pendingAttempt}
-            {#if hasPendingActivity}
-              / {hasPendingActivity.maximumAttempts || '∞'}
-            {/if}
-          </div>
-        {/if}
-        {#if currentEvent?.links?.length}
-          <EventLink link={currentEvent.links[0]} />
-        {/if}
-        {#if primaryAttribute?.key}
-          <EventDetailsRow
-            {...primaryAttribute}
-            {attributes}
-            class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
-          />
-        {/if}
-        {#if nonPendingActivityAttempt}
-          <EventDetailsRow
-            key="attempt"
-            value={nonPendingActivityAttempt.toString()}
-            {attributes}
-            class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
-          />
-        {/if}
-        {#if compact && secondaryAttribute?.key}
-          <EventDetailsRow
-            {...secondaryAttribute}
-            {attributes}
-            class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
-          />
+        <Icon class="mr-1.5 inline" name="retry" />
+        {pendingAttempt}
+        {#if hasPendingActivity}
+          / {hasPendingActivity.maximumAttempts || '∞'}
         {/if}
       </div>
-    </div>
+    {/if}
+    {#if currentEvent?.links?.length}
+      <EventLink link={currentEvent.links[0]} />
+    {/if}
+    {#if primaryAttribute?.key}
+      <EventDetailsRow {...primaryAttribute} {attributes} />
+    {/if}
+    {#if nonPendingActivityAttempt}
+      <EventDetailsRow
+        key="attempt"
+        value={nonPendingActivityAttempt.toString()}
+        {attributes}
+      />
+    {/if}
+    {#if compact && secondaryAttribute?.key}
+      <EventDetailsRow {...secondaryAttribute} {attributes} />
+    {/if}
   </td>
   <td>
     {#if isEventGroup(event)}

diff --git a/src/lib/components/event/event-summary-table.svelte b/src/lib/components/event/event-summary-table.svelte
@@ -52,6 +52,7 @@
   let:visibleItems
   variant="split"
   maxHeight="calc(100vh - 200px)"
+  fixed
 >
   {#if !compact}
     <HistoryGraph {groups} history={history(visibleItems)} />

diff --git a/src/lib/components/event/pending-activity-summary-row.svelte b/src/lib/components/event/pending-activity-summary-row.svelte
@@ -68,7 +68,6 @@
         value={event.activityType}
         showKey
         attributes={event}
-        class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
       />
     </div></td
   >

diff --git a/src/lib/holocene/table/paginated-table/index.svelte b/src/lib/holocene/table/paginated-table/index.svelte
@@ -7,6 +7,7 @@
   export let variant: 'primary' | 'split' = 'primary';
   export let updating = false;
   export let maxHeight = '';
+  export let fixed = false;
 
   let tableContainer: HTMLDivElement;
 
@@ -20,7 +21,11 @@
   bind:this={tableContainer}
   style="max-height: {maxHeight || `calc(100vh - ${tableOffset}px)`}"
 >
-  <table class="paginated-table">
+  <table
+    class="paginated-table"
+    class:table-fixed={fixed}
+    class:table-auto={!fixed}
+  >
     <slot name="caption" />
     <thead class="paginated-table-header">
       <slot name="headers" {visibleItems} />
@@ -57,7 +62,7 @@
   }
 
   .paginated-table {
-    @apply w-full table-auto;
+    @apply w-full;
   }
 
   .paginated-table-header {

diff --git a/src/lib/holocene/table/paginated-table/paginated.svelte b/src/lib/holocene/table/paginated-table/paginated.svelte
@@ -27,6 +27,7 @@
   export let previousPageButtonLabel: string;
   export let maxHeight = '';
   export let pageSizeOptions: string[] = options;
+  export let fixed = false;
 
   $: url = $page.url;
   $: perPageParam = url.searchParams.get(perPageKey) ?? pageSizeOptions[0];
@@ -87,7 +88,13 @@
   }
 </script>
 
-<PaginatedTable {updating} {variant} {maxHeight} visibleItems={$store.items}>
+<PaginatedTable
+  {updating}
+  {variant}
+  {maxHeight}
+  visibleItems={$store.items}
+  {fixed}
+>
   <slot name="caption" slot="caption" />
   <slot name="headers" slot="headers" visibleItems={$store.items} />
   <slot visibleItems={$store.items} />