feat(ui): improve mobile responsive layouts

web/default/src/features/profile/components/profile-security-card.tsx

@@ -4,11 +4,10 @@ import { useDialogs } from '@/hooks/use-dialog'
 import {
   Card,
   CardContent,
-  CardDescription,
   CardHeader,
-  CardTitle,
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
+import { TitledCard } from '@/components/ui/titled-card'
 import type { UserProfile } from '../types'
 import { AccessTokenDialog } from './dialogs/access-token-dialog'
 import { ChangePasswordDialog } from './dialogs/change-password-dialog'
@@ -34,12 +33,12 @@ export function ProfileSecurityCard({
 
   if (loading) {
     return (
-      <Card className='overflow-hidden'>
-        <CardHeader className='border-b'>
+      <Card className='gap-0 overflow-hidden py-0'>
+        <CardHeader className='border-b p-3 !pb-3 sm:p-5 sm:!pb-5'>
           <Skeleton className='h-6 w-32' />
           <Skeleton className='mt-2 h-4 w-48' />
         </CardHeader>
-        <CardContent className='space-y-3 pt-6'>
+        <CardContent className='space-y-3 p-3 sm:p-5'>
           {Array.from({ length: 3 }).map((_, i) => (
             <Skeleton key={i} className='h-16 w-full' />
           ))}
@@ -76,31 +75,18 @@ export function ProfileSecurityCard({
 
   return (
     <>
-      <Card className='overflow-hidden'>
-        <CardHeader className='border-b'>
-          <div className='flex items-center gap-3'>
-            <div className='bg-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-lg'>
-              <Shield className='h-4 w-4' />
-            </div>
-            <div className='min-w-0'>
-              <CardTitle className='text-xl tracking-tight'>
-                {t('Security')}
-              </CardTitle>
-              <CardDescription>
-                {t('Manage your security settings and account access')}
-              </CardDescription>
-            </div>
-          </div>
-        </CardHeader>
-
-        <CardContent className='pt-6'>
-          <div className='grid grid-cols-1 gap-3 md:grid-cols-3'>
+      <TitledCard
+        title={t('Security')}
+        description={t('Manage your security settings and account access')}
+        icon={<Shield className='h-4 w-4' />}
+      >
+          <div className='grid grid-cols-1 gap-2.5 sm:gap-3 md:grid-cols-3'>
             {securityActions.map((item) => (
               <button
                 key={item.title}
                 type='button'
                 onClick={item.action}
-                className={`hover:bg-muted/50 flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-colors ${
+                className={`hover:bg-muted/50 flex items-center gap-3 rounded-lg border p-3 text-left transition-colors md:flex-col md:gap-2 md:p-4 md:text-center ${
                   item.variant === 'destructive'
                     ? 'border-destructive/30 hover:border-destructive/50 hover:bg-destructive/5'
                     : ''
@@ -115,15 +101,16 @@ export function ProfileSecurityCard({
                 >
                   <item.icon className='h-5 w-5' />
                 </div>
-                <p className='text-sm font-medium'>{item.title}</p>
-                <p className='text-muted-foreground text-xs'>
-                  {item.description}
-                </p>
+                <div className='min-w-0 md:contents'>
+                  <p className='text-sm font-medium'>{item.title}</p>
+                  <p className='text-muted-foreground line-clamp-1 text-xs md:line-clamp-none'>
+                    {item.description}
+                  </p>
+                </div>
               </button>
             ))}
           </div>
-        </CardContent>
-      </Card>
+      </TitledCard>
 
       {/* Dialogs */}
       <ChangePasswordDialog