♻️ refactor(web): consolidate design-system primitives and responsive data views

web/default/src/features/channels/components/model-mapping-editor.tsx

@@ -20,10 +20,15 @@ import { Code, Plus, Table, Trash2 } from 'lucide-react'
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { Button } from '@/components/design-system/button'
+import { Input } from '@/components/design-system/input'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/components/design-system/tabs'
 import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Textarea } from '@/components/ui/textarea'
 import { cn } from '@/lib/utils'
 
@@ -237,8 +242,7 @@ export function ModelMappingEditor(props: ModelMappingEditorProps) {
           <Button
             type='button'
             variant='link'
-            size='sm'
-            className='h-auto p-0'
+            className='h-auto p-0 sm:h-auto'
             onClick={handleFillTemplate}
             disabled={props.disabled}
           >
@@ -299,7 +303,6 @@ export function ModelMappingEditor(props: ModelMappingEditorProps) {
                     size='icon'
                     onClick={() => handleDeleteRow(row.id)}
                     disabled={props.disabled}
-                    className='h-10 w-10'
                     aria-label={t('Delete mapping')}
                   >
                     <Trash2 className='h-4 w-4' aria-hidden='true' />
@@ -317,7 +320,6 @@ export function ModelMappingEditor(props: ModelMappingEditorProps) {
           <Button
             type='button'
             variant='outline'
-            size='sm'
             onClick={handleAddRow}
             disabled={props.disabled}
             className='w-full'