✨ refactor(ui): Improve usage log filter responsiveness and mobile UX

Refactor the usage log filter toolbar into a shared reusable component for common, drawing, and task logs. Optimize desktop filters with a responsive grid, move secondary filters into a mobile drawer, standardize filter typography, remove redundant filter icons, and add the missing i18n translations for the new drawer description.

web/default/src/components/config-drawer.tsx

@@ -53,6 +53,12 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/sheet'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import { useSidebar } from './ui/sidebar'
 
 const Item = RadioPrimitive.Root
@@ -88,14 +94,14 @@ export function ConfigDrawer() {
       >
         <Palette className='size-[1.2rem]' aria-hidden='true' />
       </SheetTrigger>
-      <SheetContent className='flex w-full flex-col sm:max-w-md'>
-        <SheetHeader className='pb-0 text-start'>
+      <SheetContent className={sideDrawerContentClassName('sm:max-w-md')}>
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>{t('Theme Settings')}</SheetTitle>
           <SheetDescription id='config-drawer-description'>
             {t('Adjust the appearance and layout to suit your preferences.')}
           </SheetDescription>
         </SheetHeader>
-        <div className='space-y-6 overflow-y-auto px-4'>
+        <div className={sideDrawerFormClassName()}>
           <ThemeConfig />
           <PresetConfig />
           <RadiusConfig />
@@ -105,7 +111,7 @@ export function ConfigDrawer() {
           <ContentLayoutConfig />
           <DirConfig />
         </div>
-        <SheetFooter className='gap-2'>
+        <SheetFooter className={sideDrawerFooterClassName('grid-cols-1')}>
           <Button
             variant='destructive'
             onClick={handleReset}
@@ -302,7 +308,7 @@ const RADIUS_OPTIONS: {
   // CSS border-radius value used to render the visual preview corner.
   preview: string
 }[] = [
-  { value: 'default', label: 'Auto', preview: '999px' },
+  { value: 'default', label: 'Auto', preview: '1rem' },
   { value: 'none', label: '0', preview: '0' },
   { value: 'sm', label: '0.3', preview: '0.3rem' },
   { value: 'md', label: '0.5', preview: '0.5rem' },