video preview version

client/src/components/PostCard.jsx

@@ -1,9 +1,10 @@
 import { format } from 'date-fns'
 import { ArrowRight } from 'lucide-react'
+import { getInitials } from '../utils/api'
 import { useLanguage } from '../i18n/LanguageContext'
 import BrandBadge from './BrandBadge'
 import StatusBadge from './StatusBadge'
-import PlatformIcon, { PlatformIcons } from './PlatformIcon'
+import { PlatformIcons } from './PlatformIcon'
 
 export default function PostCard({ post, onClick, onMove, compact = false }) {
   const { t } = useLanguage()
@@ -12,21 +13,16 @@ export default function PostCard({ post, onClick, onMove, compact = false }) {
     ? post.platforms
     : (post.platform ? [post.platform] : [])
 
-  const getInitials = (name) => {
-    if (!name) return '?'
-    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
-  }
-
   const assigneeName = post.assignedToName || post.assignedName || post.assigned_name || (typeof post.assignedTo === 'object' ? post.assignedTo?.name : null)
 
   if (compact) {
     return (
       <div
         onClick={onClick}
-        className="bg-white rounded-lg p-3 border border-border hover:border-brand-primary/30 hover:shadow-md cursor-pointer transition-all group"
+        className="bg-white rounded-lg p-3 border border-border hover:border-brand-primary/30 hover:shadow-md cursor-pointer transition-all group overflow-hidden"
       >
         {post.thumbnail_url && (
-          <div className="w-full h-32 -mx-3 -mt-3 mb-2 rounded-t-lg overflow-hidden">
+          <div className="w-[calc(100%+1.5rem)] h-32 -mx-3 -mt-3 mb-2 rounded-t-lg overflow-hidden">
             <img src={`http://localhost:3001${post.thumbnail_url}`} alt="" className="w-full h-full object-cover" />
           </div>
         )}