Increase menu item spacing for better readability.

Author: aratcliffe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-contextmenu",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A contextmenu plugin for Mapbox GL JS",
   "type": "module",
   "main": "./dist/index.cjs",

src/components/ContextMenu/ContextMenu.module.scss

@@ -15,7 +15,7 @@
   background: var(--context-menu-bg);
   border-radius: var(--context-menu-border-radius, 4px);
   box-shadow: var(--context-menu-shadow);
-  min-width: var(--context-menu-min-width, 150px);
+  min-width: var(--context-menu-min-width, 200px);
   opacity: 0;
   pointer-events: none;
   visibility: hidden;
@@ -25,6 +25,7 @@
 
   --context-menu-bg: white;
   --context-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --context-menu-item-font-size: 13px;
   --context-menu-item-text-color: black;
   --context-menu-item-hover-bg: #e8e8e8;
   --context-menu-item-active-bg: #f3f3f3;

src/components/ContextMenuItem/ContextMenuItem.module.scss

@@ -15,10 +15,10 @@
 .button {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   width: 100%;
-  height: 26px;
-  padding: 0px 6px 0px 10px;
+  height: 28px;
+  padding: 0px 8px 0px 12px;
   margin: 0;
   border: none;
   border-radius: 3px;
@@ -29,6 +29,8 @@
   transition: background-color 150ms ease-out;
   outline: none;
   user-select: none;
+  font-family: inherit;
+  font-size: var(--context-menu-item-font-size);
 
   &.focused:not(:disabled):not(.focusedParent) {
     background-color: var(--context-menu-item-hover-bg);