Apply some tweaks on Admin UI (#11011)

### What problem does this PR solve?

- Fix selected radio button text misaligned with radio button dot
- Fix `<ScrollArea>` scrollbar z-index issue
- Add backdrop blur effect on scrollbar thumbs
- Adjust some styles to match the design 


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/admin/whitelist.tsx

@@ -22,6 +22,7 @@ import {
   LucideUserPen,
 } from 'lucide-react';
 
+import Spotlight from '@/components/spotlight';
 import { TableEmpty } from '@/components/table-skeleton';
 import { Button } from '@/components/ui/button';
 import {
@@ -58,7 +59,6 @@ import {
   importWhitelistFromExcel,
   listWhitelist,
   updateWhitelistEntry,
-  type AdminService,
 } from '@/services/admin-service';
 
 import { EMPTY_DATA, createFuzzySearchFn, getSortIcon } from './utils';
@@ -68,8 +68,6 @@ import useImportExcelForm, {
   ImportExcelFormData,
 } from './forms/import-excel-form';
 
-// #endregion
-
 const columnHelper = createColumnHelper<AdminService.ListWhitelistItem>();
 const globalFilterFn = createFuzzySearchFn<AdminService.ListWhitelistItem>([
   'email',
@@ -233,7 +231,9 @@ function AdminWhitelist() {
 
   return (
     <>
-      <Card className="!shadow-none h-full border border-border-button bg-transparent rounded-xl overflow-x-hidden overflow-y-auto">
+      <Card className="!shadow-none relative h-full border border-border-button bg-transparent rounded-xl overflow-x-hidden overflow-y-auto">
+        <Spotlight />
+
         <ScrollArea className="size-full">
           <CardHeader className="space-y-0 flex flex-row justify-between items-center">
             <CardTitle>{t('admin.whitelistManagement')}</CardTitle>