add gutter

Author: yeion7

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts

@@ -41,7 +41,7 @@ export const OverlayContainer = styled.div`
   z-index: 10;
   color: rgba(255, 255, 255, 0.8);
   font-size: 0.875rem;
-
+  margin: 0;
   border-radius: 2px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
 

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx

@@ -16,6 +16,11 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
   possibleTemplates,
   hideFilters,
 }: IFilterOptionsProps) => {
+  const menu = useMenuState({
+    gutter: 10,
+    placement: 'bottom-end',
+  });
+
   const {
     state: {
       dashboard: { isTemplateSelected, filters },

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/elements.tsx

@@ -62,7 +62,7 @@ export const OverlayContainer = styled.div`
   z-index: 10;
   color: rgba(255, 255, 255, 0.8);
   font-size: 0.875rem;
-
+  margin: 0;
   border-radius: 2px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
 

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.tsx

@@ -23,7 +23,9 @@ export const SortOptions: React.FC<{ hideOrder: boolean }> = ({
       dashboard: { orderByChanged },
     },
   } = useOvermind();
-  const menu = useMenuState();
+  const menu = useMenuState({
+    gutter: 10,
+  });
 
   const toggleSort = e => {
     e.preventDefault();