✨ 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/features/system-settings/models/conflict-confirm-dialog.tsx

@@ -91,12 +91,12 @@ export function ConflictConfirmDialog({
                     {conflict.model}
                   </TableCell>
                   <TableCell>
-                    <pre className='text-xs whitespace-pre-wrap'>
+                    <pre className='text-sm whitespace-pre-wrap'>
                       {conflict.current}
                     </pre>
                   </TableCell>
                   <TableCell>
-                    <pre className='text-xs whitespace-pre-wrap'>
+                    <pre className='text-sm whitespace-pre-wrap'>
                       {conflict.newVal}
                     </pre>
                   </TableCell>

web/default/src/features/system-settings/models/group-ratio-form.tsx

@@ -45,6 +45,11 @@ import {
 } from '@/components/ui/sheet'
 import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import {
   SettingsForm,
   SettingsSwitchContent,
@@ -337,8 +342,11 @@ function GroupPricingGuide({ open, onOpenChange }: GroupPricingGuideProps) {
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side='right' className='w-full gap-0 p-0 sm:max-w-2xl'>
-        <SheetHeader className='border-b p-4'>
+      <SheetContent
+        side='right'
+        className={sideDrawerContentClassName('sm:max-w-2xl')}
+      >
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>{t('Group pricing usage guide')}</SheetTitle>
           <SheetDescription>
             {t(
@@ -347,7 +355,7 @@ function GroupPricingGuide({ open, onOpenChange }: GroupPricingGuideProps) {
           </SheetDescription>
         </SheetHeader>
 
-        <div className='space-y-5 overflow-y-auto p-4'>
+        <div className={sideDrawerFormClassName('gap-5')}>
           <section className='space-y-2'>
             <h3 className='text-sm font-semibold'>{t('Core concepts')}</h3>
             <div className='text-muted-foreground space-y-2 text-sm leading-6'>

web/default/src/features/system-settings/models/model-pricing-sheet.tsx

@@ -61,6 +61,10 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+} from '@/components/drawer-layout'
 import { combineBillingExpr } from '@/features/pricing/lib/billing-expr'
 import {
   SettingsControlGroup,
@@ -387,7 +391,10 @@ export function ModelPricingSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side='right' className='w-full gap-0 p-0 sm:max-w-2xl'>
+      <SheetContent
+        side='right'
+        className={sideDrawerContentClassName('sm:max-w-2xl')}
+      >
         <SheetHeader className='sr-only'>
           <SheetTitle>{title}</SheetTitle>
           <SheetDescription>{description}</SheetDescription>
@@ -733,7 +740,7 @@ export function ModelPricingEditorPanel({
   return (
     <div
       className={cn(
-        'bg-card flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border',
+        'bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border',
         className
       )}
     >
@@ -948,7 +955,11 @@ export function ModelPricingEditorPanel({
             </FieldGroup>
           </div>
 
-          <SheetFooter className='bg-background/95 border-t sm:flex-row sm:items-center sm:justify-between'>
+          <SheetFooter
+            className={sideDrawerFooterClassName(
+              'grid-cols-1 sm:items-center sm:justify-between'
+            )}
+          >
             <div className='text-muted-foreground text-xs'>
               {selectedTargetCount > 0
                 ? t('{{count}} selected targets available for bulk copy.', {