From bbf59a571447ab31231b286561236b8c770279f7 Mon Sep 17 00:00:00 2001
From: harlan <harlan@harlanzw.com>
Date: Wed, 16 Oct 2024 11:52:39 +1100
Subject: [PATCH] fix: fallback to full width screenshot for non-performance
 scans

Fixes #245
---
 .../client/components/Cell/CellRouteName.vue  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/client/components/Cell/CellRouteName.vue b/packages/client/components/Cell/CellRouteName.vue
index 7a76ce2d..bdfb3b95 100644
--- a/packages/client/components/Cell/CellRouteName.vue
+++ b/packages/client/components/Cell/CellRouteName.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { UnlighthouseColumn, UnlighthouseRouteReport } from '@unlighthouse/core'
-import { apiUrl, device, iframeModalUrl, isModalOpen, isOffline } from '../../logic'
+import { apiUrl, categories, device, iframeModalUrl, isModalOpen, isOffline } from '../../logic'
 
 const props = defineProps<{
   report: UnlighthouseRouteReport
@@ -35,13 +35,26 @@ const fetchTime = computed(() => {
     timeStyle: 'short',
   }).format(date)
 })
+
+const thumbnail = computed(() => {
+  const mobileProps = device === 'mobile' ? { class: 'w-68px h-112px' } : { class: 'h-82px w-112px' }
+  if (categories.includes('performance')) {
+    return {
+      src: `${props.report.artifactUrl}/screenshot.jpeg`,
+      ...mobileProps,
+    }
+  }
+  return {
+    src: `${props.report.artifactUrl}/full-screenshot.jpeg`,
+    ...mobileProps,
+  }
+})
 </script>
 
 <template>
   <div class="text-xs flex items-center w-full">
     <btn-action v-if="report.tasks.runLighthouseTask === 'completed'" class="hidden md:block" :style="{ flex: `0 0 ${device === 'mobile' ? '67' : '112'}px` }" title="Open Full Page Screenshot" @click="openModal()">
-      <img v-if="device === 'mobile'" :src="`${report.artifactUrl}/screenshot.jpeg`" loading="lazy" height="112" width="68" class="w-68px h-112px">
-      <img v-else :src="`${report.artifactUrl}/screenshot.jpeg`" loading="lazy" height="82" width="112" class="h-82px w-112px">
+      <img v-bind="thumbnail" loading="lazy" height="82" width="112">
     </btn-action>
     <div class="md:ml-3 flex-grow w-full">
       <a v-if="report.seo?.title" :href="report.route.url" target="_blank" class="text-xs dark:(opacity-80) underline hover:no-underline">