chore: css clean up (#2988)

assets/components/HostMenu.vue

@@ -44,19 +44,20 @@
             </summary>
             <ul>
               <li v-for="item in containers" :class="item.state" :key="item.id">
-                <popup>
+                <Popup>
                   <router-link
                     :to="{ name: 'container-id', params: { id: item.id } }"
                     active-class="active-primary"
                     @click.alt.stop.prevent="pinnedStore.pinContainer(item)"
                     :title="item.name"
+                    class="group auto-cols-[auto_max-content_max-content]"
                   >
                     <div class="truncate">
                       {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">.{{ item.swarmId }}</span>
                     </div>
                     <ContainerHealth :health="item.health" />
                     <span
-                      class="pin"
+                      class="hidden hover:text-secondary group-hover:inline-block"
                       @click.stop.prevent="pinnedStore.pinContainer(item)"
                       v-show="!pinnedStore.isPinned(item)"
                       :title="$t('tooltip.pin-column')"
@@ -67,7 +68,7 @@
                   <template #content>
                     <ContainerPopup :container="item" />
                   </template>
-                </popup>
+                </Popup>
               </li>
             </ul>
           </details>
@@ -168,22 +169,7 @@ const menuItems = computed(() => {
 .menu {
   @apply text-[0.95rem];
 }
-.containers a {
-  @apply auto-cols-[auto_max-content_max-content];
-  .pin {
-    display: none;
 
-    &:hover {
-      @apply text-secondary;
-    }
-  }
-
-  &:hover {
-    .pin {
-      display: inline-block;
-    }
-  }
-}
 li.exited {
   @apply opacity-50;
 }

assets/components/LogViewer/ContainerName.vue

@@ -1,17 +1,10 @@
 <template>
-  <div class="relative block w-40 overflow-hidden rounded px-1.5 text-center text-sm text-white">
-    <div class="random-color absolute inset-0 brightness-75"></div>
-    <div class="direction-rtl relative truncate">{{ containerNames[id] }}</div>
+  <div class="grid w-40 overflow-hidden rounded text-center text-sm text-white">
+    <div class="random-color col-start-1 row-start-1 brightness-75"></div>
+    <div class="col-start-1 row-start-1 truncate px-2 brightness-100 [direction:rtl]">{{ containerNames[id] }}</div>
   </div>
 </template>
-<script lang="ts" setup>
-const containerStore = useContainerStore();
-const { containerNames } = storeToRefs(containerStore);
-
-const { id } = defineProps<{
-  id: string;
-}>();
-
+<script lang="ts">
 const colors = [
   "#4B0082",
   "#FF00FF",
@@ -29,6 +22,14 @@ const colors = [
   "#FFD700",
   "#FF4040",
 ] as const;
+</script>
+<script lang="ts" setup>
+const containerStore = useContainerStore();
+const { containerNames } = storeToRefs(containerStore);
+
+const { id } = defineProps<{
+  id: string;
+}>();
 
 const color = computed(() => colors[Math.abs(hashCode(id)) % colors.length]);
 </script>
@@ -37,8 +38,4 @@ const color = computed(() => colors[Math.abs(hashCode(id)) % colors.length]);
 .random-color {
   background-color: v-bind(color);
 }
-
-.direction-rtl {
-  direction: rtl;
-}
 </style>

assets/components/Popup.vue

@@ -16,11 +16,10 @@
 <script lang="ts" setup>
 import { globalShowPopup } from "@/composable/popup";
 
-let glopbalShow = globalShowPopup();
-let show = ref(glopbalShow.value);
-let delayedShow = refDebounced(show, 1000);
-
-let content = ref<HTMLElement>();
+const glopbalShow = globalShowPopup();
+const show = ref(glopbalShow.value);
+const delayedShow = refDebounced(show, 1000);
+const content = ref<HTMLElement>();
 
 const onMouseEnter = (e: Event) => {
   show.value = true;

assets/components/common/TimedButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button class="btn relative overflow-hidden" @click="cancel()">
     <div class="absolute inset-0 origin-left bg-white/30" ref="progress"></div>
-    <div class="z-10">
+    <div>
       <slot></slot>
     </div>
   </button>
@@ -13,9 +13,13 @@ const finished = defineEmit();
 const cancelled = defineEmit();
 let animation: Animation | undefined;
 
+const { duration = 4000 } = defineProps<{
+  duration?: number;
+}>();
+
 onMounted(async () => {
   animation = progress.value?.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
-    duration: 4000,
+    duration: duration,
     easing: "linear",
     fill: "forwards",
   });