Tweaked search bar styling

exceptionless · Jan 25, 2024 · c16257a · c16257a
1 parent 5ae5683
commit c16257a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 6 deletions.
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte
@@ -8,10 +8,12 @@
 	export let table: Readable<Table<TData>>;
 </script>
 
-<div class="flex items-center justify-between">
+<div class="flex items-center justify-between space-x-2">
 	<div class="flex flex-1 items-center space-x-2">
 		<slot />
 	</div>
 
-	<DataTableViewOptions {table} />
+	<div class="ml-auto flex">
+		<DataTableViewOptions {table} />
+	</div>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-view-options.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-view-options.svelte
@@ -12,7 +12,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger asChild let:builder>
-		<Button variant="outline" size="sm" class="ml-auto hidden h-8 lg:flex" builders={[builder]}>
+		<Button variant="outline" size="sm" class="h-8" builders={[builder]}>
 			<IconViewColumn class="mr-2 h-4 w-4" />
 			View
 		</Button>

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -66,7 +66,7 @@
 	<DataTable.Toolbar {table}>
 		<slot name="toolbar">
 			<SearchInput
-				class="h-8 w-[150px] lg:w-[250px]"
+				class="h-8 w-80 lg:w-[350px] xl:w-[550px]"
 				value={$filter}
 				on:input={onFilterInputChanged}
 			/>

diff --git a/...Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogDataTable.svelte b/...Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogDataTable.svelte
@@ -107,7 +107,7 @@
 	<DataTable.Toolbar {table}>
 		<slot name="toolbar">
 			<SearchInput
-				class="h-8 w-[120px] lg:w-[350px] xl:w-[550px]"
+				class="h-8 w-80 lg:w-[350px] xl:w-[550px]"
 				value={$filter}
 				on:input={onFilterInputChanged}
 			/>

diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -41,7 +41,7 @@
 			<EventsDataTable filter={filterWithFaceted} {time} on:rowclick={onRowClick}>
 				<svelte:fragment slot="toolbar">
 					<SearchInput
-						class="h-8 w-[150px] lg:w-[250px]"
+						class="h-8 w-80 lg:w-[350px] xl:w-[550px]"
 						value={$filter}
 						on:input={onFilterInputChanged}
 					/>