Tab cleanup, toggle button icons, padding consistency (#2894)

* Consistent padding, remove bottom border on workflow header, update togglebutton to hide slot if leading icon on sm

* Remove custom classes from tablist use

* Another padding fix

* Final padding

Author: Alex-Tideman

src/lib/components/schedule/schedules-calendar-view.svelte

@@ -47,7 +47,7 @@
 
 <Tabs class="mt-8 w-full">
   <h2 class="mb-4">{translate('schedules.schedule-spec')}</h2>
-  <TabList label="Schedule Tabs" class="flex flex-wrap gap-6">
+  <TabList label="Schedule Tabs">
     {#if schedule}
       <Tab
         label="Existing"

src/lib/components/workflow/workflow-relationships-old.svelte

@@ -34,7 +34,7 @@
   } = workflowRelationships);
 </script>
 
-<div class="flex flex-col gap-4 px-2 py-4 md:px-4 lg:px-8">
+<div class="flex flex-col gap-4 px-4 py-4 xl:px-8">
   <div class="flex w-full flex-wrap gap-4">
     {#if scheduleId}
       <SchedulerTable {scheduleId} {namespace} />

src/lib/holocene/tab/tab-list.svelte

@@ -19,7 +19,10 @@
 </script>
 
 <div
-  class={merge('flex flex-row gap-4 border-b border-subtle', className)}
+  class={merge(
+    'flex flex-wrap gap-x-4 gap-y-1 border-b border-subtle',
+    className,
+  )}
   role="tablist"
   aria-label={label}
   {...restProps}

src/lib/holocene/toggle-button/toggle-button.svelte

@@ -50,5 +50,9 @@
   href={href ? href + $page.url.search : null}
   {...$$restProps}
 >
-  <slot />
+  {#if $$restProps.leadingIcon}
+    <span class="hidden md:block"><slot /></span>
+  {:else}
+    <slot />
+  {/if}
 </Button>

src/lib/layouts/workflow-header.svelte

@@ -190,7 +190,7 @@
     </div>
   {/if}
   <Tabs>
-    <TabList class="flex flex-wrap gap-6 pt-2" label="workflow detail">
+    <TabList label="workflow detail">
       <Tab
         label={translate('workflows.history-tab')}
         id="history-tab"

src/lib/layouts/workflow-history-layout.svelte

@@ -76,7 +76,7 @@
   };
 </script>
 
-<div class="flex flex-col gap-0 px-2 pt-4 md:px-4 lg:px-8">
+<div class="flex flex-col gap-0 px-4 pt-4 xl:px-8">
   <WorkflowCallStackError />
   <div class="flex flex-col gap-2">
     <InputAndResults />
@@ -91,7 +91,7 @@
     {/if}
   </div>
 </div>
-<div class="relative px-2 pb-24 md:px-4 lg:px-8">
+<div class="relative px-4 pb-24 xl:px-8">
   <div
     class="flex flex-wrap items-center justify-between gap-2 bg-off-white/50 py-2 xl:gap-8 dark:bg-space-black/50"
     class:sticky-header={!$minimizeEventView}

src/lib/layouts/workflow-padded-layout.svelte

@@ -1,3 +1,3 @@
-<div class="h-full px-2 pb-16 pt-4 md:px-4 lg:px-8">
+<div class="h-full px-4 pb-16 pt-4 xl:px-8">
   <slot />
 </div>

src/lib/layouts/workflow-run-layout.svelte

@@ -215,7 +215,7 @@
     {:else if !$workflowRun.workflow}
       <SkeletonWorkflow />
     {:else}
-      <div class="border-b border-subtle px-4 pt-8 md:pt-20 xl:px-8">
+      <div class="px-4 pt-8 md:pt-20 xl:px-8">
         <WorkflowHeader />
       </div>
       <slot />