@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/views/ApiKeys.tsx

@@ -93,43 +93,43 @@ export function ApiKeys(_props: ApiKeysProps) {
 
   if (loading) {
     return (
-      <div className="p-4 sm:p-6 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-4 sm:p-6">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
     <div className="p-4 sm:p-6">
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
+      <div className="mb-6 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
         <div>
-          <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 flex items-center gap-2">
-            <KeyRound className="w-5 h-5 text-gray-500" />
+          <h1 className="flex items-center gap-2 text-xl font-semibold text-gray-900 sm:text-2xl">
+            <KeyRound className="h-5 w-5 text-gray-500" />
             API Keys
           </h1>
-          <p className="text-sm text-gray-500 mt-1">
+          <p className="mt-1 text-sm text-gray-500">
             Long-lived credentials for programmatic access. Use the{' '}
-            <code className="px-1 py-0.5 rounded bg-gray-100 text-xs">Authorization: Bearer</code>{' '}
+            <code className="rounded bg-gray-100 px-1 py-0.5 text-xs">Authorization: Bearer</code>{' '}
             header instead of session cookies. API key requests skip CSRF.
           </p>
         </div>
         <button
           type="button"
           onClick={() => setShowCreate(true)}
-          className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+          className="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
         >
-          <Plus className="w-4 h-4" />
+          <Plus className="h-4 w-4" />
           New API Key
         </button>
       </div>
 
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
           <button
             onClick={refetch}
-            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
@@ -137,26 +137,26 @@ export function ApiKeys(_props: ApiKeysProps) {
       )}
 
       {keys.length === 0 ? (
-        <div className="bg-white rounded-lg border border-gray-200 p-10 text-center">
-          <KeyRound className="w-8 h-8 text-gray-300 mx-auto mb-3" />
-          <p className="text-sm text-gray-500 mb-1">No API keys yet</p>
-          <p className="text-xs text-gray-400 mb-4">
+        <div className="rounded-lg border border-gray-200 bg-white p-10 text-center">
+          <KeyRound className="mx-auto mb-3 h-8 w-8 text-gray-300" />
+          <p className="mb-1 text-sm text-gray-500">No API keys yet</p>
+          <p className="mb-4 text-xs text-gray-400">
             Create one to let AI agents, CI jobs, or external integrations call the CMS API.
           </p>
           <button
             type="button"
             onClick={() => setShowCreate(true)}
-            className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+            className="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
           >
-            <Plus className="w-4 h-4" />
+            <Plus className="h-4 w-4" />
             Create your first API key
           </button>
         </div>
       ) : (
-        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+        <div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
           <div className="overflow-x-auto">
             <table className="w-full">
-              <thead className="bg-gray-50 border-b border-gray-200">
+              <thead className="border-b border-gray-200 bg-gray-50">
                 <tr>
                   <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Name</th>
                   <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Token</th>
@@ -183,8 +183,8 @@ export function ApiKeys(_props: ApiKeysProps) {
                           </div>
                         )}
                       </td>
-                      <td className="px-4 py-3 text-sm font-mono text-gray-700">{k.keyPrefix}…</td>
-                      <td className="px-4 py-3 text-sm text-gray-700 max-w-xs">
+                      <td className="px-4 py-3 font-mono text-sm text-gray-700">{k.keyPrefix}…</td>
+                      <td className="max-w-xs px-4 py-3 text-sm text-gray-700">
                         {formatScopes(k.scopes)}
                       </td>
                       <td className="px-4 py-3 text-sm text-gray-600">
@@ -193,15 +193,15 @@ export function ApiKeys(_props: ApiKeysProps) {
                       <td className="px-4 py-3 text-sm text-gray-600">{formatDate(k.expiresAt)}</td>
                       <td className="px-4 py-3">
                         {revoked ? (
-                          <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
+                          <span className="inline-flex rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">
                             Revoked
                           </span>
                         ) : expired ? (
-                          <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
+                          <span className="inline-flex rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">
                             Expired
                           </span>
                         ) : (
-                          <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
+                          <span className="inline-flex rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
                             Active
                           </span>
                         )}
@@ -211,10 +211,10 @@ export function ApiKeys(_props: ApiKeysProps) {
                           <button
                             type="button"
                             onClick={() => handleRevoke(k.id, k.name)}
-                            className="p-1.5 hover:bg-red-50 rounded transition-colors"
+                            className="rounded p-1.5 transition-colors hover:bg-red-50"
                             title="Revoke"
                           >
-                            <Trash2 className="w-4 h-4 text-red-600" />
+                            <Trash2 className="h-4 w-4 text-red-600" />
                           </button>
                         )}
                       </td>
@@ -320,35 +320,35 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
   return (
     <Dialog.Root open={open} onOpenChange={(o) => !o && onClose()}>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/40 z-40" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl w-full max-w-md p-6 z-50">
-          <Dialog.Title className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
-            <Shield className="w-5 h-5 text-blue-600" />
+        <Dialog.Overlay className="fixed inset-0 z-40 bg-black/40" />
+        <Dialog.Content className="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl">
+          <Dialog.Title className="mb-4 flex items-center gap-2 text-lg font-semibold text-gray-900">
+            <Shield className="h-5 w-5 text-blue-600" />
             New API Key
           </Dialog.Title>
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <label className="text-sm font-medium text-gray-700 block mb-1">Name</label>
+              <label className="mb-1 block text-sm font-medium text-gray-700">Name</label>
               <input
                 type="text"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 placeholder="e.g. AI agent — production"
-                className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 required
                 maxLength={100}
               />
             </div>
 
             <div>
-              <label className="text-sm font-medium text-gray-700 block mb-2">Preset</label>
+              <label className="mb-2 block text-sm font-medium text-gray-700">Preset</label>
               <div className="grid grid-cols-2 gap-2">
                 {(['content', 'readonly', 'admin', 'custom'] as const).map((p) => (
                   <button
                     key={p}
                     type="button"
                     onClick={() => setPreset(p)}
-                    className={`px-3 py-2 text-sm rounded-lg border transition-colors text-left ${
+                    className={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${
                       preset === p
                         ? 'border-blue-500 bg-blue-50 text-blue-900'
                         : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
@@ -367,7 +367,7 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
             </div>
 
             {(preset === 'content' || preset === 'custom') && (
-              <div className="space-y-2 rounded-lg border border-gray-200 p-3 bg-gray-50">
+              <div className="space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
                 <label className="flex items-center gap-2 text-sm text-gray-700">
                   <input
                     type="checkbox"
@@ -390,7 +390,7 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
             )}
 
             <div>
-              <label className="text-sm font-medium text-gray-700 block mb-1">
+              <label className="mb-1 block text-sm font-medium text-gray-700">
                 Expires in (days)
               </label>
               <input
@@ -399,22 +399,22 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
                 placeholder="Never (leave blank)"
                 value={expiresInDays}
                 onChange={(e) => setExpiresInDays(e.target.value)}
-                className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
               />
             </div>
 
             <div>
-              <label className="text-sm font-medium text-gray-700 block mb-1">
+              <label className="mb-1 block text-sm font-medium text-gray-700">
                 Confirm password
               </label>
               <input
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 required
               />
-              <p className="text-xs text-gray-500 mt-1">
+              <p className="mt-1 text-xs text-gray-500">
                 Creating an API key is a sensitive action and requires re-authentication.
               </p>
             </div>
@@ -423,14 +423,14 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
               <button
                 type="button"
                 onClick={onClose}
-                className="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                className="rounded-lg border border-gray-300 px-4 py-2 text-sm transition-colors hover:bg-gray-50"
               >
                 Cancel
               </button>
               <button
                 type="submit"
                 disabled={submitting}
-                className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+                className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
               >
                 {submitting ? 'Creating…' : 'Create key'}
               </button>
@@ -453,35 +453,35 @@ function RevealKeyDialog({
   return (
     <Dialog.Root open onOpenChange={(o) => !o && onClose()}>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/40 z-40" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl w-full max-w-md p-6 z-50">
-          <Dialog.Title className="text-lg font-semibold text-gray-900 mb-2 flex items-center gap-2">
-            <Shield className="w-5 h-5 text-green-600" />
+        <Dialog.Overlay className="fixed inset-0 z-40 bg-black/40" />
+        <Dialog.Content className="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl">
+          <Dialog.Title className="mb-2 flex items-center gap-2 text-lg font-semibold text-gray-900">
+            <Shield className="h-5 w-5 text-green-600" />
             API key created
           </Dialog.Title>
-          <Dialog.Description className="text-sm text-gray-600 mb-4">
+          <Dialog.Description className="mb-4 text-sm text-gray-600">
             Copy this key now — it will not be shown again. Treat it like a password.
           </Dialog.Description>
 
-          <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 mb-4 flex items-start gap-2">
-            <AlertTriangle className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
+          <div className="mb-4 flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
             <p className="text-xs text-amber-900">
               We only store a hash of this key. If you lose it, you&apos;ll need to revoke and
               create a new one.
             </p>
           </div>
 
-          <div className="flex items-center gap-2 mb-4">
-            <code className="flex-1 px-3 py-2 bg-gray-100 rounded text-sm font-mono break-all">
+          <div className="mb-4 flex items-center gap-2">
+            <code className="flex-1 rounded bg-gray-100 px-3 py-2 font-mono text-sm break-all">
               {shown ? created.key : '•'.repeat(Math.min(48, created.key.length))}
             </code>
             <button
               type="button"
               onClick={() => setShown((s) => !s)}
-              className="p-2 border border-gray-300 rounded hover:bg-gray-50"
+              className="rounded border border-gray-300 p-2 hover:bg-gray-50"
               title={shown ? 'Hide' : 'Show'}
             >
-              {shown ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              {shown ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
             </button>
             <button
               type="button"
@@ -489,10 +489,10 @@ function RevealKeyDialog({
                 navigator.clipboard.writeText(created.key)
                 toast.success('Copied to clipboard')
               }}
-              className="p-2 border border-gray-300 rounded hover:bg-gray-50"
+              className="rounded border border-gray-300 p-2 hover:bg-gray-50"
               title="Copy"
             >
-              <Copy className="w-4 h-4" />
+              <Copy className="h-4 w-4" />
             </button>
           </div>
 
@@ -500,7 +500,7 @@ function RevealKeyDialog({
             <button
               type="button"
               onClick={onClose}
-              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"
             >
               I&apos;ve saved it
             </button>

package/src/views/CollectionList.tsx

@@ -155,7 +155,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
     <button
       type="button"
       onClick={() => toggleSort(field)}
-      className="flex items-center gap-1 text-xs font-medium hover:opacity-80 transition-opacity"
+      className="flex items-center gap-1 text-xs font-medium transition-opacity hover:opacity-80"
       style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
     >
       {children}
@@ -165,9 +165,9 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
 
   if (loading && docs.length === 0) {
     return (
-      <div className="p-4 flex items-center justify-center h-64">
+      <div className="flex h-64 items-center justify-center p-4">
         <Loader2
-          className="w-6 h-6 animate-spin"
+          className="h-6 w-6 animate-spin"
           style={{ color: 'var(--actuate-primary, #2563eb)' }}
         />
       </div>
@@ -175,12 +175,12 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+    <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
       {/* Header */}
-      <div className="flex items-center justify-between mb-4 gap-3 flex-wrap">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
         <div>
           <h1
-            className="text-xl sm:text-2xl font-semibold"
+            className="text-xl font-semibold sm:text-2xl"
             style={{ color: 'var(--actuate-text, #111827)' }}
           >
             {labels.plural}
@@ -191,17 +191,17 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
         </div>
         <button
           onClick={() => onNavigate(`/${collectionSlug}/new`)}
-          className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors"
+          className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors"
           style={{ background: 'var(--actuate-primary, #2563eb)' }}
         >
-          <Plus className="w-4 h-4" /> New {labels.singular}
+          <Plus className="h-4 w-4" /> New {labels.singular}
         </button>
       </div>
 
       {/* Search */}
       <div className="relative mb-4">
         <Search
-          className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4"
+          className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
           style={{ color: 'var(--actuate-text-muted, #9ca3af)' }}
         />
         <input
@@ -209,7 +209,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
           placeholder={`Search ${labels.plural.toLowerCase()}...`}
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          className="w-full pl-9 pr-3 py-2 text-sm rounded-lg border focus:outline-none focus:ring-2"
+          className="w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
           style={{
             borderColor: 'var(--actuate-border, #d1d5db)',
             color: 'var(--actuate-text, #111827)',
@@ -220,7 +220,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
       {/* Bulk actions */}
       {selected.size > 0 && (
         <div
-          className="rounded-lg p-3 mb-4 flex flex-wrap items-center justify-between gap-2"
+          className="mb-4 flex flex-wrap items-center justify-between gap-2 rounded-lg p-3"
           style={{
             background: 'var(--actuate-info-bg, #eff6ff)',
             borderColor: 'var(--actuate-info-border, #bfdbfe)',
@@ -234,24 +234,24 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
           <div className="flex gap-2">
             <button
               onClick={() => bulkAction('publish')}
-              className="px-3 py-1.5 text-sm text-white rounded-lg"
+              className="rounded-lg px-3 py-1.5 text-sm text-white"
               style={{ background: 'var(--actuate-success, #16a34a)' }}
             >
               Publish
             </button>
             <button
               onClick={() => bulkAction('unpublish')}
-              className="px-3 py-1.5 text-sm text-white rounded-lg"
+              className="rounded-lg px-3 py-1.5 text-sm text-white"
               style={{ background: 'var(--actuate-warning, #ca8a04)' }}
             >
               Unpublish
             </button>
             <button
               onClick={() => bulkAction('delete')}
-              className="px-3 py-1.5 text-sm text-white rounded-lg"
+              className="rounded-lg px-3 py-1.5 text-sm text-white"
               style={{ background: 'var(--actuate-danger, #dc2626)' }}
             >
-              <Trash2 className="w-3.5 h-3.5 inline -mt-0.5 mr-1" />
+              <Trash2 className="-mt-0.5 mr-1 inline h-3.5 w-3.5" />
               Delete
             </button>
           </div>
@@ -260,7 +260,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
 
       {error && (
         <div
-          className="rounded-lg p-3 mb-4 text-sm"
+          className="mb-4 rounded-lg p-3 text-sm"
           style={{
             background: 'var(--actuate-danger-bg, #fef2f2)',
             color: 'var(--actuate-danger-text, #991b1b)',
@@ -276,17 +276,17 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
       {/* Table */}
       {docs.length === 0 && !loading ? (
         <div
-          className="flex-1 flex flex-col items-center justify-center rounded-lg border p-8"
+          className="flex flex-1 flex-col items-center justify-center rounded-lg border p-8"
           style={{
             borderColor: 'var(--actuate-border, #d1d5db)',
             color: 'var(--actuate-text-secondary, #6b7280)',
           }}
         >
-          <FileText className="w-10 h-10 mb-3 opacity-40" />
-          <p className="text-sm mb-3">No {labels.plural.toLowerCase()} found</p>
+          <FileText className="mb-3 h-10 w-10 opacity-40" />
+          <p className="mb-3 text-sm">No {labels.plural.toLowerCase()} found</p>
           <button
             onClick={() => onNavigate(`/${collectionSlug}/new`)}
-            className="px-4 py-2 text-sm text-white rounded-lg"
+            className="rounded-lg px-4 py-2 text-sm text-white"
             style={{ background: 'var(--actuate-primary, #2563eb)' }}
           >
             Create {labels.singular}
@@ -294,7 +294,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
         </div>
       ) : (
         <div
-          className="flex-1 rounded-lg border overflow-auto"
+          className="flex-1 overflow-auto rounded-lg border"
           style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}
         >
           <table className="w-full text-sm">
@@ -350,7 +350,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                     <button
                       type="button"
                       onClick={() => onNavigate(`/${collectionSlug}/${doc.id}`)}
-                      className="font-medium text-left hover:underline"
+                      className="text-left font-medium hover:underline"
                       style={{ color: 'var(--actuate-text, #111827)' }}
                     >
                       {doc.title || doc.name || `#${doc.id}`}
@@ -358,7 +358,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                   </td>
                   <td className="px-3 py-2">
                     <span
-                      className="inline-block px-2 py-0.5 rounded-full text-xs font-medium"
+                      className="inline-block rounded-full px-2 py-0.5 text-xs font-medium"
                       style={{ background: statusColor(doc.status), color: statusText(doc.status) }}
                     >
                       {doc.status ?? 'DRAFT'}
@@ -374,11 +374,11 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                     <button
                       type="button"
                       onClick={() => onNavigate(`/${collectionSlug}/${doc.id}`)}
-                      className="p-1.5 rounded hover:opacity-75 transition-opacity"
+                      className="rounded p-1.5 transition-opacity hover:opacity-75"
                       title="Edit"
                     >
                       <MoreHorizontal
-                        className="w-4 h-4"
+                        className="h-4 w-4"
                         style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
                       />
                     </button>
@@ -393,7 +393,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
       {/* Pagination */}
       {totalPages > 1 && (
         <div
-          className="flex items-center justify-between mt-4 text-sm"
+          className="mt-4 flex items-center justify-between text-sm"
           style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
         >
           <span>
@@ -403,18 +403,18 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
             <button
               disabled={page <= 1}
               onClick={() => setPage((p) => p - 1)}
-              className="flex items-center gap-1 px-3 py-1.5 rounded-lg border disabled:opacity-40 transition-opacity"
+              className="flex items-center gap-1 rounded-lg border px-3 py-1.5 transition-opacity disabled:opacity-40"
               style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}
             >
-              <ChevronLeft className="w-4 h-4" /> Previous
+              <ChevronLeft className="h-4 w-4" /> Previous
             </button>
             <button
               disabled={page >= totalPages}
               onClick={() => setPage((p) => p + 1)}
-              className="flex items-center gap-1 px-3 py-1.5 rounded-lg border disabled:opacity-40 transition-opacity"
+              className="flex items-center gap-1 rounded-lg border px-3 py-1.5 transition-opacity disabled:opacity-40"
               style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}
             >
-              Next <ChevronRight className="w-4 h-4" />
+              Next <ChevronRight className="h-4 w-4" />
             </button>
           </div>
         </div>