feat(ui): improve mobile responsive layouts

web/default/src/features/models/components/deployments-table.tsx

@@ -72,7 +72,7 @@ export function DeploymentsTable() {
       pageKey: 'dPage',
       pageSizeKey: 'dPageSize',
       defaultPage: 1,
-      defaultPageSize: 10,
+      defaultPageSize: isMobile ? 8 : 10,
     },
     globalFilter: { enabled: true, key: 'dFilter' },
     columnFilters: [
@@ -229,7 +229,7 @@ export function DeploymentsTable() {
 
   return (
     <>
-      <div className='space-y-4'>
+      <div className='space-y-3 sm:space-y-4'>
         <DataTableToolbar
           table={table}
           searchPlaceholder={t('Search deployments...')}

web/default/src/features/models/components/dialogs/update-config-dialog.tsx

@@ -195,7 +195,7 @@ export function UpdateConfigDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='max-h-[90vh] overflow-hidden sm:max-w-3xl'>
+      <DialogContent className='max-h-[calc(100dvh-2rem)] overflow-hidden max-sm:w-screen max-sm:max-w-none max-sm:rounded-none max-sm:p-4 sm:max-w-3xl'>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
@@ -205,14 +205,14 @@ export function UpdateConfigDialog({
             <Loader2 className='text-muted-foreground h-6 w-6 animate-spin' />
           </div>
         ) : (
-          <div className='max-h-[72vh] overflow-y-auto py-2 pr-1'>
+          <div className='max-h-[calc(100dvh-8.5rem)] overflow-y-auto py-2 pr-1 sm:max-h-[72vh]'>
             <Form {...form}>
               <form
                 onSubmit={form.handleSubmit(onSubmit)}
                 autoComplete='off'
                 className='space-y-4'
               >
-                <div className='grid gap-4 md:grid-cols-2'>
+                <div className='grid gap-3 md:grid-cols-2 md:gap-4'>
                   <FormField
                     control={form.control}
                     name='image_url'
@@ -262,7 +262,7 @@ export function UpdateConfigDialog({
                   />
                 </div>
 
-                <div className='grid gap-4 md:grid-cols-2'>
+                <div className='grid gap-3 md:grid-cols-2 md:gap-4'>
                   <FormField
                     control={form.control}
                     name='entrypoint'
@@ -313,7 +313,7 @@ export function UpdateConfigDialog({
                     {t('Registry (optional)')}
                   </CollapsibleTrigger>
                   <CollapsibleContent>
-                    <div className='mt-3 grid gap-4 md:grid-cols-2'>
+                    <div className='mt-3 grid gap-3 md:grid-cols-2 md:gap-4'>
                       <FormField
                         control={form.control}
                         name='registry_username'
@@ -353,7 +353,7 @@ export function UpdateConfigDialog({
                     {t('Environment variables')}
                   </CollapsibleTrigger>
                   <CollapsibleContent>
-                    <div className='mt-3 grid gap-4 md:grid-cols-2'>
+                    <div className='mt-3 grid gap-3 md:grid-cols-2 md:gap-4'>
                       <FormField
                         control={form.control}
                         name='env_json'
@@ -394,7 +394,7 @@ export function UpdateConfigDialog({
                   </CollapsibleContent>
                 </Collapsible>
 
-                <DialogFooter className='pt-2'>
+                <DialogFooter className='grid grid-cols-2 gap-2 pt-2 sm:flex'>
                   <Button
                     type='button'
                     variant='outline'

web/default/src/features/models/components/dialogs/view-details-dialog.tsx

@@ -99,18 +99,18 @@ export function ViewDetailsDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='max-h-[90vh] overflow-hidden sm:max-w-3xl'>
+      <DialogContent className='max-h-[calc(100dvh-2rem)] overflow-hidden max-sm:w-screen max-sm:max-w-none max-sm:rounded-none max-sm:p-4 sm:max-w-3xl'>
         <DialogHeader>
           <DialogTitle>{t('Deployment details')}</DialogTitle>
         </DialogHeader>
 
-        <div className='max-h-[72vh] space-y-4 overflow-y-auto py-2 pr-1'>
-          <div className='flex flex-wrap items-center justify-between gap-2'>
+        <div className='max-h-[calc(100dvh-8.5rem)] space-y-3 overflow-y-auto py-2 pr-1 sm:max-h-[72vh] sm:space-y-4'>
+            <div className='flex flex-wrap items-center justify-between gap-2'>
             <div className='text-muted-foreground text-sm'>
               {t('Deployment ID')}:{' '}
               <span className='font-mono'>{deploymentId}</span>
             </div>
-            <div className='flex items-center gap-2'>
+            <div className='grid grid-cols-2 gap-2 sm:flex sm:items-center'>
               <Button variant='outline' size='sm' onClick={handleCopyId}>
                 <Copy className='mr-2 h-4 w-4' />
                 {t('Copy')}
@@ -252,7 +252,7 @@ export function ViewDetailsDialog({
         </div>
 
         <DialogFooter>
-          <Button variant='outline' onClick={() => onOpenChange(false)}>
+          <Button variant='outline' onClick={() => onOpenChange(false)} className='w-full sm:w-auto'>
             {t('Close')}
           </Button>
         </DialogFooter>

web/default/src/features/models/components/dialogs/view-logs-dialog.tsx

@@ -124,7 +124,7 @@ export function ViewLogsDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='flex h-[80vh] max-w-4xl flex-col'>
+      <DialogContent className='flex h-[calc(100dvh-2rem)] flex-col max-sm:w-screen max-sm:max-w-none max-sm:rounded-none max-sm:p-4 sm:h-[80vh] sm:max-w-4xl'>
         <DialogHeader>
           <DialogTitle className='flex items-center gap-2'>
             <Terminal className='h-5 w-5' />
@@ -132,11 +132,11 @@ export function ViewLogsDialog({
           </DialogTitle>
         </DialogHeader>
 
-        <div className='mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3'>
           <div className='text-muted-foreground text-sm'>
             {t('Deployment ID')}: {deploymentId}
           </div>
-          <div className='flex flex-wrap items-center gap-2'>
+          <div className='grid grid-cols-2 gap-2 sm:flex sm:flex-wrap sm:items-center'>
             <Button
               variant='outline'
               size='sm'
@@ -162,14 +162,14 @@ export function ViewLogsDialog({
               <Download className='mr-2 h-4 w-4' />
               {t('Download')}
             </Button>
-            <div className='flex items-center gap-2 rounded-md border px-3 py-1.5'>
+            <div className='col-span-2 flex items-center justify-between gap-2 rounded-md border px-3 py-1.5 sm:col-span-1'>
               <span className='text-xs'>{t('Auto refresh')}</span>
               <Switch checked={autoRefresh} onCheckedChange={setAutoRefresh} />
             </div>
           </div>
         </div>
 
-        <div className='mb-3 grid gap-3 sm:grid-cols-2'>
+        <div className='mb-3 grid gap-2 sm:grid-cols-2 sm:gap-3'>
           <div className='space-y-1'>
             <div className='text-muted-foreground text-xs'>
               {t('Container')}
@@ -234,7 +234,7 @@ export function ViewLogsDialog({
 
         <div
           ref={scrollRef}
-          className='flex-1 overflow-auto rounded-md border bg-black p-4'
+          className='flex-1 overflow-auto rounded-md border bg-black p-3 sm:p-4'
           onScroll={(e) => {
             const target = e.target as HTMLDivElement
             const isAtBottom =

web/default/src/features/models/components/drawers/model-mutate-drawer.tsx

@@ -601,8 +601,8 @@ export function ModelMutateDrawer({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className='flex w-full flex-col sm:max-w-2xl'>
-        <SheetHeader className='text-start'>
+      <SheetContent className='flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl'>
+        <SheetHeader className='border-b px-4 py-3 text-start sm:px-6 sm:py-4'>
           <SheetTitle>
             {isEditing ? t('Edit Model') : t('Create Model')}
           </SheetTitle>
@@ -621,7 +621,7 @@ export function ModelMutateDrawer({
             onSubmit={form.handleSubmit(
               onSubmit as Parameters<typeof form.handleSubmit>[0]
             )}
-            className='flex-1 space-y-6 overflow-y-auto px-4'
+            className='flex-1 space-y-4 overflow-y-auto px-3 py-3 pb-4 sm:space-y-6 sm:px-4'
           >
             {/* Basic Information */}
             <div className='space-y-4'>
@@ -1232,7 +1232,7 @@ export function ModelMutateDrawer({
           </form>
         </Form>
 
-        <SheetFooter className='gap-2'>
+        <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
           <SheetClose asChild>
             <Button variant='outline' disabled={isSubmitting}>
               {t('Cancel')}

web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx

@@ -161,8 +161,8 @@ export function PrefillGroupFormDrawer({
 
   return (
     <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetContent className='flex w-full flex-col sm:max-w-2xl'>
-        <SheetHeader className='text-start'>
+      <SheetContent className='flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl'>
+        <SheetHeader className='border-b px-4 py-3 text-start sm:px-6 sm:py-4'>
           <SheetTitle>
             {isEdit ? t('Edit Prefill Group') : t('Create Prefill Group')}
           </SheetTitle>
@@ -177,7 +177,7 @@ export function PrefillGroupFormDrawer({
           <form
             id='prefill-group-form'
             onSubmit={form.handleSubmit(handleSubmit)}
-            className='flex-1 space-y-6 overflow-y-auto px-4'
+            className='flex-1 space-y-4 overflow-y-auto px-3 py-3 pb-4 sm:space-y-6 sm:px-4'
           >
             <div className='space-y-4'>
               <div className='space-y-1'>
@@ -286,7 +286,7 @@ export function PrefillGroupFormDrawer({
                 )}
               />
 
-              <div className='space-y-2 rounded-lg border p-4'>
+              <div className='space-y-2 rounded-lg border p-3 sm:p-4'>
                 <div className='flex items-center gap-2'>
                   <h4 className='text-sm font-medium'>{t('Project')}</h4>
                   <StatusBadge
@@ -343,7 +343,7 @@ export function PrefillGroupFormDrawer({
           </form>
         </Form>
 
-        <SheetFooter className='gap-2'>
+        <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
           <SheetClose asChild>
             <Button type='button' variant='outline' disabled={isSaving}>
               {t('Cancel')}

web/default/src/features/models/components/models-table.tsx

@@ -67,7 +67,10 @@ export function ModelsTable() {
   } = useTableUrlState({
     search: route.useSearch(),
     navigate: route.useNavigate(),
-    pagination: { defaultPage: 1, defaultPageSize: DEFAULT_PAGE_SIZE },
+    pagination: {
+      defaultPage: 1,
+      defaultPageSize: isMobile ? 10 : DEFAULT_PAGE_SIZE,
+    },
     globalFilter: { enabled: true, key: 'filter' },
     columnFilters: [
       { columnId: 'status', searchKey: 'status', type: 'array' },
@@ -217,7 +220,7 @@ export function ModelsTable() {
 
   return (
     <>
-      <div className='space-y-4'>
+      <div className='space-y-3 sm:space-y-4'>
         <DataTableToolbar
           table={table}
           searchPlaceholder={t('Filter by model name...')}