Replace list item menu with single recalculate button to temporarily overcome css stacking context conflict

Author: Noam Kfir

src/views-ui/codeAnalytics/main.scss

@@ -96,8 +96,13 @@ vscode-panel-view {
     margin: 0;
 }
 
-.sf-menu {
-    li {
+.list-item-menu-item {
+    padding: 4px;
+    margin: 0;
+}
+
+ul.list-item-menu {
+    li.list-item-menu {
         right: 0;
         min-width: unset;
         font-family: var(--font-family);
@@ -111,20 +116,21 @@ vscode-panel-view {
             cursor: pointer;
         }
 
-        li {
-            color: var(--button-secondary-foreground);
-            background: var(--button-secondary-background);
-        }
-    }
-
-    ul {
-        left: unset;
-        right: 0;
-        min-width: unset;
-
-        li {
-            color: var(--button-secondary-foreground);
-            background: var(--button-secondary-background);
+        // li {
+        //     color: var(--button-secondary-foreground);
+        //     background: var(--button-secondary-background);
+        // }
+
+        ul {
+            left: unset;
+            right: 0;
+            min-width: unset;
+            z-index: 100;
+    
+            li {
+                color: var(--button-secondary-foreground);
+                background: var(--button-secondary-background);
+            }
         }
     }
 }

src/views/codeAnalytics/InsightListView/ItemRender/insightTemplateHtml.ts

@@ -77,15 +77,23 @@ export class InsightTemplateHtml
 
         const threeDotImageUri = this._viewUris.image('three-dots.svg');
 
+        // let menuHtml = menuItems?.length > 0
+        //     ? `<ul class="list-item-menu sf-menu sf-js-enabled">
+        //         <li class="list-item-menu">
+        //             <img class="list-item-icon" src="${threeDotImageUri}" height="15">
+        //             <ul>
+        //                 ${menuItems.join("")}
+        //             </ul>
+        //         </li>
+        //     </ul>`
+        //     : ``;
         let menuHtml = menuItems?.length > 0
-            ? `<ul class="list-item-menu sf-menu sf-js-enabled">
-                <li class="list-item-menu-item">
-                    <img class="list-item-icon" src="${threeDotImageUri}" height="15">
-                    <ul>
-                        ${menuItems.join("")}
-                    </ul>
-                </li>
-            </ul>`
+            ? `<div
+                class="list-item-icon custom-start-date-recalculate-link codicon codicon-calendar"
+                src="${threeDotImageUri}"
+                title="Recalculate\n\nClick to recalculate this insight only using new data"
+                height="15"
+            ></div>`
             : ``;
         // const menuItemsHtml = menuItems.length > 0
         //     ? `<li class="list-item-menu-item">
@@ -126,8 +134,8 @@ export class InsightTemplateHtml
                         ${timeInfoHtml}
                         ${descriptionHtml}
                     </div>
-                    ${iconHtml}
                     ${menuHtml}
+                    ${iconHtml}
                 </div>
                 ${bodyHtml}
                 ${buttonsHtml}