From 53fe2f7f4dc9a6a646faf8414fc79e33ed14cf40 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Sat, 31 Jan 2026 13:03:11 -0800
Subject: [PATCH] fix: fixes broken UI on smaller screens (#4400)

---
 assets/components/ContainerViewer/ContainerTitle.vue | 6 +++---
 assets/components/LogViewer/MultiContainerStat.vue   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/components/ContainerViewer/ContainerTitle.vue b/assets/components/ContainerViewer/ContainerTitle.vue
index 8f5d3304..cea1854a 100644
--- a/assets/components/ContainerViewer/ContainerTitle.vue
+++ b/assets/components/ContainerViewer/ContainerTitle.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="@container flex flex-1 items-center gap-1.5 md:gap-2">
+  <div class="@container flex min-w-0 flex-1 items-center gap-1.5 md:gap-2">
     <label class="swap swap-rotate size-4">
       <input type="checkbox" v-model="pinned" />
       <carbon:star-filled class="swap-on text-secondary" />
       <carbon:star class="swap-off" />
     </label>
-    <div class="inline-flex items-center text-sm">
-      <div class="breadcrumbs overflow-x-visible p-0 font-mono">
+    <div class="inline-flex min-w-0 items-center text-sm">
+      <div class="breadcrumbs min-w-0 overflow-x-visible p-0 font-mono">
         <ul>
           <li v-if="config.hosts.length > 1" class="font-thin max-md:hidden">
             {{ container.hostLabel }}
diff --git a/assets/components/LogViewer/MultiContainerStat.vue b/assets/components/LogViewer/MultiContainerStat.vue
index cfeda119..3e07d38d 100644
--- a/assets/components/LogViewer/MultiContainerStat.vue
+++ b/assets/components/LogViewer/MultiContainerStat.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex gap-1 md:gap-4">
     <div
-      class="grid min-w-15 grid-cols-[auto_1fr_auto_1fr] items-center gap-0.5 text-xs leading-none md:grid-cols-[auto_1fr]"
+      class="grid hidden min-w-15 grid-cols-[auto_1fr_auto_1fr] items-center gap-0.5 text-xs leading-none sm:grid md:grid-cols-[auto_1fr]"
     >
       <PhArrowUp class="text-primary" />
       <span class="tabular-nums">{{ formatBytes(networkRate.tx, { short: true, decimals: 1 }) }}/s</span>