From fd69eae2eadf74b2857461175260c0a49d1016ad Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 11 Dec 2025 09:25:40 -0800
Subject: [PATCH] feat: enables action toolbar on menu (#4284)

---
 .../components/ContainerViewer/ContainerActionsToolbar.vue  | 6 +++---
 assets/components/ContainerViewer/ContainerLog.vue          | 6 +++---
 assets/components/LogViewer/MultiContainerActionToolbar.vue | 6 +++---
 assets/components/LogViewer/MultiContainerStat.vue          | 2 +-
 .../components/MultiContainerViewer/MultiContainerLog.vue   | 4 ++--
 assets/components/ScrollableView.vue                        | 2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/assets/components/ContainerViewer/ContainerActionsToolbar.vue b/assets/components/ContainerViewer/ContainerActionsToolbar.vue
index 00277f9f..fded182d 100644
--- a/assets/components/ContainerViewer/ContainerActionsToolbar.vue
+++ b/assets/components/ContainerViewer/ContainerActionsToolbar.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="dropdown dropdown-end dropdown-hover z-20">
-    <label tabindex="0" class="btn btn-ghost btn-sm w-10 gap-0.5 px-2">
-      <carbon:circle-solid class="text-red w-2.5" v-if="streamConfig.stderr" />
-      <carbon:circle-solid class="text-blue w-2.5" v-if="streamConfig.stdout" />
+    <label tabindex="0" class="btn btn-ghost btn-sm w-8 gap-0 px-0 md:gap-0.5">
+      <carbon:circle-solid class="text-red w-2 md:w-2.5" v-if="streamConfig.stderr" />
+      <carbon:circle-solid class="text-blue w-2 md:w-2.5" v-if="streamConfig.stdout" />
     </label>
     <ul
       tabindex="0"
diff --git a/assets/components/ContainerViewer/ContainerLog.vue b/assets/components/ContainerViewer/ContainerLog.vue
index 8303cd4a..3feef1fa 100644
--- a/assets/components/ContainerViewer/ContainerLog.vue
+++ b/assets/components/ContainerViewer/ContainerLog.vue
@@ -1,15 +1,15 @@
 <template>
   <ScrollableView :scrollable="scrollable" v-if="container">
     <template #header v-if="showTitle">
-      <div class="@container mx-2 flex items-center gap-2 md:ml-4">
-        <ContainerTitle :container="container" />
+      <div class="@container mx-2 flex items-center gap-1 md:ml-4 md:gap-2">
+        <ContainerTitle :container="container" class="mt-1 md:mt-0" />
         <MultiContainerStat
           class="ml-auto lg:hidden lg:@3xl:flex"
           :containers="[container]"
           v-if="container.state === 'running'"
         />
 
-        <ContainerActionsToolbar @clear="viewer?.clear()" class="max-md:hidden" :container="container" />
+        <ContainerActionsToolbar @clear="viewer?.clear()" :container="container" />
         <a class="btn btn-circle btn-xs" @click="close()" v-if="closable">
           <mdi:close />
         </a>
diff --git a/assets/components/LogViewer/MultiContainerActionToolbar.vue b/assets/components/LogViewer/MultiContainerActionToolbar.vue
index 74fdaff3..6d94071a 100644
--- a/assets/components/LogViewer/MultiContainerActionToolbar.vue
+++ b/assets/components/LogViewer/MultiContainerActionToolbar.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="dropdown dropdown-end dropdown-hover z-20">
-    <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
-      <carbon:circle-solid class="text-red w-2.5" v-if="streamConfig.stderr" />
-      <carbon:circle-solid class="text-blue w-2.5" v-if="streamConfig.stdout" />
+    <label tabindex="0" class="btn btn-ghost btn-sm w-8 gap-0 px-0 md:gap-0.5">
+      <carbon:circle-solid class="text-red w-2 md:w-2.5" v-if="streamConfig.stderr" />
+      <carbon:circle-solid class="text-blue w-2 md:w-2.5" v-if="streamConfig.stdout" />
     </label>
     <ul
       tabindex="0"
diff --git a/assets/components/LogViewer/MultiContainerStat.vue b/assets/components/LogViewer/MultiContainerStat.vue
index 9017105e..9114ec4e 100644
--- a/assets/components/LogViewer/MultiContainerStat.vue
+++ b/assets/components/LogViewer/MultiContainerStat.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-4">
+  <div class="flex gap-1 md:gap-4">
     <StatMonitor
       :data="memoryData"
       label="mem"
diff --git a/assets/components/MultiContainerViewer/MultiContainerLog.vue b/assets/components/MultiContainerViewer/MultiContainerLog.vue
index cd64c2b2..d33f73c2 100644
--- a/assets/components/MultiContainerViewer/MultiContainerLog.vue
+++ b/assets/components/MultiContainerViewer/MultiContainerLog.vue
@@ -1,11 +1,11 @@
 <template>
   <ScrollableView :scrollable="scrollable" v-if="containers.length && ready">
     <template #header>
-      <div class="mx-2 flex items-center gap-2 md:ml-4">
+      <div class="mx-2 flex items-center gap-1 md:ml-4 md:gap-2">
         <octicon:container-24 />
         <ContainerDropdown :containers="containers">{{ $t("label.container", containers.length) }}</ContainerDropdown>
         <MultiContainerStat class="ml-auto" :containers="containers" />
-        <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
+        <MultiContainerActionToolbar @clear="viewer?.clear()" />
       </div>
     </template>
     <template #default>
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index 326f8568..cc81a5f5 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -2,7 +2,7 @@
   <section :class="{ 'h-screen min-h-0': scrollable }" class="flex flex-col">
     <header
       v-if="$slots.header"
-      class="border-base-content/10 bg-base-200 sticky top-[calc(55px+env(safe-area-inset-top))] z-20 border-b py-2 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0"
+      class="border-base-content/10 bg-base-200 sticky top-[calc(55px+env(safe-area-inset-top))] z-20 border-b py-0.5 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0 md:py-2"
     >
       <slot name="header"></slot>
     </header>