refactor: optimized contextmenu, style update, ui bug fixes

app/src/styles/components/contextMenu/_contextMenu.scss

@@ -2,61 +2,75 @@
 @use "../../abstracts/mixins" as *;
 
 .context-menu {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: var(--background-color);
-    backdrop-filter: blur(50px);
-    color: var(--text-button-color);
-    box-shadow: var(--box-shadow-light);
-    border-radius: 6px;
-    z-index: 1000;
-    min-width: 200px;
-    padding: 4px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: var(--background-color);
+  backdrop-filter: blur(50px);
+  color: var(--text-button-color);
+  box-shadow: var(--box-shadow-light);
+  border-radius: 10px;
+  z-index: 1000;
+  min-width: 200px;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  .menuItem {
+    position: relative;
     display: flex;
-    flex-direction: column;
-    gap: 2px;
+    justify-content: space-between;
+    cursor: pointer;
+    .submenu {
+      display: none;
+      min-width: 178px;
+      position: absolute;
+      top: 0;
+      left: 100%; // place directly beside
 
-    .menuItem {
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        padding: 6px 8px;
-        border-radius: 10px;
-        cursor: pointer;
-
-        .submenu {
-            display: none;
-            min-width: 178px;
-            position: absolute;
-            top: 0;
-            left: 100%; // place directly beside
-
-            background: var(--background-color);
-            backdrop-filter: blur(50px);
-            color: var(--text-button-color);
-            box-shadow: var(--box-shadow-light);
-
-            padding: 4px;
-            border-radius: 6px;
-            z-index: 1000;
-        }
-
-        .button {
-            display: flex;
-            gap: 6px;
-        }
-
-        // Keep submenu open while hovering parent OR submenu
-        &:hover .submenu,
-        .submenu:hover {
-            display: block;
-        }
-
-        &:hover {
-            background-color: var(--background-color-button);
-        }
+      background: var(--background-color);
+      backdrop-filter: blur(50px);
+      color: var(--text-button-color);
+      box-shadow: var(--box-shadow-light);
+      padding: 4px;
+      border-radius: 6px;
+      z-index: 1000;
+    }
+    .value {
+      display: flex;
+    }
+    .button {
+      display: flex;
+      gap: 6px;
+      padding: 5px 8px;
+      width: 100%;
+      border-radius: 10px;
+      &:hover {
+        color: var(--text-button-color);
+        background-color: var(--background-color-button);
+      }
+    }
+    .button.delete {
+      &:hover {
+        background-color: #e02e16;
+      }
+    }
+    .button.more {
+      justify-content: space-between;
     }
 
+    .shortcut {
+      position: absolute;
+      right: 8px;
+      top: 6px;
+      pointer-events: none;
+    }
 
-}
+    // Keep submenu open while hovering parent OR submenu
+    &:hover .submenu,
+    .submenu:hover {
+      display: block;
+    }
+  }
+}

app/src/styles/components/footer/footer.scss

@@ -86,6 +86,7 @@
         height: 100%;
         color: var(--text-color);
         gap: 6px;
+        cursor: pointer;
       }
 
       .logs-detail {

app/src/styles/components/input.scss

@@ -231,43 +231,49 @@ input[type="number"] {
     justify-content: space-between;
     cursor: pointer;
     border-radius: #{$border-radius-large};
-  }
-
-  .dropdown-options {
-    position: absolute;
-    width: 100%;
-    background: var(--background-color);
-    border: 1px solid var(--border-color);
-    border-radius: #{$border-radius-large};
-    z-index: 10;
-    max-height: 200px;
-    overflow-y: auto;
-    left: 0;
-    top: 110%;
-    padding: 4px;
-    backdrop-filter: blur(8px);
-
-    .dropdown-search {
-      margin-bottom: 4px;
+    .key{
+      width: calc(100% - 18px);
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-
-    .option {
-      padding: 2px 4px;
-      cursor: pointer;
-      flex-direction: row !important;
-      border-radius: #{$border-radius-medium};
-
-      &:hover {
-        color: var(--highlight-text-color);
-        background: var(--highlight-accent-color);
-      }
-    }
-  }
-
+  }  
   .icon {
     height: auto;
   }
 }
+.dropdown-options {
+  position: absolute;
+  width: 100%;
+  background: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: #{$border-radius-large};
+  z-index: 10;
+  max-height: 200px;
+  overflow-y: auto;
+  left: 0;
+  top: 110%;
+  padding: 4px;
+  backdrop-filter: blur(8px);
+
+  .dropdown-search {
+    margin-bottom: 4px;
+  }
+
+  .option {
+    padding: 2px 4px;
+    cursor: pointer;
+    flex-direction: row !important;
+    border-radius: #{$border-radius-medium};
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      color: var(--highlight-text-color);
+      background: var(--highlight-accent-color);
+    }
+  }
+}
 
 .input.default {
   width: 100%;

app/src/styles/components/logs/logs.scss

@@ -144,4 +144,7 @@
   .log-nav-container{
     margin-bottom: 10px;
   }
+  .log-entry-wrapper{
+    height: calc(100% - 50px);
+  }
 }