From a3af0691dfbaa2c7c2b8a81033a50ec8509c2d9c Mon Sep 17 00:00:00 2001
From: scures <scurescu@suse.com>
Date: Thu, 16 Nov 2023 18:12:37 +0100
Subject: [PATCH 1/3] fixes: 5759, list should not clip at the end of the table

Signed-off-by: scures <scurescu@suse.com>
---
 pkg/rancher-desktop/pages/Containers.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/rancher-desktop/pages/Containers.vue b/pkg/rancher-desktop/pages/Containers.vue
index df7822b4548..7ce999254db 100644
--- a/pkg/rancher-desktop/pages/Containers.vue
+++ b/pkg/rancher-desktop/pages/Containers.vue
@@ -343,7 +343,7 @@ export default {
 
   &-content {
     display: none;
-    position: absolute;
+    position: fixed;
     z-index: 1;
     padding-top: 5px;
     border-start-start-radius: var(--border-radius);

From 9bf58654cbfac3d69fc98f1ec315a22c4988f751 Mon Sep 17 00:00:00 2001
From: scures <scurescu@suse.com>
Date: Fri, 17 Nov 2023 11:17:35 +0100
Subject: [PATCH 2/3] unique ports correctly mapping, improves apparience

Signed-off-by: scures <scurescu@suse.com>
---
 .../assets/translations/en-us.yaml            |  3 +-
 pkg/rancher-desktop/pages/Containers.vue      | 35 ++++++++++++-------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/pkg/rancher-desktop/assets/translations/en-us.yaml b/pkg/rancher-desktop/assets/translations/en-us.yaml
index 8c663b80590..87f157b4c3b 100644
--- a/pkg/rancher-desktop/assets/translations/en-us.yaml
+++ b/pkg/rancher-desktop/assets/translations/en-us.yaml
@@ -194,13 +194,12 @@ containers:
     noRows: There are no containers to show
   manage:
     table:
-      showMore: more...
       header:
         state: State
         containerName: Name
         image: Image
         ports: Port(s)
-        started: Started
+        started: Uptime
         actions: Actions
 
 images:
diff --git a/pkg/rancher-desktop/pages/Containers.vue b/pkg/rancher-desktop/pages/Containers.vue
index 7ce999254db..65a6d8b42f2 100644
--- a/pkg/rancher-desktop/pages/Containers.vue
+++ b/pkg/rancher-desktop/pages/Containers.vue
@@ -29,7 +29,7 @@
               class="dropdown"
             >
               <span>
-                {{ t('containers.manage.table.showMore') }}
+                ...
               </span>
 
               <div class="dropdown-content">
@@ -292,23 +292,26 @@ export default {
 
       return { content: sha };
     },
-    getUniquePorts(obj) {
-      const uniquePorts = {};
+    getUniquePorts(ports) {
+      const keys = Object.keys(ports);
 
-      Object.keys(obj).forEach((key) => {
-        const ports = obj[key];
+      const uniquePortMap = keys.map((key) => {
+        const values = ports[key];
+        const hostPorts = values.map(value => value.HostPort);
+        const uniqueHostPorts = [...new Set(hostPorts)];
 
-        if (!ports) {
-          return;
-        }
+        return { [key]: uniqueHostPorts };
+      });
 
-        const firstPort = ports[0]?.HostPort || '';
-        const secondPort = ports[1]?.HostPort || '';
+      const displayMap = uniquePortMap.map((element) => {
+        const key = Object.keys(element)[0];
+        const values = element[key];
+        const port = key.split('/')[0];
 
-        uniquePorts[`${ firstPort }:${ secondPort }`] = true;
+        return values.map(value => `${ value }:${ port }`);
       });
 
-      return Object.keys(uniquePorts);
+      return [].concat.apply([], displayMap);
     },
     shouldHaveDropdown(ports) {
       if (!ports) {
@@ -341,6 +344,11 @@ export default {
   position: relative;
   display: inline-block;
 
+  span {
+    cursor: pointer;
+    padding: 5px;
+  }
+
   &-content {
     display: none;
     position: fixed;
@@ -349,6 +357,7 @@ export default {
     border-start-start-radius: var(--border-radius);
     background: var(--default);
     padding: 5px;
+    transition: all 0.5s ease-in-out;
 
     a {
       display: block;
@@ -375,6 +384,6 @@ export default {
 
 .port-container {
   display: flex;
-  flex-direction: column;
+  gap: 5px;
 }
 </style>

From 6f6cdc646e2f01c135281bc9c91f716436b4ec12 Mon Sep 17 00:00:00 2001
From: scures <scurescu@suse.com>
Date: Mon, 20 Nov 2023 10:47:14 +0100
Subject: [PATCH 3/3] flips tooltip possition, forcing always visible

Signed-off-by: scures <scurescu@suse.com>
---
 pkg/rancher-desktop/pages/Containers.vue | 35 ++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/pkg/rancher-desktop/pages/Containers.vue b/pkg/rancher-desktop/pages/Containers.vue
index 65a6d8b42f2..2374bf13262 100644
--- a/pkg/rancher-desktop/pages/Containers.vue
+++ b/pkg/rancher-desktop/pages/Containers.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="containers">
     <SortableTable
+      ref="sortableTableRef"
       :headers="headers"
       key-field="Id"
       :rows="rows"
@@ -27,11 +28,12 @@
             <div
               v-if="shouldHaveDropdown(row.Ports)"
               class="dropdown"
+              @mouseenter="addDropDownPosition"
+              @mouseleave="clearDropDownPosition"
             >
               <span>
                 ...
               </span>
-
               <div class="dropdown-content">
                 <a
                   v-for="port in getUniquePorts(row.Ports).slice(2)"
@@ -216,6 +218,36 @@ export default {
     handleSelection(item) {
       this.selected = [...item];
     },
+    clearDropDownPosition(e) {
+      const target = e.target;
+
+      const dropdownContent = target.querySelector('.dropdown-content');
+
+      if (dropdownContent) {
+        dropdownContent.style.top = '';
+      }
+    },
+    addDropDownPosition(e) {
+      const table = this.$refs.sortableTableRef.$el;
+      const target = e.target;
+
+      const dropdownContent = target.querySelector('.dropdown-content');
+
+      if (dropdownContent) {
+        const dropdownRect = target.getBoundingClientRect();
+        const tableRect = table.getBoundingClientRect();
+        const targetTopPos = dropdownRect.top - tableRect.top;
+        const tableHeight = tableRect.height;
+
+        if (targetTopPos < tableHeight / 2) {
+          // Show dropdownContent below the target
+          dropdownContent.style.top = `${ dropdownRect.bottom }px`;
+        } else {
+          // Show dropdownContent above the target
+          dropdownContent.style.top = `${ dropdownRect.top - dropdownContent.getBoundingClientRect().height }px`;
+        }
+      }
+    },
     async getContainers() {
       const containers = await this.ddClient?.docker.listContainers({ all: true });
 
@@ -353,7 +385,6 @@ export default {
     display: none;
     position: fixed;
     z-index: 1;
-    padding-top: 5px;
     border-start-start-radius: var(--border-radius);
     background: var(--default);
     padding: 5px;