Merge branch 'main' of https://github.com/unkeyed/unkey

unkeyed · Aug 20, 2024 · 7af0ca6 · 7af0ca6
2 parents db20a8c + 630a6a9
commit 7af0ca6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
@@ -160,7 +160,7 @@ export default async function APIKeyDetailPage(props: {
 
       <div className="flex flex-col gap-4 mt-4">
         <Card>
-          <CardContent className="grid grid-cols-6 divide-x">
+          <CardContent className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-2 sm:divide-x">
             <Metric
               label={key.expires && key.expires.getTime() < Date.now() ? "Expired" : "Expires in"}
               value={key.expires ? ms(key.expires.getTime() - Date.now()) : <Minus />}
@@ -354,8 +354,10 @@ const Metric: React.FC<{
 }> = ({ label, value, tooltip }) => {
   const component = (
     <div className="flex flex-col items-start justify-center px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
+      <p className="text-sm text-content-subtle truncate w-full">{label}</p>
+      <div className="text-2xl font-semibold leading-none tracking-tight truncate w-full">
+        {value}
+      </div>
     </div>
   );
 

diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx
@@ -75,7 +75,7 @@ const RecursivePermission: React.FC<
           </div>
           <p className="ml-6 text-xs text-content-subtle">{description}</p>
         </TooltipTrigger>
-        <TooltipContent side="right">
+        <TooltipContent side="top" align="start" avoidCollisions={true}>
           <div className="flex items-center justify-start max-w-sm gap-2 text-content">
             <pre className="text-ellipsis overflow-hidden hover:overflow-visible">{name}</pre>
             <div>