From 536a1b4c097ad213218075b70cea4e4fb6b7cea4 Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Tue, 4 Aug 2026 06:54:43 +0200
Subject: [PATCH] release asset mobile view

---
 .../src/page/catalog/CatalogShowPage.vue      | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/page/catalog/CatalogShowPage.vue b/apps/frontend/src/page/catalog/CatalogShowPage.vue
index c0ff3ba..8de04f7 100644
--- a/apps/frontend/src/page/catalog/CatalogShowPage.vue
+++ b/apps/frontend/src/page/catalog/CatalogShowPage.vue
@@ -97,7 +97,8 @@
 
             <div v-if="tableAssets(latestStable).length" class="mt-6 pt-6 border-t border-white/15">
               <div class="text-[10px] font-black uppercase tracking-widest text-indigo-200 mb-3">{{ t('catalogShow.assetsTitle') }}</div>
-              <table class="w-full text-sm">
+              <!-- Desktop asset table -->
+              <table class="hidden md:table w-full text-sm">
                 <tbody>
                   <tr v-for="asset in tableAssets(latestStable)" :key="asset.kind" class="border-b border-white/10 last:border-0">
                     <td class="py-1.5 pr-6 text-indigo-100 whitespace-nowrap"><i :class="assetKindIcon(asset.kind)" class="w-4 text-center"></i> {{ t('catalogShow.assetKind.' + asset.kind) }}</td>
@@ -109,6 +110,17 @@
                   </tr>
                 </tbody>
               </table>
+              <!-- Mobile asset list -->
+              <div class="md:hidden space-y-2">
+                <div v-for="asset in tableAssets(latestStable)" :key="asset.kind" class="flex flex-col gap-0.5 py-2 border-b border-white/10 last:border-0">
+                  <div class="flex justify-between items-center">
+                    <span class="text-indigo-100 text-sm whitespace-nowrap"><i :class="assetKindIcon(asset.kind)" class="w-4 text-center"></i> {{ t('catalogShow.assetKind.' + asset.kind) }}</span>
+                    <a v-if="asset.kind === 'docs'" :href="asset.path" target="_blank" class="text-white font-bold text-sm hover:underline ml-4 shrink-0">{{ t('catalogShow.assetOpen') }}</a>
+                    <a v-else :href="downloadUrl(asset.path)" class="text-white font-bold text-sm hover:underline ml-4 shrink-0">{{ t('catalogShow.assetDownload') }}</a>
+                  </div>
+                  <div class="font-mono text-xs text-indigo-200/80 truncate">{{ assetFileName(asset.path) }}</div>
+                </div>
+              </div>
             </div>
           </div>
 
@@ -204,18 +216,16 @@
                     <span v-if="release.version.startsWith('dev-')" class="px-2 py-0.5 bg-yellow-100 text-yellow-800 text-[10px] font-black uppercase rounded">Dev</span>
                   </div>
                   <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="flex items-center justify-center py-2 bg-purple-100 text-purple-700 font-bold rounded-lg text-sm">{{ t('catalogShow.play') }}</a>
-                  <table v-if="tableAssets(release).length" class="mt-3 w-full text-sm">
-                    <tbody>
-                      <tr v-for="asset in tableAssets(release)" :key="asset.kind" class="border-b border-gray-100 last:border-0">
-                        <td class="py-1.5 pr-4 text-gray-500 whitespace-nowrap align-top"><i :class="assetKindIcon(asset.kind)" class="w-4 text-center"></i> {{ t('catalogShow.assetKind.' + asset.kind) }}</td>
-                        <td class="py-1.5 pr-4 w-full font-mono text-xs text-gray-400 break-all align-top">{{ assetFileName(asset.path) }}</td>
-                        <td class="py-1.5 text-right whitespace-nowrap align-top">
-                          <a v-if="asset.kind === 'docs'" :href="asset.path" target="_blank" class="text-blue-600 font-bold">{{ t('catalogShow.assetOpen') }}</a>
-                          <a v-else :href="downloadUrl(asset.path)" class="text-blue-600 font-bold">{{ t('catalogShow.assetDownload') }}</a>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
+                  <div v-if="tableAssets(release).length" class="mt-3 space-y-1">
+                    <div v-for="asset in tableAssets(release)" :key="asset.kind" class="flex flex-col gap-0.5 py-1.5 border-b border-gray-100 last:border-0">
+                      <div class="flex justify-between items-center">
+                        <span class="text-gray-500 text-sm whitespace-nowrap"><i :class="assetKindIcon(asset.kind)" class="w-4 text-center"></i> {{ t('catalogShow.assetKind.' + asset.kind) }}</span>
+                        <a v-if="asset.kind === 'docs'" :href="asset.path" target="_blank" class="text-blue-600 font-bold text-sm ml-4 shrink-0">{{ t('catalogShow.assetOpen') }}</a>
+                        <a v-else :href="downloadUrl(asset.path)" class="text-blue-600 font-bold text-sm ml-4 shrink-0">{{ t('catalogShow.assetDownload') }}</a>
+                      </div>
+                      <div class="font-mono text-xs text-gray-400 truncate">{{ assetFileName(asset.path) }}</div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>