[iris] Switch jobs view mobile/desktop with v-if instead of CSS

The CSS `sm:hidden` / `hidden sm:block` approach kept both variants in the
DOM, which made the e2e smoke tests fail: Playwright's
`page.locator("text=smoke-simple").first` was matching the hidden mobile
card link, then `to_be_visible()` failed because that link is `display:
none` at desktop widths.

Render only one variant at a time, picked via a reactive viewport-width
ref. Adds a minimal `useMediaQuery` composable. CI runs at desktop width
and now sees only the desktop table.

Author: ravwojdyla

lib/iris/dashboard/src/components/controller/JobDetail.vue

@@ -17,6 +17,11 @@ import InfoCard from '@/components/shared/InfoCard.vue'
 import InfoRow from '@/components/shared/InfoRow.vue'
 import EmptyState from '@/components/shared/EmptyState.vue'
 import LogViewer from '@/components/shared/LogViewer.vue'
+import { useMediaQuery } from '@/composables/useMediaQuery'
+
+// Tailwind's `sm` breakpoint is 640px. Cards on mobile, table on desktop.
+// v-if-switched (not CSS-hidden) so only one variant is in the DOM.
+const isMobile = useMediaQuery('(max-width: 639px)')
 
 const props = defineProps<{
   jobId: string
@@ -836,7 +841,7 @@ async function handleProfile(taskId: string, profilerType: string, format: strin
           </h3>
         </div>
         <!-- Mobile: card grid (one card per child job) -->
-        <div class="sm:hidden grid grid-cols-1 gap-2">
+        <div v-if="isMobile" class="grid grid-cols-1 gap-2">
           <div
             v-for="node in flattenedChildJobs"
             :key="'child-card-' + node.job.jobId"
@@ -888,7 +893,7 @@ async function handleProfile(taskId: string, profilerType: string, format: strin
         </div>
 
         <!-- Desktop: table -->
-        <div class="hidden sm:block overflow-x-auto">
+        <div v-else class="overflow-x-auto">
         <table class="w-full border-collapse">
           <thead>
             <tr class="border-b border-surface-border">
@@ -993,7 +998,7 @@ async function handleProfile(taskId: string, profilerType: string, format: strin
 
       <template v-else>
       <!-- Mobile: card grid (one card per task) -->
-      <div class="sm:hidden grid grid-cols-1 gap-2">
+      <div v-if="isMobile" class="grid grid-cols-1 gap-2">
         <div
           v-for="task in paginatedTasks"
           :key="'task-card-' + task.taskId"
@@ -1056,7 +1061,7 @@ async function handleProfile(taskId: string, profilerType: string, format: strin
       </div>
 
       <!-- Desktop: table -->
-      <div class="hidden sm:block overflow-x-auto">
+      <div v-else class="overflow-x-auto">
         <table class="w-full border-collapse md:table-fixed">
           <colgroup class="hidden md:table-column-group">
             <col class="w-[4%]" />

lib/iris/dashboard/src/components/controller/JobsTab.vue

@@ -10,6 +10,13 @@ import { timestampMs, formatDuration, formatRelativeTime } from '@/utils/formatt
 import { flattenLoadedJobTree, getLeafJobName } from '@/utils/jobTree'
 import StatusBadge from '@/components/shared/StatusBadge.vue'
 import EmptyState from '@/components/shared/EmptyState.vue'
+import { useMediaQuery } from '@/composables/useMediaQuery'
+
+// Tailwind's `sm` breakpoint is 640px. Below that we render mobile cards;
+// at/above we render the desktop table. Switched via v-if so only one
+// variant is in the DOM at a time (otherwise duplicate text trips Playwright
+// locator's `.first` matcher in CI).
+const isMobile = useMediaQuery('(max-width: 639px)')
 
 const PAGE_SIZE = 50
 
@@ -550,12 +557,12 @@ function sortIndicator(field: SortField): string {
       : (hasActiveFilter ? 'No jobs matching filter' : 'No jobs')"
   />
 
-  <!-- Mobile/desktop split: cards on xs, table on sm+. Pagination is shared. -->
+  <!-- Mobile/desktop split: cards on xs, table on sm+. Pagination is shared.
+       Switched via v-if (not CSS) so only one variant renders, keeping the DOM
+       free of duplicate text-content that confuses Playwright `.first` matchers. -->
   <template v-else>
-  <!-- Mobile: stacked card-grid (one card per job).
-       Tables don't fit on phones once you have a status badge + progress bar +
-       a job-name column, so on xs we render a vertical grid of cards instead. -->
-  <div class="sm:hidden grid grid-cols-1 gap-2">
+  <!-- Mobile: stacked card-grid (one card per job). -->
+  <div v-if="isMobile" class="grid grid-cols-1 gap-2">
     <div
       v-for="node in flattenedJobs"
       :key="'card-' + node.job.jobId"
@@ -637,7 +644,7 @@ function sortIndicator(field: SortField): string {
   </div>
 
   <!-- Desktop: tabular layout (sm+) -->
-  <div class="hidden sm:block overflow-x-auto">
+  <div v-else class="overflow-x-auto">
     <table class="w-full border-collapse">
       <thead>
         <tr class="border-b border-surface-border">

lib/iris/dashboard/src/composables/useMediaQuery.ts

@@ -0,0 +1,27 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+/**
+ * Reactive boolean tied to a CSS media query. The returned ref updates as the
+ * viewport crosses the query threshold (e.g. on resize or device rotation).
+ *
+ * SSR-safe: defaults to false on the server and during the very first render,
+ * then syncs from `window.matchMedia` on mount.
+ */
+export function useMediaQuery(query: string) {
+  const matches = ref(false)
+  let mql: MediaQueryList | null = null
+  const listener = (e: MediaQueryListEvent) => { matches.value = e.matches }
+
+  onMounted(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    mql = window.matchMedia(query)
+    matches.value = mql.matches
+    mql.addEventListener('change', listener)
+  })
+
+  onUnmounted(() => {
+    if (mql) mql.removeEventListener('change', listener)
+  })
+
+  return matches
+}