Context Menus small fixes (#5625)

* make small insert menu and full insert menu same width * fix scrollbar color and separater width * fix data picker scrollbar color
concrete-utopia · May 6, 2024 · 3c16a0b · 3c16a0b
1 parent 2754de3
commit 3c16a0b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/editor/resources/editor/css/ReactContexify.css b/editor/resources/editor/css/ReactContexify.css
@@ -58,6 +58,7 @@
 }
 .react-contexify__item__content {
   min-width: 190px;
+  width: 100%;
   padding-left: 8px;
   padding-right: 8px;
   display: flex;

diff --git a/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx b/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx
@@ -355,6 +355,7 @@ export const DataPickerPopup = React.memo(
                 width: '100%',
                 scrollbarWidth: 'auto',
                 colorScheme: 'dark',
+                scrollbarColor: 'gray transparent',
               }}
             >
               <DataPickerPopupSubvariables

diff --git a/editor/src/components/navigator/navigator-item/component-picker-context-menu.tsx b/editor/src/components/navigator/navigator-item/component-picker-context-menu.tsx
@@ -580,7 +580,7 @@ const ComponentPickerContextMenuSimple = React.memo<ComponentPickerContextMenuPr
 
         const submenuLabel = (
           <FlexRow
-            style={{ gap: 10 }}
+            style={{ gap: 10, width: 228 }}
             data-testId={labelTestIdForComponentIcon(data.name, data.moduleName ?? '', data.icon)}
           >
             <Icn {...iconProps} width={12} height={12} />

diff --git a/editor/src/components/navigator/navigator-item/component-picker.tsx b/editor/src/components/navigator/navigator-item/component-picker.tsx
@@ -285,7 +285,12 @@ const ComponentPickerComponentSection = React.memo(
     return (
       <div
         data-role='component-scroll'
-        style={{ maxHeight: 250, overflowY: 'scroll', scrollbarWidth: 'auto' }}
+        style={{
+          maxHeight: 250,
+          overflowY: 'scroll',
+          scrollbarWidth: 'auto',
+          scrollbarColor: 'gray transparent',
+        }}
         onScroll={onScroll}
       >
         {components.map((component) => {