Set all popovers withinPortal by default

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 = {

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) => {

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) => {
+export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
-  return <StyledSelect {...props} sx={{ width }} />;
+  return <StyledSelect withinPortal {...props} sx={{ maxWidth, width }} />;
 };
 
 Select.defaultProps = {
+  maxWidth: undefined,
   width: undefined,
 };

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}