@hed-hog/core 0.0.276 → 0.0.279

package/hedhog/frontend/app/dashboard/components/widgets/email-notifications.tsx.ejs

@@ -40,6 +40,7 @@ const chartConfig = {
 const emailStats = [
   {
     label: 'Recebidos',
+    shortLabel: 'Rec.',
     value: '35',
     icon: Mail,
     color: 'text-blue-600 dark:text-blue-400',
@@ -47,6 +48,7 @@ const emailStats = [
   },
   {
     label: 'Lidos',
+    shortLabel: 'Lid.',
     value: '26',
     icon: MailCheck,
     color: 'text-emerald-600 dark:text-emerald-400',
@@ -54,6 +56,7 @@ const emailStats = [
   },
   {
     label: 'Nao lidos',
+    shortLabel: 'N. lid.',
     value: '9',
     icon: MailWarning,
     color: 'text-amber-600 dark:text-amber-400',
@@ -61,6 +64,7 @@ const emailStats = [
   },
   {
     label: 'Com erro',
+    shortLabel: 'Erro',
     value: '2',
     icon: MailX,
     color: 'text-red-600 dark:text-red-400',
@@ -85,59 +89,66 @@ export default function EmailNotifications({
       widgetName={widget?.name ?? 'email-notifications'}
       onRemove={onRemove}
     >
-      <Card className="flex h-full flex-col">
+      <Card className="flex h-full min-h-0 flex-col overflow-hidden">
         <CardHeader className="shrink-0 pb-2">
           <div className="flex items-center gap-2">
-            <Mail className="h-5 w-5 text-rose-600 dark:text-rose-400" />
+            <Mail className="h-4 w-4 text-rose-600 dark:text-rose-400 sm:h-5 sm:w-5" />
             <div>
-              <CardTitle className="text-base font-semibold">
+              <CardTitle className="text-sm font-semibold sm:text-base">
                 Notificacoes por E-mail
               </CardTitle>
-              <CardDescription>
+              <CardDescription className="text-xs sm:text-sm">
                 E-mails do sistema nos ultimos 14 dias
               </CardDescription>
             </div>
           </div>
         </CardHeader>
-        <CardContent className="flex-1 overflow-auto pt-0">
-          <div className="mb-4 grid grid-cols-4 gap-2">
+        <CardContent className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden pt-0">
+          <div className="grid grid-cols-2 gap-1.5 sm:gap-2 md:grid-cols-4">
             {emailStats.map((stat) => {
               const Icon = stat.icon;
               return (
                 <div
                   key={stat.label}
-                  className="flex flex-col items-center gap-1 rounded-lg border p-2.5 transition-colors hover:bg-muted/30"
+                  className="flex min-w-0 flex-col items-center gap-1 rounded-lg border p-2 text-center transition-colors hover:bg-muted/30 sm:p-2.5"
                 >
                   <div
-                    className={`flex h-7 w-7 items-center justify-center rounded-md ${stat.bg}`}
+                    className={`flex h-6 w-6 items-center justify-center rounded-md sm:h-7 sm:w-7 ${stat.bg}`}
                   >
-                    <Icon className={`h-3.5 w-3.5 ${stat.color}`} />
+                    <Icon
+                      className={`h-3 w-3 sm:h-3.5 sm:w-3.5 ${stat.color}`}
+                    />
                   </div>
-                  <span className="text-lg font-bold text-foreground">
+                  <span className="text-base font-bold text-foreground sm:text-lg">
                     {stat.value}
                   </span>
-                  <span className="text-[10px] text-muted-foreground">
-                    {stat.label}
+                  <span className="truncate text-[9px] text-muted-foreground sm:text-[10px]">
+                    <span className="sm:hidden">{stat.shortLabel}</span>
+                    <span className="hidden sm:inline">{stat.label}</span>
                   </span>
                 </div>
               );
             })}
           </div>
 
-          <ChartContainer config={chartConfig} className="h-[180px] w-full">
+          <ChartContainer
+            config={chartConfig}
+            className="min-h-[170px] w-full flex-1 overflow-hidden sm:min-h-[220px]"
+          >
             <AreaChart data={data}>
               <CartesianGrid vertical={false} strokeDasharray="3 3" />
               <XAxis
                 dataKey="date"
                 tickLine={false}
                 axisLine={false}
-                fontSize={11}
-                tickMargin={8}
+                fontSize={10}
+                tickMargin={4}
+                minTickGap={20}
               />
               <YAxis
                 tickLine={false}
                 axisLine={false}
-                fontSize={11}
+                fontSize={10}
                 tickMargin={4}
                 allowDecimals={false}
               />

package/hedhog/frontend/app/dashboard/components/widgets/login-history-chart.tsx.ejs

@@ -28,22 +28,24 @@ function LoginChart({ data }: { data: LoginDay[] }) {
   };
 
   return (
-    <Card className="flex h-full flex-col">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
       <CardHeader className="shrink-0 pb-2">
         <div className="flex items-center gap-2">
-          <LogIn className="h-5 w-5 text-blue-600" />
+          <LogIn className="h-4 w-4 text-blue-600 sm:h-5 sm:w-5" />
           <div>
-            <CardTitle className="text-base font-semibold">
+            <CardTitle className="text-sm font-semibold sm:text-base">
               {t('title')}
             </CardTitle>
-            <CardDescription>{t('description')}</CardDescription>
+            <CardDescription className="text-xs sm:text-sm">
+              {t('description')}
+            </CardDescription>
           </div>
         </div>
       </CardHeader>
-      <CardContent className="flex flex-1 flex-col pt-0">
+      <CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden pt-0">
         <ChartContainer
           config={chartConfig}
-          className="h-full min-h-[120px] w-full flex-1"
+          className="h-full min-h-[140px] w-full flex-1 overflow-hidden sm:min-h-40"
         >
           <BarChart data={data as any} barGap={2}>
             <CartesianGrid vertical={false} strokeDasharray="3 3" />
@@ -51,13 +53,15 @@ function LoginChart({ data }: { data: LoginDay[] }) {
               dataKey="day"
               tickLine={false}
               axisLine={false}
-              fontSize={12}
-              tickMargin={8}
+              fontSize={10}
+              tickMargin={4}
+              minTickGap={20}
+              interval="preserveStartEnd"
             />
             <YAxis
               tickLine={false}
               axisLine={false}
-              fontSize={12}
+              fontSize={10}
               tickMargin={4}
               allowDecimals={false}
             />

package/hedhog/frontend/app/dashboard/components/widgets/menus-card.tsx.ejs

@@ -0,0 +1,58 @@
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { LayoutList } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import StatCard from '../stats';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface MenusCardProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface SystemStatsData {
+  cards?: {
+    menus?: {
+      value: number;
+      change: number | null;
+    };
+  };
+}
+
+export default function MenusCard({ widget, onRemove }: MenusCardProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<SystemStatsData>({
+      endpoint: '/dashboard-core/stats/overview/system',
+      queryKey: 'dashboard-stats-system',
+    });
+
+  const value = data?.cards?.menus?.value?.toLocaleString('pt-BR') || '0';
+  const change = data?.cards?.menus?.change;
+  const changeType =
+    change !== null && change !== undefined && change >= 0 ? 'up' : 'down';
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('menus')}
+      onRemove={onRemove}
+    >
+      <StatCard
+        title={t('menus')}
+        value={value}
+        change={
+          change !== null && change !== undefined
+            ? `${change > 0 ? '+' : ''}${change}%`
+            : undefined
+        }
+        changeType={changeType}
+        icon={<LayoutList className="h-6 w-6 text-green-500" />}
+        iconBg="bg-green-500/10"
+        delay={50}
+      />
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/permissions-chart.tsx.ejs

@@ -37,20 +37,24 @@ function CustomTooltip({
   );
 }
 
-interface PermissionsChartProps {
-  widget?: any;
-  onRemove?: () => void;
-}
-
-interface UserStatsData {
-  charts?: {
-    permissionDistribution?: Array<{
-      name: string;
-      value: number;
-      color: string;
-    }>;
-  };
-}
+interface PermissionsChartProps {
+  widget?: {
+    name?: string;
+  } | null;
+  onRemove?: () => void;
+}
+
+interface PermissionDistributionItem {
+  name: string;
+  value: number;
+  color: string;
+}
+
+interface UserStatsData {
+  charts?: {
+    permissionDistribution?: PermissionDistributionItem[];
+  };
+}
 
 export default function PermissionsChart({
   widget,
@@ -66,10 +70,10 @@ export default function PermissionsChart({
   } = useWidgetData<UserStatsData>({
     endpoint: '/dashboard-core/stats/overview/users',
     queryKey: 'dashboard-stats-users',
-  });
-
-  const data = statsData?.charts?.permissionDistribution || [];
-  const total = data.reduce((sum: number, item: any) => sum + item.value, 0);
+  });
+
+  const data = statsData?.charts?.permissionDistribution || [];
+  const total = data.reduce((sum, item) => sum + item.value, 0);
 
   return (
     <WidgetWrapper
@@ -86,19 +90,19 @@ export default function PermissionsChart({
         >
           <IconGripVertical className="text-muted-foreground/50 size-4 shrink-0" />
         </div>
-        <CardHeader className="pb-2 pt-4 pl-10">
-          <CardTitle className="text-base font-semibold">
-            {t('permissionsDistributionTitle')}
-          </CardTitle>
+        <CardHeader className="pb-2 pt-4 pl-10">
+          <CardTitle className="text-base font-semibold">
+            {t('permissionsDistributionTitle')}
+          </CardTitle>
           <CardDescription>
             {t('permissionsDistributionDescription')}
           </CardDescription>
-        </CardHeader>
-        <CardContent className="flex-1 pt-0">
-          <div className="flex justify-between items-center gap-4">
-            <div className="relative h-[280px] w-[280px] shrink-0">
-              <ResponsiveContainer width="100%" height="100%">
-                <PieChart>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <div className="flex h-full items-center justify-between gap-4 overflow-hidden">
+            <div className="relative h-[280px] w-[280px] shrink-0">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
                   <Pie
                     data={data}
                     cx="50%"
@@ -106,14 +110,14 @@ export default function PermissionsChart({
                     innerRadius={70}
                     outerRadius={110}
                     paddingAngle={4}
-                    dataKey="value"
-                    animationDuration={1200}
-                    strokeWidth={0}
-                  >
-                    {data.map((entry: any, index: number) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                  </Pie>
+                  dataKey="value"
+                  animationDuration={1200}
+                  strokeWidth={0}
+                >
+                    {data.map((entry, index: number) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
                   <Tooltip content={<CustomTooltip />} />
                 </PieChart>
               </ResponsiveContainer>
@@ -121,28 +125,28 @@ export default function PermissionsChart({
                 <span className="text-2xl font-bold text-foreground">
                   {total}
                 </span>
-                <span className="text-[10px] text-muted-foreground">
-                  {t('total')}
-                </span>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-3">
-              {data.map((item: any) => (
-                <div key={item.name} className="flex items-center gap-3">
-                  <div
-                    className="h-3 w-3 rounded-sm"
-                    style={{ backgroundColor: item.color }}
-                  />
-                  <div className="flex flex-col">
-                    <span className="text-sm font-medium text-foreground">
-                      {item.name}
-                    </span>
-                    <span className="text-xs text-muted-foreground">
-                      {item.value} ({Math.round((item.value / total) * 100)}%)
-                    </span>
-                  </div>
-                </div>
-              ))}
+                <span className="text-[10px] text-muted-foreground">
+                  {t('total')}
+                </span>
+              </div>
+            </div>
+            <div className="grid max-h-[280px] min-w-0 flex-1 grid-cols-2 content-start gap-x-4 gap-y-2 overflow-y-auto pr-2">
+              {data.map((item) => (
+                <div key={item.name} className="flex min-w-0 items-start gap-2.5">
+                  <div
+                    className="mt-1 h-2.5 w-2.5 shrink-0 rounded-sm"
+                    style={{ backgroundColor: item.color }}
+                  />
+                  <div className="flex min-w-0 flex-col">
+                    <span className="break-words text-xs font-medium leading-tight text-foreground">
+                      {item.name}
+                    </span>
+                    <span className="text-[11px] text-muted-foreground">
+                      {item.value} ({total ? Math.round((item.value / total) * 100) : 0}%)
+                    </span>
+                  </div>
+                </div>
+              ))}
             </div>
           </div>
         </CardContent>

package/hedhog/frontend/app/dashboard/components/widgets/routes-card.tsx.ejs

@@ -0,0 +1,58 @@
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { Route } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import StatCard from '../stats';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface RoutesCardProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface SystemStatsData {
+  cards?: {
+    routes?: {
+      value: number;
+      change: number | null;
+    };
+  };
+}
+
+export default function RoutesCard({ widget, onRemove }: RoutesCardProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<SystemStatsData>({
+      endpoint: '/dashboard-core/stats/overview/system',
+      queryKey: 'dashboard-stats-system',
+    });
+
+  const value = data?.cards?.routes?.value?.toLocaleString('pt-BR') || '0';
+  const change = data?.cards?.routes?.change;
+  const changeType =
+    change !== null && change !== undefined && change >= 0 ? 'up' : 'down';
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('routes')}
+      onRemove={onRemove}
+    >
+      <StatCard
+        title={t('routes')}
+        value={value}
+        change={
+          change !== null && change !== undefined
+            ? `${change > 0 ? '+' : ''}${change}%`
+            : undefined
+        }
+        changeType={changeType}
+        icon={<Route className="h-6 w-6 text-orange-500" />}
+        iconBg="bg-orange-500/10"
+        delay={50}
+      />
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/stat-access-level.tsx.ejs

@@ -35,18 +35,18 @@ export default function StatAccessLevel({
       onRemove={onRemove}
     >
       <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-4 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-amber-50 dark:bg-amber-950/40">
-            <Zap className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+        <CardContent className="flex h-full items-center gap-2.5 p-2.5 sm:gap-3 sm:p-3 md:gap-4 md:p-4">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-amber-50 dark:bg-amber-950/40 sm:h-9 sm:w-9 md:h-11 md:w-11">
+            <Zap className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400 sm:h-4 sm:w-4 md:h-5 md:w-5" />
           </div>
           <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:text-[11px]">
               {t('accessLevel')}
             </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
+            <span className="truncate text-base font-bold tracking-tight text-foreground sm:text-lg md:text-2xl">
               {data ? t('accessLevelValue', { level: data }) : '—'}
             </span>
-            <span className="text-[11px] text-muted-foreground">
+            <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
               {t('accessLevelSubtitle')}
             </span>
           </div>

package/hedhog/frontend/app/dashboard/components/widgets/stat-actions-today.tsx.ejs

@@ -35,18 +35,18 @@ export default function StatActionsToday({
       onRemove={onRemove}
     >
       <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-4 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-indigo-50 dark:bg-indigo-950/40">
-            <MousePointerClick className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
+        <CardContent className="flex h-full items-center gap-2.5 p-2.5 sm:gap-3 sm:p-3 md:gap-4 md:p-4">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-indigo-50 dark:bg-indigo-950/40 sm:h-9 sm:w-9 md:h-11 md:w-11">
+            <MousePointerClick className="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400 sm:h-4 sm:w-4 md:h-5 md:w-5" />
           </div>
           <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:text-[11px]">
               {t('actionsToday')}
             </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
+            <span className="truncate text-lg font-bold tracking-tight text-foreground sm:text-xl md:text-2xl">
               {data ?? '—'}
             </span>
-            <span className="text-[11px] text-muted-foreground">
+            <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
               {t('actionsTodaySubtitle')}
             </span>
           </div>

package/hedhog/frontend/app/dashboard/components/widgets/stat-consecutive-days.tsx.ejs

@@ -35,18 +35,18 @@ export default function StatConsecutiveDays({
       onRemove={onRemove}
     >
       <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-4 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-emerald-50 dark:bg-emerald-950/40">
-            <CalendarDays className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
+        <CardContent className="flex h-full items-center gap-2.5 p-2.5 sm:gap-3 sm:p-3 md:gap-4 md:p-4">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-emerald-50 dark:bg-emerald-950/40 sm:h-9 sm:w-9 md:h-11 md:w-11">
+            <CalendarDays className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400 sm:h-4 sm:w-4 md:h-5 md:w-5" />
           </div>
           <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:text-[11px]">
               {t('consecutiveDays')}
             </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
+            <span className="truncate text-lg font-bold tracking-tight text-foreground sm:text-xl md:text-2xl">
               {data ?? '—'}
             </span>
-            <span className="text-[11px] text-muted-foreground">
+            <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
               {t('consecutiveDaysSubtitle')}
             </span>
           </div>

package/hedhog/frontend/app/dashboard/components/widgets/stat-online-time.tsx.ejs

@@ -35,18 +35,18 @@ export default function StatOnlineTime({
       onRemove={onRemove}
     >
       <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-4 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-950/40">
-            <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+        <CardContent className="flex h-full items-center gap-2.5 p-2.5 sm:gap-3 sm:p-3 md:gap-4 md:p-4">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-950/40 sm:h-9 sm:w-9 md:h-11 md:w-11">
+            <Clock className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 sm:h-4 sm:w-4 md:h-5 md:w-5" />
           </div>
           <div className="flex min-w-0 flex-col">
-            <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground sm:text-[11px]">
               {t('onlineTime')}
             </span>
-            <span className="text-2xl font-bold tracking-tight text-foreground">
+            <span className="truncate text-lg font-bold tracking-tight text-foreground sm:text-xl md:text-2xl">
               {data ?? '—'}
             </span>
-            <span className="text-[11px] text-muted-foreground">
+            <span className="truncate text-[10px] text-muted-foreground sm:text-[11px]">
               {t('onlineTimeSubtitle')}
             </span>
           </div>

package/hedhog/frontend/app/dashboard/components/widgets/user-roles.tsx.ejs

@@ -52,37 +52,41 @@ function RolesContent({ roles }: { roles: RoleData[] }) {
   const t = useTranslations('core.DashboardPage.userRoles');
 
   return (
-    <Card className="flex h-full flex-col">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
       <CardHeader className="shrink-0 pb-3">
         <div className="flex items-center gap-2">
-          <Crown className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+          <Crown className="h-4 w-4 text-amber-600 dark:text-amber-400 sm:h-5 sm:w-5" />
           <div>
-            <CardTitle className="text-base font-semibold">
+            <CardTitle className="text-sm font-semibold sm:text-base">
               {t('title')}
             </CardTitle>
-            <CardDescription>{t('description')}</CardDescription>
+            <CardDescription className="text-xs sm:text-sm">
+              {t('description')}
+            </CardDescription>
           </div>
         </div>
       </CardHeader>
-      <CardContent className="flex-1 overflow-auto pt-0">
-        <div className="grid grid-cols-2 gap-2">
+      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
+        <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
           {roles.map((role, index) => {
             const style = levelStyles[index % levelStyles.length]!;
             return (
               <div
                 key={role.id}
-                className={`flex items-center gap-3 rounded-xl border p-3 transition-all duration-200 hover:shadow-sm ${style.border} ${style.bg}`}
+                className={`flex items-center gap-2.5 rounded-xl border p-2.5 transition-all duration-200 hover:shadow-sm sm:gap-3 sm:p-3 ${style.border} ${style.bg}`}
               >
                 <div
-                  className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${style.iconBg}`}
+                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg sm:h-9 sm:w-9 ${style.iconBg}`}
                 >
-                  <ShieldCheck className={`h-4 w-4 ${style.iconColor}`} />
+                  <ShieldCheck
+                    className={`h-3.5 w-3.5 sm:h-4 sm:w-4 ${style.iconColor}`}
+                  />
                 </div>
                 <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <span className="text-sm font-medium text-foreground">
+                  <span className="truncate text-[13px] font-medium text-foreground sm:text-sm">
                     {role.name}
                   </span>
-                  <span className="text-xs text-muted-foreground">
+                  <span className="truncate text-[11px] text-muted-foreground sm:text-xs">
                     {role.slug}
                   </span>
                 </div>