Fix new home page recent branch stat (#42497)

## Context

Small fix for the new home page "Recent branch" stat to add some
truncate

Before:
<img width="500" height="198" alt="image"
src="https://github.com/user-attachments/assets/f6a73934-52ea-4ed2-853d-3e4b0da054ab"
/>


After:
<img width="500" height="343" alt="image"
src="https://github.com/user-attachments/assets/9ede0378-b410-41f5-9f9d-e4273e76fcdd"
/>

Unrelated but I also set a max width to the project and branch dropdowns
in the layout header
<img width="950" height="69" alt="image"
src="https://github.com/user-attachments/assets/d9fc52f6-50c8-4adb-9a79-da3b64eb7a7f"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Enhanced display of branch and project names with improved truncation
and wider max-widths.
* Added hover tooltips (title attributes) for branch and project names
to improve accessibility.
* Refined text overflow handling and styling across dropdowns and stat
components.
* **Tests**
* Adjusted clipboard test timing to await the resolved promise before
asserting write() was called.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/interfaces/HomeNew/ActivityStats.tsx

@@ -1,16 +1,16 @@
-import dayjs from 'dayjs'
-import { Archive, Database, GitBranch } from 'lucide-react'
-import { useMemo } from 'react'
-
 import { useParams } from 'common'
 import { SingleStat } from 'components/ui/SingleStat'
 import { useBranchesQuery } from 'data/branches/branches-query'
 import { useBackupsQuery } from 'data/database/backups-query'
 import { DatabaseMigration, useMigrationsQuery } from 'data/database/migrations-query'
+import dayjs from 'dayjs'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { parseMigrationVersion } from 'lib/migration-utils'
+import { Archive, Database, GitBranch } from 'lucide-react'
+import { useMemo } from 'react'
 import { cn, Skeleton } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
+
 import { ServiceStatus } from './ServiceStatus'
 
 export const ActivityStats = () => {
@@ -143,6 +143,7 @@ export const ActivityStats = () => {
                   'truncate',
                   !latestNonDefaultBranch && 'text-foreground-lighter truncate'
                 )}
+                title={latestNonDefaultBranch?.name ?? 'No branches'}
               >
                 {latestNonDefaultBranch?.name ?? 'No branches'}
               </p>

apps/studio/components/layouts/AppLayout/BranchDropdown.tsx

@@ -1,3 +1,6 @@
+import { useParams } from 'common'
+import { Branch, useBranchesQuery } from 'data/branches/branches-query'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import {
   AlertCircle,
   Check,
@@ -10,30 +13,26 @@ import {
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-
-import { useParams } from 'common'
-import { Branch, useBranchesQuery } from 'data/branches/branches-query'
-import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useAppStateSnapshot } from 'state/app-state'
 import {
   Badge,
   Button,
+  cn,
+  Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
   CommandSeparator_Shadcn_,
-  Command_Shadcn_,
+  Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
   ScrollArea,
-  cn,
 } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+
 import { sanitizeRoute } from './ProjectDropdown'
-import { partition } from 'lodash'
 
 const BranchLink = ({
   branch,
@@ -128,7 +127,10 @@ export const BranchDropdown = () => {
       {isSuccess && (
         <>
           <Link href={`/project/${ref}`} className="flex items-center gap-2 flex-shrink-0 ">
-            <span className="text-sm text-foreground max-w-32 lg:max-w-none truncate">
+            <span
+              title={isBranchingEnabled ? selectedBranch?.name : 'main'}
+              className="text-sm text-foreground max-w-32 lg:max-w-64 truncate"
+            >
               {isBranchingEnabled ? selectedBranch?.name : 'main'}
             </span>
             {isBranchingEnabled ? (

apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx

@@ -1,9 +1,4 @@
-import { Box, Check, ChevronsUpDown, Plus } from 'lucide-react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
 import { ParsedUrlQuery } from 'querystring'
-import { useState } from 'react'
-
 import { useParams } from 'common'
 import { OrganizationProjectSelector } from 'components/ui/OrganizationProjectSelector'
 import { useProjectDetailQuery } from 'data/projects/project-detail-query'
@@ -11,7 +6,11 @@ import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { IS_PLATFORM } from 'lib/constants'
-import { Badge, Button, CommandGroup_Shadcn_, CommandItem_Shadcn_, cn } from 'ui'
+import { Box, Check, ChevronsUpDown, Plus } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { Badge, Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_ } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 export const sanitizeRoute = (route: string, routerQueries: ParsedUrlQuery) => {
@@ -60,8 +59,11 @@ export const ProjectDropdown = () => {
         className="flex items-center gap-2 flex-shrink-0 text-sm"
       >
         <Box size={14} strokeWidth={1.5} className="text-foreground-lighter" />
-        <span className="text-foreground max-w-32 lg:max-w-none truncate">
-          {selectedProject?.name}
+        <span
+          title={selectedProject.name}
+          className="text-foreground max-w-32 lg:max-w-64 truncate"
+        >
+          {selectedProject.name}
         </span>
       </Link>
 

apps/studio/components/ui/OrganizationProjectSelector.tsx

@@ -4,7 +4,6 @@ import { OrgProject, useOrgProjectsInfiniteQuery } from 'data/projects/org-proje
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { Check, ChevronsUpDown, HelpCircle } from 'lucide-react'
 import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
-
 import {
   Button,
   cn,

apps/studio/components/ui/SingleStat.tsx

@@ -1,9 +1,9 @@
-import Link from 'next/link'
-import type { ReactNode } from 'react'
-
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+import { cn } from 'ui'
 
 type SingleStatProps = {
   icon: ReactNode
@@ -44,11 +44,11 @@ export const SingleStat = ({
     }
   }
   const content = (
-    <div className={`group flex items-center gap-4 p-0 text-base justify-start ${className || ''}`}>
-      <div className="w-16 h-16 rounded-md bg-surface-75 group-hover:bg-muted border flex items-center justify-center">
+    <div className={cn('group flex items-center gap-4 p-0 text-base justify-start', className)}>
+      <div className="min-w-16 w-16 h-16 rounded-md bg-surface-75 group-hover:bg-muted border flex items-center justify-center">
         {icon}
       </div>
-      <div>
+      <div className="truncate">
         <div className="text-left heading-meta text-foreground-light">{label}</div>
         <div className="text-foreground truncate h-[34px] flex items-center capitalize-sentence">
           {value}

apps/studio/lib/helpers.test.ts

@@ -206,8 +206,9 @@ describe('copyToClipboard', () => {
   })
 
   it('uses clipboard.write if available', async () => {
-    await copyToClipboard('hello')
+    const promise = copyToClipboard('hello')
     vi.runAllTimers()
+    await promise
     expect(writeMock).toHaveBeenCalled()
   })