fix: show CPU/Mem as compact pills in container table on mobile (#4744)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

assets/components/ContainerStatCell.vue

@@ -1,5 +1,13 @@
 <template>
-  <div class="flex flex-row items-center gap-2">
+  <div
+    v-if="isMobile"
+    class="flex w-fit items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium tabular-nums"
+    :class="type === 'cpu' ? 'bg-primary/10 text-primary' : 'bg-secondary/10 text-secondary'"
+  >
+    <component :is="type === 'cpu' ? PhCpu : PhMemory" class="size-3.5 shrink-0" />
+    <span>{{ displayValue }}</span>
+  </div>
+  <div v-else class="flex flex-row items-center gap-2">
     <template v-if="mode === 'chart'">
       <BarChart class="h-4 flex-1" :chart-data="chartData" :bar-class="barClass" />
     </template>
@@ -13,6 +21,10 @@
 <script setup lang="ts">
 import type { Container } from "@/models/Container";
 import type { Host } from "@/stores/hosts";
+// @ts-ignore
+import PhCpu from "~icons/ph/cpu";
+// @ts-ignore
+import PhMemory from "~icons/ph/memory";
 
 const {
   container,

assets/components/ContainerTable.vue

@@ -75,7 +75,7 @@
               v-show="isVisible(key)"
             >
               <a class="inline-flex cursor-pointer gap-2 text-sm uppercase">
-                <span>{{ $t(value.label) }}</span>
+                <span>{{ $t(isMobile && value.mobileLabel ? value.mobileLabel : value.label) }}</span>
                 <span class="h-4" data-icon>
                   <mdi:arrow-up />
                 </span>
@@ -87,10 +87,10 @@
           <tr
             v-for="container in paginated"
             :key="container.id"
-            v-memo="[container.id, statMode]"
+            v-memo="[container.id, statMode, isMobile]"
             class="hover:bg-base-100/80!"
           >
-            <td v-if="isVisible('name')" class="max-w-80 truncate">
+            <td v-if="isVisible('name')" class="max-w-80 truncate max-md:max-w-32">
               <router-link :to="{ name: '/container/[id]', params: { id: container.id } }" :title="container.name">
                 {{ container.name }}
               </router-link>
@@ -142,6 +142,7 @@ const fields: Record<
   string,
   {
     label: string;
+    mobileLabel?: string;
     sortFunc: (a: Container, b: Container) => number;
     mobileVisible: boolean;
     customClass?: string;
@@ -149,6 +150,7 @@ const fields: Record<
 > = {
   name: {
     label: "label.container-name",
+    mobileLabel: "label.name",
     sortFunc: (a: Container, b: Container) => a.name.localeCompare(b.name) * direction.value,
     mobileVisible: true,
   },
@@ -167,21 +169,23 @@ const fields: Record<
   created: {
     label: "label.created",
     sortFunc: (a: Container, b: Container) => (a.created.getTime() - b.created.getTime()) * direction.value,
-    mobileVisible: true,
+    mobileVisible: false,
     customClass: "w-1",
   },
   cpu: {
     label: "label.avg-cpu",
+    mobileLabel: "label.cpu",
     sortFunc: (a: Container, b: Container) => (a.movingAverage.cpu - b.movingAverage.cpu) * direction.value,
-    mobileVisible: false,
-    customClass: "min-w-48",
+    mobileVisible: true,
+    customClass: "min-w-48 max-md:min-w-0",
   },
   mem: {
     label: "label.avg-mem",
+    mobileLabel: "label.mem",
     sortFunc: (a: Container, b: Container) =>
       (a.movingAverage.memoryUsage - b.movingAverage.memoryUsage) * direction.value,
-    mobileVisible: false,
-    customClass: "min-w-48",
+    mobileVisible: true,
+    customClass: "min-w-48 max-md:min-w-0",
   },
 };
 

locales/da.yml

@@ -48,6 +48,7 @@ label:
   created: Lavet
   avg-cpu: Gns. CPU (%)
   avg-mem: Gns. MEM (%)
+  name: Navn
   pinned: Fastgjort
   per-page: Rækker per side
   host-menu: Værter og Containere

locales/de.yml

@@ -48,6 +48,7 @@ label:
   created: Erstellt
   avg-cpu: Avg. CPU (%)
   avg-mem: Avg. MEM (%)
+  name: Name
   pinned: Angepinnt
   per-page: Zeilen pro Seite
   host-menu: Hosts und Container

locales/en.yml

@@ -49,6 +49,9 @@ label:
   created: Created
   avg-cpu: Avg. CPU (%)
   avg-mem: Avg. MEM (%)
+  name: Name
+  cpu: CPU
+  mem: MEM
   pinned: Pinned
   per-page: Rows per page
   host-menu: Hosts and Containers

locales/es.yml

@@ -48,6 +48,7 @@ label:
   created: Creado
   avg-cpu: Promedio de CPU (%)
   avg-mem: Promedio de MEM (%)
+  name: Nombre
   pinned: Fijado
   per-page: Filas por página
   host-menu: Hosts y Contenedores

locales/fr.yml

@@ -48,6 +48,7 @@ label:
   created: Créé
   avg-cpu: Moyenne CPU (%)
   avg-mem: Moyenne MEM (%)
+  name: Nom
   pinned: Epinglé
   per-page: Colonnes par page
   host-menu: Hôtes et Conteneurs

locales/id.yml

@@ -49,6 +49,7 @@ label:
   created: Dibuat
   avg-cpu: Rata-rata CPU (%)
   avg-mem: Rata-rata MEM (%)
+  name: Nama
   pinned: Disematkan
   per-page: Baris per halaman
   host-menu: Host dan Kontainer

locales/it.yml

@@ -48,6 +48,7 @@ label:
   created: Creato
   avg-cpu: CPU (%)
   avg-mem: MEM (%)
+  name: Nome
   pinned: Fissato
   per-page: Righe per pagina
   host-menu: Host e Container

locales/ko.yml

@@ -47,6 +47,7 @@ label:
   created: 만든 날짜
   avg-cpu: 평균 CPU (%)
   avg-mem: 평균 메모리 (%)
+  name: 이름
   pinned: 고정됨
   per-page: 페이지당 행 수
   host-menu: 호스트 및 컨테이너

locales/nl.yml

@@ -48,6 +48,7 @@ label:
   created: Aangemaakt
   avg-cpu: Gem. CPU (%)
   avg-mem: Gem. geheugen (%)
+  name: Naam
   pinned: Vastgezet
   per-page: Rijen per pagina
   host-menu: Hosts en Containers

locales/pl.yml

@@ -52,6 +52,7 @@ label:
   created: Utworzony
   avg-cpu: Średnie zużycie CPU (%)
   avg-mem: Średnie zużycie pamięci (%)
+  name: Nazwa
   pinned: Przypięte
   per-page: Wierszy na strone
   host-menu: Hosty i Kontenery

locales/pt.yml

@@ -47,6 +47,7 @@ label:
   created: Criado
   avg-cpu: Média CPU (%)
   avg-mem: Média MEM (%)
+  name: Nome
   pinned: Fixado
   per-page: Linhas por página
   host-menu: Hosts e Containers

locales/ru.yml

@@ -48,6 +48,7 @@ label:
   created: Создан
   avg-cpu: средний процессор (%)
   avg-mem: средняя память (%)
+  name: Имя
   pinned: Закреплено
   per-page: Строк на странице
   host-menu: Хосты и Контейнеры

locales/sl.yml

@@ -56,6 +56,7 @@ label:
   container: Ni zabojnikov | 1 zabojnik | {count} zabojnikov
   services: Storitve
   avg-mem: Povprečje spomina (%)
+  name: Ime
   no-logs: Zabojnik še nima dnevnika
 tooltip:
   search: Iskanje zabojnikov (⌘ + k, ⌃k)

locales/tr.yml

@@ -53,6 +53,7 @@ label:
   created: Oluşturulma
   avg-cpu: Ort. CPU (%)
   avg-mem: Ort. Bellek (%)
+  name: Ad
   pinned: Sabitlenmiş
   per-page: Sayfa başına satır
   host-menu: Sunucular ve Konteynerler

locales/zh-tw.yml

@@ -53,6 +53,7 @@ label:
   created: 建立時間
   avg-cpu: 平均 CPU 使用率 (%)
   avg-mem: 平均記憶體使用率 (%)
+  name: 名稱
   pinned: 已釘選
   per-page: 每頁列數
   host-menu: 主機和容器

locales/zh.yml

@@ -53,6 +53,7 @@ label:
   created: 创建时间
   avg-cpu: 平均CPU (%)
   avg-mem: 平均MEM (%)
+  name: 名称
   pinned: 固定
   per-page: 每页行数
   host-menu: 主机和容器