style: fix dropdown style

undb-xyz · Jul 21, 2023 · bb5cd83 · bb5cd83
1 parent d285ca4
commit bb5cd83
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 33 deletions.
diff --git a/apps/frontend/src/lib/field/FieldInputs/FieldPicker.svelte b/apps/frontend/src/lib/field/FieldInputs/FieldPicker.svelte
@@ -47,9 +47,8 @@
 	{#if filteredFields.length}
 		{#each filteredFields as field (field.id)}
 			<Radio value={field.id} bind:group={value} custom on:change={() => (open = false)}>
-				<div
-					role="listitem"
-					class="w-full pr-4 flex justify-between hover:bg-gray-100 transition cursor-pointer dark:text-white dark:hover:!text-gray-600"
+				<li
+					class="w-full px-3 py-2 flex justify-between hover:bg-gray-100 transition cursor-pointer dark:text-white dark:hover:!text-gray-600"
 					class:bg-gray-100={selected?.id === field.id}
 				>
 					<div
@@ -68,7 +67,7 @@
 							<i class="ti ti-check text-sm dark:text-gray-600" />
 						{/if}
 					</span>
-				</div>
+				</li>
 			</Radio>
 		{/each}
 	{:else}

diff --git a/apps/frontend/src/lib/table/FilterOperatorPicker.svelte b/apps/frontend/src/lib/table/FilterOperatorPicker.svelte
@@ -23,33 +23,35 @@
 >
 	{$t(value, { ns: 'common' })}
 </Button>
-<Dropdown
-	style="z-index: 999999999;"
-	class="w-[400px] z-[99999] border rounded-sm bg-white shadow-sm dark:shadow-gray-500 dark:bg-gray-700"
-	bind:open
->
-	{#each data as item}
-		{@const selected = item.value === value}
-		<Radio value={item.value} bind:group={value} custom on:change={() => (open = false)}>
-			<div
-				role="listitem"
-				class="w-full pr-4 flex justify-between hover:bg-gray-100 transition cursor-pointer dark:text-white dark:hover:!text-gray-600"
-				class:bg-gray-100={selected}
-			>
-				<div
-					class={cx(
-						'inline-flex gap-2 items-center text-xs text-gray-600 dark:text-white dark:hover:text-gray-600',
-						selected ? 'dark:!text-gray-600' : '',
-					)}
+{#if data.length}
+	<Dropdown
+		style="z-index: 999999999;"
+		class="w-[400px] z-[99999] border rounded-sm bg-white shadow-sm dark:shadow-gray-500 dark:bg-gray-700"
+		bind:open
+	>
+		{#each data as item}
+			{@const selected = item.value === value}
+			<Radio value={item.value} bind:group={value} custom on:change={() => (open = false)}>
+				<li
+					role="listitem"
+					class="w-full pr-4 flex justify-between hover:bg-gray-100 transition cursor-pointer dark:text-white dark:hover:!text-gray-600"
+					class:bg-gray-100={selected}
 				>
-					{$t(item.value, { ns: 'common' })}
-				</div>
-				<span>
-					{#if selected}
-						<i class="ti ti-check text-sm dark:text-gray-600" />
-					{/if}
-				</span>
-			</div>
-		</Radio>
-	{/each}
-</Dropdown>
+					<div
+						class={cx(
+							'px-3 py-2 inline-flex gap-2 items-center text-xs text-gray-600 dark:text-white dark:hover:text-gray-600',
+							selected ? 'dark:!text-gray-600' : '',
+						)}
+					>
+						{$t(item.value, { ns: 'common' })}
+					</div>
+					<span>
+						{#if selected}
+							<i class="ti ti-check text-sm dark:text-gray-600" />
+						{/if}
+					</span>
+				</li>
+			</Radio>
+		{/each}
+	</Dropdown>
+{/if}