next: made the filtering controls bigger

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-badge-value.svelte

@@ -10,11 +10,11 @@
     let { children }: Props = $props();
 </script>
 
-<Badge class="rounded-sm px-1 font-normal lg:hidden" variant="secondary">
+<Badge class="rounded-sm py-1.5 font-normal lg:hidden" variant="secondary">
     <span class="max-w-24 truncate md:max-w-48">{@render children()}</span>
 </Badge>
 <div class="hidden space-x-1 lg:flex">
-    <Badge class="rounded-sm px-1 font-normal" variant="secondary">
+    <Badge class="rounded-sm py-1.5 font-normal" variant="secondary">
         <span class="max-w-60 truncate md:max-w-120">{@render children()}</span>
     </Badge>
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-badge-values.svelte

@@ -12,17 +12,17 @@
 </script>
 
 {#if values.length > 0}
-    <Badge class="rounded-sm px-1 font-normal lg:hidden" variant="secondary">
+    <Badge class="rounded-sm py-1.5 font-normal lg:hidden" variant="secondary">
         {values.length}
     </Badge>
     <div class="hidden space-x-1 lg:flex">
         {#if values.length > 2}
-            <Badge class="rounded-sm px-1 font-normal" variant="secondary">
+            <Badge class="rounded-sm py-1.5  font-normal" variant="secondary">
                 {values.length} Selected
             </Badge>
         {:else}
             {#each values as value (value)}
-                <Badge class="rounded-sm px-1 font-normal" variant="secondary">
+                <Badge class="rounded-sm py-1.5 font-normal" variant="secondary">
                     <span class="max-w-24 truncate md:max-w-48">{@render displayValue(value)}</span>
                 </Badge>
             {/each}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-boolean.svelte

@@ -36,9 +36,9 @@
 <Popover.Root bind:open>
     <Popover.Trigger>
         {#snippet children()}
-            <Button class="h-8" size="sm" variant="outline">
+            <Button class="gap-x-1 px-3" size="lg" variant="outline">
                 {title}
-                <Separator class="mx-2 h-4" orientation="vertical" />
+                <Separator class="mx-2" orientation="vertical" />
                 {#if value}
                     <FacetedFilter.BadgeValue>{value}</FacetedFilter.BadgeValue>
                 {:else}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-builder.svelte

@@ -96,7 +96,7 @@
 <Popover.Root bind:open>
     <Popover.Trigger>
         {#snippet children()}
-            <Button class="h-8" size="sm" variant="outline">
+            <Button class="gap-x-1 px-3" size="lg" variant="outline">
                 <Circle class="mr-2 size-4" /> Filter
             </Button>
         {/snippet}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-drop-down.svelte

@@ -72,9 +72,9 @@
 <Popover.Root bind:open>
     <Popover.Trigger>
         {#snippet children()}
-            <Button class="h-8" size="sm" variant="outline">
+            <Button class="gap-x-1 px-3" size="lg" variant="outline">
                 {title}
-                <Separator class="mx-2 h-4" orientation="vertical" />
+                <Separator class="mx-2" orientation="vertical" />
                 {#if loading}
                     <FacetedFilter.BadgeLoading />
                 {:else if value !== undefined}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-keyword.svelte

@@ -36,9 +36,9 @@
 <Popover.Root bind:open>
     <Popover.Trigger>
         {#snippet children()}
-            <Button class="h-8" size="sm" variant="outline">
+            <Button class="gap-x-1 px-3" size="lg" variant="outline">
                 {title}
-                <Separator class="mx-2 h-4" orientation="vertical" />
+                <Separator class="mx-2" orientation="vertical" />
                 {#if value}
                     <FacetedFilter.BadgeValue>{value}</FacetedFilter.BadgeValue>
                 {:else}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-multi-select.svelte

@@ -71,9 +71,9 @@
 <Popover.Root bind:open>
     <Popover.Trigger>
         {#snippet children()}
-            <Button class="h-8" size="sm" variant="outline">
+            <Button class="gap-x-1 px-3" size="lg" variant="outline">
                 {title}
-                <Separator class="mx-2 h-4" orientation="vertical" />
+                <Separator class="mx-2" orientation="vertical" />
                 {#if loading}
                     <FacetedFilter.BadgeLoading />
                 {:else if values.length > 0}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-number.svelte

@@ -36,9 +36,9 @@
 <Popover.Root bind:open>
     <Popover.Trigger>
         {#snippet children()}
-            <Button class="h-8" size="sm" variant="outline">
+            <Button class="gap-x-1 px-3" size="lg" variant="outline">
                 {title}
-                <Separator class="mx-2 h-4" orientation="vertical" />
+                <Separator class="mx-2" orientation="vertical" />
                 {#if value !== undefined && !isNaN(value)}
                     <FacetedFilter.BadgeValue>{value}</FacetedFilter.BadgeValue>
                 {:else}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-string.svelte

@@ -36,9 +36,9 @@
 <Popover.Root bind:open>
     <Popover.Trigger>
         {#snippet children()}
-            <Button class="h-8" size="sm" variant="outline">
+            <Button class="gap-x-1 px-3" size="lg" variant="outline">
                 {title}
-                <Separator class="mx-2 h-4" orientation="vertical" />
+                <Separator class="mx-2" orientation="vertical" />
                 {#if value?.trim()}
                     <FacetedFilter.BadgeValue>{value}</FacetedFilter.BadgeValue>
                 {:else}