@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/components/FolderTree.tsx

@@ -189,9 +189,9 @@ export function FolderTree({
     return (
       <div key={folder.id}>
         <div
-          className={`group flex items-center gap-1 px-2 py-1.5 rounded-md cursor-pointer text-sm transition-colors ${
+          className={`group flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isActive
-              ? 'bg-blue-50 text-blue-700 font-medium'
+              ? 'bg-blue-50 font-medium text-blue-700'
               : isDragOver
                 ? 'bg-blue-100 ring-2 ring-blue-300'
                 : 'text-gray-700 hover:bg-gray-100'
@@ -208,23 +208,23 @@ export function FolderTree({
         >
           <button
             type="button"
-            className={`p-0.5 rounded hover:bg-gray-200 transition-colors ${hasChildren ? '' : 'invisible'}`}
+            className={`rounded p-0.5 transition-colors hover:bg-gray-200 ${hasChildren ? '' : 'invisible'}`}
             onClick={(e) => {
               e.stopPropagation()
               toggleExpand(folder.id)
             }}
           >
             {isExpanded ? (
-              <ChevronDown className="w-3.5 h-3.5" />
+              <ChevronDown className="h-3.5 w-3.5" />
             ) : (
-              <ChevronRight className="w-3.5 h-3.5" />
+              <ChevronRight className="h-3.5 w-3.5" />
             )}
           </button>
 
           {isExpanded ? (
-            <FolderOpen className="w-4 h-4 text-blue-500 shrink-0" />
+            <FolderOpen className="h-4 w-4 shrink-0 text-blue-500" />
           ) : (
-            <FolderIcon className="w-4 h-4 text-gray-400 shrink-0" />
+            <FolderIcon className="h-4 w-4 shrink-0 text-gray-400" />
           )}
 
           {editingId === folder.id ? (
@@ -238,11 +238,11 @@ export function FolderTree({
                 if (e.key === 'Enter') handleRename(folder.id)
                 if (e.key === 'Escape') setEditingId(null)
               }}
-              className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              className="min-w-0 flex-1 rounded border border-blue-300 px-1 py-0 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
               onClick={(e) => e.stopPropagation()}
             />
           ) : (
-            <span className="flex-1 min-w-0 truncate">{folder.name}</span>
+            <span className="min-w-0 flex-1 truncate">{folder.name}</span>
           )}
 
           {count !== undefined && !editingId && (
@@ -251,13 +251,13 @@ export function FolderTree({
 
           <button
             type="button"
-            className="p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-gray-200 transition-all"
+            className="rounded p-0.5 opacity-0 transition-all group-hover:opacity-100 hover:bg-gray-200"
             onClick={(e) => {
               e.stopPropagation()
               setContextMenu({ id: folder.id, x: e.clientX, y: e.clientY })
             }}
           >
-            <MoreHorizontal className="w-3.5 h-3.5 text-gray-500" />
+            <MoreHorizontal className="h-3.5 w-3.5 text-gray-500" />
           </button>
         </div>
 
@@ -269,7 +269,7 @@ export function FolderTree({
                 className="flex items-center gap-1 px-2 py-1"
                 style={{ paddingLeft: `${24 + (depth + 1) * 16}px` }}
               >
-                <FolderIcon className="w-4 h-4 text-gray-400 shrink-0" />
+                <FolderIcon className="h-4 w-4 shrink-0 text-gray-400" />
                 <input
                   ref={newFolderInputRef}
                   type="text"
@@ -284,7 +284,7 @@ export function FolderTree({
                     }
                   }}
                   placeholder="Folder name..."
-                  className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  className="min-w-0 flex-1 rounded border border-blue-300 px-1 py-0 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                 />
               </div>
             )}
@@ -297,19 +297,19 @@ export function FolderTree({
   if (loading) {
     return (
       <div className="flex items-center justify-center py-8">
-        <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
+        <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
       </div>
     )
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full flex-col">
       <div className="space-y-0.5 px-1 py-2">
         <button
           type="button"
-          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors ${
+          className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isSelected({ type: 'smart', smart: 'all' })
-              ? 'bg-blue-50 text-blue-700 font-medium'
+              ? 'bg-blue-50 font-medium text-blue-700'
               : 'text-gray-700 hover:bg-gray-100'
           }`}
           onClick={() => onSelect({ type: 'smart', smart: 'all' })}
@@ -317,7 +317,7 @@ export function FolderTree({
           onDragLeave={handleDragLeave}
           onDrop={(e) => handleDrop(e, null)}
         >
-          <LayoutGrid className="w-4 h-4 shrink-0" />
+          <LayoutGrid className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">All</span>
           {totalCount !== undefined && (
             <span className="text-xs text-gray-400 tabular-nums">{totalCount}</span>
@@ -326,14 +326,14 @@ export function FolderTree({
 
         <button
           type="button"
-          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors ${
+          className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isSelected({ type: 'smart', smart: 'recent' })
-              ? 'bg-blue-50 text-blue-700 font-medium'
+              ? 'bg-blue-50 font-medium text-blue-700'
               : 'text-gray-700 hover:bg-gray-100'
           }`}
           onClick={() => onSelect({ type: 'smart', smart: 'recent' })}
         >
-          <Clock className="w-4 h-4 shrink-0" />
+          <Clock className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">Recent</span>
           {recentCount !== undefined && (
             <span className="text-xs text-gray-400 tabular-nums">{recentCount}</span>
@@ -342,14 +342,14 @@ export function FolderTree({
 
         <button
           type="button"
-          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors ${
+          className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isSelected({ type: 'smart', smart: 'uncategorized' })
-              ? 'bg-blue-50 text-blue-700 font-medium'
+              ? 'bg-blue-50 font-medium text-blue-700'
               : 'text-gray-700 hover:bg-gray-100'
           }`}
           onClick={() => onSelect({ type: 'smart', smart: 'uncategorized' })}
         >
-          <Inbox className="w-4 h-4 shrink-0" />
+          <Inbox className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">Uncategorized</span>
           {uncategorizedCount !== undefined && (
             <span className="text-xs text-gray-400 tabular-nums">{uncategorizedCount}</span>
@@ -357,14 +357,14 @@ export function FolderTree({
         </button>
       </div>
 
-      <div className="border-t border-gray-200 my-1" />
+      <div className="my-1 border-t border-gray-200" />
 
-      <div className="flex-1 overflow-y-auto px-1 py-1 space-y-0.5">
+      <div className="flex-1 space-y-0.5 overflow-y-auto px-1 py-1">
         {folders.map((folder) => renderFolder(folder, 0))}
 
         {creatingIn === null && (
           <div className="flex items-center gap-1 px-2 py-1">
-            <FolderIcon className="w-4 h-4 text-gray-400 shrink-0 ml-5" />
+            <FolderIcon className="ml-5 h-4 w-4 shrink-0 text-gray-400" />
             <input
               ref={newFolderInputRef}
               type="text"
@@ -379,7 +379,7 @@ export function FolderTree({
                 }
               }}
               placeholder="Folder name..."
-              className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              className="min-w-0 flex-1 rounded border border-blue-300 px-1 py-0 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
             />
           </div>
         )}
@@ -392,21 +392,21 @@ export function FolderTree({
             setCreatingIn(null)
             setNewFolderName('')
           }}
-          className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-600 hover:bg-gray-100 transition-colors"
+          className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100"
         >
-          <Plus className="w-4 h-4" />
+          <Plus className="h-4 w-4" />
           New Folder
         </button>
       </div>
 
       {contextMenu && (
         <div
-          className="fixed z-50 bg-white rounded-lg border border-gray-200 shadow-lg py-1 min-w-[160px]"
+          className="fixed z-50 min-w-[160px] rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
           style={{ left: contextMenu.x, top: contextMenu.y }}
         >
           <button
             type="button"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
             onClick={() => {
               const folder = findFolder(folders, contextMenu.id)
               if (folder) {
@@ -416,12 +416,12 @@ export function FolderTree({
               setContextMenu(null)
             }}
           >
-            <Pencil className="w-3.5 h-3.5" />
+            <Pencil className="h-3.5 w-3.5" />
             Rename
           </button>
           <button
             type="button"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
             onClick={() => {
               setCreatingIn(contextMenu.id)
               setNewFolderName('')
@@ -429,19 +429,19 @@ export function FolderTree({
               setContextMenu(null)
             }}
           >
-            <FolderPlus className="w-3.5 h-3.5" />
+            <FolderPlus className="h-3.5 w-3.5" />
             New Subfolder
           </button>
-          <div className="border-t border-gray-200 my-1" />
+          <div className="my-1 border-t border-gray-200" />
           <button
             type="button"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 transition-colors"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-red-600 transition-colors hover:bg-red-50"
             onClick={() => {
               handleDelete(contextMenu.id)
               setContextMenu(null)
             }}
           >
-            <Trash2 className="w-3.5 h-3.5" />
+            <Trash2 className="h-3.5 w-3.5" />
             Delete
           </button>
         </div>

package/src/components/LivePreview.tsx

@@ -79,8 +79,8 @@ export function LivePreview({
 
   if (!previewSrc) {
     return (
-      <div className="flex flex-col items-center justify-center h-full bg-gray-50 rounded-lg border border-dashed border-gray-300 p-8">
-        <p className="text-sm text-gray-500 text-center">
+      <div className="flex h-full flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8">
+        <p className="text-center text-sm text-gray-500">
           {!documentId
             ? 'Save the document first to enable preview'
             : 'Configure a preview URL in the collection settings to enable live preview'}
@@ -93,8 +93,8 @@ export function LivePreview({
   }
 
   return (
-    <div className="flex flex-col h-full border-l border-gray-200 bg-white">
-      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50">
+    <div className="flex h-full flex-col border-l border-gray-200 bg-white">
+      <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-3 py-2">
         <div className="flex items-center gap-1">
           {(
             [
@@ -106,52 +106,52 @@ export function LivePreview({
             <button
               key={vp}
               onClick={() => setViewport(vp)}
-              className={`p-1.5 rounded ${viewport === vp ? 'bg-white shadow-sm text-blue-600' : 'text-gray-400 hover:text-gray-600'}`}
+              className={`rounded p-1.5 ${viewport === vp ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
               title={vp}
             >
-              <Icon className="w-4 h-4" />
+              <Icon className="h-4 w-4" />
             </button>
           ))}
         </div>
         <div className="flex items-center gap-1">
           <button
             onClick={handleRefresh}
-            className="p-1.5 rounded text-gray-400 hover:text-gray-600"
+            className="rounded p-1.5 text-gray-400 hover:text-gray-600"
             title="Refresh"
           >
-            <RefreshCw className="w-4 h-4" />
+            <RefreshCw className="h-4 w-4" />
           </button>
           <button
             onClick={handleOpenExternal}
-            className="p-1.5 rounded text-gray-400 hover:text-gray-600"
+            className="rounded p-1.5 text-gray-400 hover:text-gray-600"
             title="Open in new tab"
           >
-            <ExternalLink className="w-4 h-4" />
+            <ExternalLink className="h-4 w-4" />
           </button>
           <button
             onClick={onClose}
-            className="p-1.5 rounded text-gray-400 hover:text-gray-600"
+            className="rounded p-1.5 text-gray-400 hover:text-gray-600"
             title="Close"
           >
-            <X className="w-4 h-4" />
+            <X className="h-4 w-4" />
           </button>
         </div>
       </div>
 
-      <div className="flex-1 overflow-auto flex justify-center bg-gray-100 p-4">
+      <div className="flex flex-1 justify-center overflow-auto bg-gray-100 p-4">
         <div
           style={{ width: VIEWPORT_WIDTHS[viewport], maxWidth: '100%', transition: 'width 0.3s' }}
           className="relative"
         >
           {loading && (
-            <div className="absolute inset-0 flex items-center justify-center bg-white/80 z-10 rounded-lg">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+            <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-white/80">
+              <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600" />
             </div>
           )}
           <iframe
             ref={iframeRef}
             src={previewSrc}
-            className="w-full h-full bg-white rounded-lg shadow-lg border border-gray-200"
+            className="h-full w-full rounded-lg border border-gray-200 bg-white shadow-lg"
             style={{ minHeight: '600px' }}
             onLoad={() => setLoading(false)}
             title="Page Preview"

package/src/components/LocaleSwitcher.tsx

@@ -15,20 +15,20 @@ export function LocaleSwitcher() {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button
-          className="flex items-center gap-1.5 px-2 py-1.5 text-sm hover:bg-[var(--accent)] rounded-lg transition-colors"
+          className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-[var(--accent)]"
           aria-label="Switch locale"
         >
-          <Globe className="w-4 h-4 text-[var(--muted-foreground)]" />
-          <span className="hidden sm:inline text-[var(--foreground)] text-sm font-medium">
+          <Globe className="h-4 w-4 text-[var(--muted-foreground)]" />
+          <span className="hidden text-sm font-medium text-[var(--foreground)] sm:inline">
             {activeLabel}
           </span>
-          <ChevronDown className="w-3 h-3 text-[var(--muted-foreground)]" />
+          <ChevronDown className="h-3 w-3 text-[var(--muted-foreground)]" />
         </button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          className="min-w-[160px] bg-[var(--popover)] text-[var(--popover-foreground)] rounded-lg border border-[var(--border)] shadow-lg p-1 z-50"
+          className="z-50 min-w-[160px] rounded-lg border border-[var(--border)] bg-[var(--popover)] p-1 text-[var(--popover-foreground)] shadow-lg"
           align="end"
           sideOffset={5}
         >
@@ -36,10 +36,10 @@ export function LocaleSwitcher() {
             <DropdownMenu.Item
               key={locale.code}
               onSelect={() => setLocale(locale.code)}
-              className="flex items-center justify-between gap-2 px-3 py-2 text-sm hover:bg-[var(--accent)] rounded cursor-pointer outline-none"
+              className="flex cursor-pointer items-center justify-between gap-2 rounded px-3 py-2 text-sm outline-none hover:bg-[var(--accent)]"
             >
               <span>{locale.label}</span>
-              {locale.code === activeLocale && <Check className="w-4 h-4 text-[var(--primary)]" />}
+              {locale.code === activeLocale && <Check className="h-4 w-4 text-[var(--primary)]" />}
             </DropdownMenu.Item>
           ))}
         </DropdownMenu.Content>

package/src/components/MediaPickerModal.tsx

@@ -73,14 +73,14 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="fixed inset-0 bg-black/40" onClick={onClose} />
-      <div className="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col mx-4">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+      <div className="relative mx-4 flex max-h-[80vh] w-full max-w-2xl flex-col rounded-xl bg-white shadow-2xl">
+        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
           <h2 className="text-lg font-semibold text-gray-900">Insert Image</h2>
           <button
             onClick={onClose}
-            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
           >
-            <X className="w-5 h-5 text-gray-500" />
+            <X className="h-5 w-5 text-gray-500" />
           </button>
         </div>
 
@@ -89,7 +89,7 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
             onClick={() => setTab('library')}
             className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
               tab === 'library'
-                ? 'text-blue-600 border-b-2 border-blue-600'
+                ? 'border-b-2 border-blue-600 text-blue-600'
                 : 'text-gray-500 hover:text-gray-700'
             }`}
           >
@@ -99,7 +99,7 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
             onClick={() => setTab('upload')}
             className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
               tab === 'upload'
-                ? 'text-blue-600 border-b-2 border-blue-600'
+                ? 'border-b-2 border-blue-600 text-blue-600'
                 : 'text-gray-500 hover:text-gray-700'
             }`}
           >
@@ -111,37 +111,37 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
           {tab === 'library' ? (
             <>
               <div className="relative mb-4">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
                 <input
                   type="text"
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
                   placeholder="Search images..."
-                  className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 />
               </div>
 
               {loading ? (
                 <div className="flex items-center justify-center py-12">
-                  <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+                  <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
                 </div>
               ) : imageItems.length === 0 ? (
-                <div className="text-center py-12 text-sm text-gray-500">
+                <div className="py-12 text-center text-sm text-gray-500">
                   No images found. Try uploading one.
                 </div>
               ) : (
-                <div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
+                <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
                   {imageItems.map((item: MediaItem) => (
                     <button
                       key={item.id}
                       onClick={() => handleSelectItem(item)}
-                      className="group relative aspect-square rounded-lg border-2 border-gray-200 hover:border-blue-500 overflow-hidden bg-gray-100 transition-colors"
+                      className="group relative aspect-square overflow-hidden rounded-lg border-2 border-gray-200 bg-gray-100 transition-colors hover:border-blue-500"
                     >
-                      <div className="w-full h-full flex items-center justify-center">
-                        <ImageIcon className="w-8 h-8 text-gray-300" />
+                      <div className="flex h-full w-full items-center justify-center">
+                        <ImageIcon className="h-8 w-8 text-gray-300" />
                       </div>
-                      <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <p className="text-white text-xs truncate">{item.filename}</p>
+                      <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+                        <p className="truncate text-xs text-white">{item.filename}</p>
                       </div>
                     </button>
                   ))}
@@ -157,20 +157,20 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
                 className="hidden"
                 onChange={(e) => handleUpload(e.target.files)}
               />
-              <div className="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mb-4">
+              <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-50">
                 {uploading ? (
-                  <Loader2 className="w-8 h-8 text-blue-600 animate-spin" />
+                  <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
                 ) : (
-                  <Upload className="w-8 h-8 text-blue-600" />
+                  <Upload className="h-8 w-8 text-blue-600" />
                 )}
               </div>
-              <p className="text-sm text-gray-600 mb-4">
+              <p className="mb-4 text-sm text-gray-600">
                 {uploading ? 'Uploading...' : 'Select an image file to upload'}
               </p>
               {!uploading && (
                 <button
                   onClick={() => fileInputRef.current?.click()}
-                  className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                  className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
                 >
                   Choose File
                 </button>

package/src/components/PresenceIndicator.tsx

@@ -57,7 +57,7 @@ export function PresenceIndicator({ documentId, currentUserId }: PresenceIndicat
       {users.slice(0, 5).map((user, i) => (
         <div
           key={user.userId}
-          className="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-medium ring-2 ring-white"
+          className="flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium text-white ring-2 ring-white"
           style={{ backgroundColor: COLORS[i % COLORS.length] }}
           title={user.name}
         >
@@ -65,7 +65,7 @@ export function PresenceIndicator({ documentId, currentUserId }: PresenceIndicat
         </div>
       ))}
       {users.length > 5 && (
-        <div className="w-7 h-7 rounded-full flex items-center justify-center bg-muted text-muted-foreground text-xs font-medium ring-2 ring-white">
+        <div className="bg-muted text-muted-foreground flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium ring-2 ring-white">
           +{users.length - 5}
         </div>
       )}