From 5908554f3887e2bea60a2d0439041c508c8bd056 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 3 Nov 2022 14:41:34 -0700
Subject: [PATCH] Set all popovers withinPortal by default

---
 src/renderer/components/date-picker/index.tsx   | 2 +-
 src/renderer/components/dropdown-menu/index.tsx | 6 +++++-
 src/renderer/components/select/index.tsx        | 6 ++++--
 src/renderer/components/tooltip/index.tsx       | 1 +
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/date-picker/index.tsx b/src/renderer/components/date-picker/index.tsx
index 4cc77f24f..16f29e253 100644
--- a/src/renderer/components/date-picker/index.tsx
+++ b/src/renderer/components/date-picker/index.tsx
@@ -12,7 +12,7 @@ interface DatePickerProps extends MantineDatePickerProps {
 const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>``;
 
 export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
-  return <StyledDatePicker {...props} sx={{ maxWidth, width }} />;
+  return <StyledDatePicker withinPortal {...props} sx={{ maxWidth, width }} />;
 };
 
 DatePicker.defaultProps = {
diff --git a/src/renderer/components/dropdown-menu/index.tsx b/src/renderer/components/dropdown-menu/index.tsx
index a3714b7ee..df0ed7ea4 100644
--- a/src/renderer/components/dropdown-menu/index.tsx
+++ b/src/renderer/components/dropdown-menu/index.tsx
@@ -45,7 +45,11 @@ const StyledMenuDivider = styled(MantineMenu.Divider)`
 `;
 
 export const DropdownMenu = ({ children, ...props }: MenuProps) => {
-  return <StyledMenu {...props}>{children}</StyledMenu>;
+  return (
+    <StyledMenu withinPortal {...props}>
+      {children}
+    </StyledMenu>
+  );
 };
 
 const MenuLabel = ({ children, ...props }: MenuLabelProps) => {
diff --git a/src/renderer/components/select/index.tsx b/src/renderer/components/select/index.tsx
index 45c43db9f..c36302b5f 100644
--- a/src/renderer/components/select/index.tsx
+++ b/src/renderer/components/select/index.tsx
@@ -5,15 +5,17 @@ import {
 } from '@mantine/core';
 
 interface SelectProps extends MantineSelectProps {
+  maxWidth?: number | string;
   width?: number | string;
 }
 
 const StyledSelect = styled(MantineSelect)``;
 
-export const Select = ({ width, ...props }: SelectProps) => {
-  return <StyledSelect {...props} sx={{ width }} />;
+export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
+  return <StyledSelect withinPortal {...props} sx={{ maxWidth, width }} />;
 };
 
 Select.defaultProps = {
+  maxWidth: undefined,
   width: undefined,
 };
diff --git a/src/renderer/components/tooltip/index.tsx b/src/renderer/components/tooltip/index.tsx
index 667466023..647206afc 100644
--- a/src/renderer/components/tooltip/index.tsx
+++ b/src/renderer/components/tooltip/index.tsx
@@ -10,6 +10,7 @@ const StyledTooltip = styled(MantineTooltip)`
 export const Tooltip = ({ children, ...rest }: TooltipProps) => {
   return (
     <StyledTooltip
+      withinPortal
       pl={10}
       pr={10}
       py={5}