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>

src/utils/media.ts

@@ -1,9 +1,14 @@
+/** Base URL for uploaded files (empty = same origin /uploads via Vite proxy). */
 const assetsBase = (import.meta.env.VITE_ASSETS_URL ?? '').replace(/\/$/, '');
 
 export function uploadUrl(path: string | null | undefined): string {
   if (!path) return '';
-  if (path.startsWith('http')) return path;
-  const rel = path.startsWith('/uploads/') ? path : `/uploads/${path}`;
+  if (path.startsWith('http://') || path.startsWith('https://')) return path;
+  const rel = path.startsWith('/uploads/')
+    ? path
+    : path.startsWith('/')
+      ? path
+      : `/uploads/${path}`;
   return assetsBase ? `${assetsBase}${rel}` : rel;
 }
 

src/views/app/AppHomeView.vue

@@ -42,7 +42,7 @@
       >
         کسب‌وکاری یافت نشد.
       </div>
-      <ul v-else class="space-y-3">
+      <ul v-else class="space-y-2">
         <li v-for="b in filteredBusinesses" :key="b.id">
           <BusinessCard :business="b" />
         </li>