fix: inline menu position (#433)

libs/components/editor-plugins/src/menu/inline-menu/Container.tsx

@@ -1,12 +1,7 @@
-import { useState, useEffect } from 'react';
+import { MuiGrow as Grow, styled } from '@toeverything/components/ui';
 import { Protocol } from '@toeverything/datasource/db-service';
-import {
+import { SelectionInfo, Virgo } from '@toeverything/framework/virgo';
-    MuiClickAwayListener as ClickAwayListener,
+import { useEffect, useState } from 'react';
-    MuiGrow as Grow,
-    styled,
-} from '@toeverything/components/ui';
-
-import { Virgo, SelectionInfo } from '@toeverything/framework/virgo';
 import { InlineMenuToolbar } from './Toolbar';
 
 export type InlineMenuContainerProps = {
@@ -47,11 +42,18 @@ export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
 
             // This is relative to window
             const rect = browserSelection.getRangeAt(0).getBoundingClientRect();
-            const { top, left } = editor.container.getBoundingClientRect();
+
+            const { top, left, right } =
+                editor.container.getBoundingClientRect();
+            let menuLeft = rect.left - left;
+            if (right - rect.right < 500) {
+                // If the inline-menu is further away from the right than the button itself, a scroll bar will appear
+                menuLeft -= 500;
+            }
             setSelectionInfo(info);
             setShowMenu(true);
             setContainerStyle({
-                left: rect.left - left,
+                left: menuLeft,
                 top: rect.top - top - 64,
             });
         });
@@ -89,6 +91,6 @@ const ToolbarContainer = styled('div')(({ theme }) => ({
     alignItems: 'center',
     padding: '0 12px',
     borderRadius: '10px',
-    boxShadow: theme.affine.shadows.shadow1,
+    boxShadow: theme.affine.shadows.shadow3,
     backgroundColor: '#fff',
 }));

libs/components/ui/src/theme/theme.ts

@@ -237,6 +237,8 @@ export const Theme = {
             '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
         shadow2:
             '0px 6px 16px -8px rgba(0,0,0,0.08), 0px 9px 14px 0px rgba(0,0,0,0.05), 0px 12px 24px 16px rgba(0,0,0,0.03)',
+        shadow3:
+            '0px 1px 10px -6px rgb(24 39 75 / 50%), 0px 3px 16px -6px rgb(24 39 75 / 30%)',
     },
     border: ['none'],
     spacing: {