refactor: optimized contextmenu, style update, ui bug fixes

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%;