style: add flex-1 tag to user-tooltip for stats like in UI design

hikka-io · Sep 14, 2024 · f27929e · f27929e
1 parent ec7b7d2
commit f27929e
Showing 1 changed file with 23 additions and 23 deletions.
diff --git a/src/components/content-card/user-tooltip.tsx b/src/components/content-card/user-tooltip.tsx
@@ -103,26 +103,26 @@ const TooltipData: FC<TooltipDataProps> = ({ username }) => {
                             </h4>
                             {(user?.role === 'admin' ||
                                 user?.role === 'moderator') && (
-                                <Tooltip delayDuration={0}>
-                                    <TooltipTrigger>
-                                        <div className="rounded-sm border border-accent/60 bg-accent/30 p-1 text-xs font-bold text-accent-foreground">
-                                            {user.role === 'admin' && (
-                                                <MaterialSymbolsSecurity className="text-[#d0bfff]" />
-                                            )}
-                                            {user.role === 'moderator' && (
-                                                <MaterialSymbolsShieldPerson className="text-[#ffc9c9]" />
-                                            )}
-                                        </div>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                        <P className="text-sm">
-                                            {user.role === 'admin'
-                                                ? 'Адміністратор'
-                                                : 'Модератор'}
-                                        </P>
-                                    </TooltipContent>
-                                </Tooltip>
-                            )}
+                                    <Tooltip delayDuration={0}>
+                                        <TooltipTrigger>
+                                            <div className="rounded-sm border border-accent/60 bg-accent/30 p-1 text-xs font-bold text-accent-foreground">
+                                                {user.role === 'admin' && (
+                                                    <MaterialSymbolsSecurity className="text-[#d0bfff]" />
+                                                )}
+                                                {user.role === 'moderator' && (
+                                                    <MaterialSymbolsShieldPerson className="text-[#ffc9c9]" />
+                                                )}
+                                            </div>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            <P className="text-sm">
+                                                {user.role === 'admin'
+                                                    ? 'Адміністратор'
+                                                    : 'Модератор'}
+                                            </P>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                )}
                         </div>
                     </div>
                     <FollowButton
@@ -153,15 +153,15 @@ const TooltipData: FC<TooltipDataProps> = ({ username }) => {
             </div>
             <Separator className="-mx-4 w-auto" />
             <div className="flex justify-between text-sm font-semibold">
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 flex-1">
                     <MaterialAnimatedImages className="text-muted-foreground" />
                     {watchStats?.completed}
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 flex-1">
                     <MaterialSymbolsPalette className="text-muted-foreground" />
                     {mangaStats?.completed}
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 flex-1">
                     <MaterialSymbolsMenuBookRounded className="text-muted-foreground" />
                     {novelStats?.completed}
                 </div>