Compact business cards and fix production image URLs

src/components/business/BusinessCard.vue

@@ -1,9 +1,29 @@
 <template>
   <RouterLink
     :to="{ name: 'app-business-detail', params: { id: business.id } }"
-    class="block overflow-hidden rounded-2xl border border-border bg-surface-2 transition hover:border-brand-500/40 hover:shadow-md"
+    class="flex items-center gap-3 rounded-xl border border-border bg-surface-2 p-2.5 transition hover:border-brand-500/40 hover:shadow-sm"
   >
-    <div class="relative aspect-[16/10] bg-surface-3">
+    <div class="min-w-0 flex-1">
+      <div class="flex items-start justify-between gap-2">
+        <h2 class="truncate text-sm font-semibold text-text">{{ business.title }}</h2>
+        <span
+          v-if="business.category"
+          class="shrink-0 rounded-lg bg-brand-500/10 px-1.5 py-0.5 text-[10px] text-brand-700 dark:text-brand-500"
+        >
+          {{ business.category.title }}
+        </span>
+      </div>
+      <p v-if="business.description" class="mt-0.5 truncate text-xs text-muted">
+        {{ business.description }}
+      </p>
+      <p v-if="business.address" class="mt-0.5 truncate text-xs text-muted">
+        📍 {{ business.address }}
+      </p>
+    </div>
+
+    <div
+      class="relative h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-surface-3 sm:h-16 sm:w-16"
+    >
       <img
         v-if="cover"
         :src="cover"
@@ -11,24 +31,12 @@
         class="h-full w-full object-cover"
         loading="lazy"
       />
-      <div v-else class="flex h-full items-center justify-center text-3xl text-muted/40">🏪</div>
-    </div>
-    <div class="p-4">
-    <div class="flex items-start justify-between gap-2">
-      <h2 class="font-semibold text-text">{{ business.title }}</h2>
-      <span
-        v-if="business.category"
-        class="shrink-0 rounded-lg bg-brand-500/10 px-2 py-0.5 text-xs text-brand-700 dark:text-brand-500"
+      <div
+        v-else
+        class="flex h-full w-full items-center justify-center text-xl text-muted/50"
       >
-        {{ business.category.title }}
-      </span>
-    </div>
-    <p v-if="business.description" class="mt-2 line-clamp-2 text-sm text-muted">
-      {{ business.description }}
-    </p>
-    <p v-if="business.address" class="mt-2 text-xs text-muted">
-      📍 {{ business.address }}
-    </p>
+        🏪
+      </div>
     </div>
   </RouterLink>
 </template>