Constrain context menu to the width of the widest item

Co-Authored-By: Nathan Sobo <nathan@zed.dev>

styles/src/styleTree/app.ts

@@ -9,6 +9,7 @@ import projectPanel from "./projectPanel";
 import search from "./search";
 import picker from "./picker";
 import workspace from "./workspace";
+import contextMenu from "./contextMenu";
 import projectDiagnostics from "./projectDiagnostics";
 import contactNotification from "./contactNotification";
 
@@ -20,6 +21,7 @@ export default function app(theme: Theme): Object {
   return {
     picker: picker(theme),
     workspace: workspace(theme),
+    contextMenu: contextMenu(theme),
     editor: editor(theme),
     projectDiagnostics: projectDiagnostics(theme),
     commandPalette: commandPalette(theme),

styles/src/styleTree/contextMenu.ts

@@ -0,0 +1,23 @@
+import Theme from "../themes/common/theme";
+import { shadow, text } from "./components";
+
+export default function contextMenu(theme: Theme) {
+  return {
+    background: "#ff0000",
+    // background: backgroundColor(theme, 300, "base"),
+    cornerRadius: 6,
+    padding: {
+      bottom: 2,
+      left: 6,
+      right: 6,
+      top: 2,
+    },
+    shadow: shadow(theme),
+    item: {
+      label: text(theme, "sans", "secondary", { size: "sm" }),
+    },
+    separator: {
+      background: "#00ff00"
+    }
+  }
+}

styles/src/styleTree/projectPanel.ts

@@ -32,21 +32,5 @@ export default function projectPanel(theme: Theme) {
       text: text(theme, "mono", "primary", { size: "sm" }),
       selection: player(theme, 1).selection,
     },
-    contextMenu: {
-      width: 100,
-      // background: "#ff0000",
-      background: backgroundColor(theme, 300, "base"),
-      cornerRadius: 6,
-      padding: {
-        bottom: 2,
-        left: 6,
-        right: 6,
-        top: 2,
-      },
-      item: {
-        label: text(theme, "sans", "secondary", { size: "sm" }),
-      },
-      shadow: shadow(theme),
-    }
   };
 }