style: 修复两处内容过多导致溢出的样式问题

Author: moonrailgun

Diff for: src/web/components/panels/CommonPanel.tsx

@@ -27,6 +27,7 @@ const RightPanel = styled.div`
   width: ${(props) => props.theme.style.sidebarWidth};
   background-color: ${(props) => props.theme.style.sidebarBackgroundColor};
   padding: 8px;
+  overflow: auto;
 
   ${(props) =>
     props.theme.mixins.mobile('position: absolute;height: 100%;right: 0;')}

Diff for: src/web/routes/Main/Content/Group/index.tsx

@@ -35,7 +35,7 @@ export const Group: React.FC = TMemo(() => {
     <GroupProvider groupInfo={groupInfo}>
       <PageContent
         sidebar={
-          <div>
+          <>
             <GroupHeader groupUUID={groupUUID} />
             <SidebarItemsContainer>
               <SidebarItem
@@ -53,7 +53,7 @@ export const Group: React.FC = TMemo(() => {
                 />
               ))}
             </SidebarItemsContainer>
-          </div>
+          </>
         }
       >
         <Switch>

Diff for: src/web/routes/Main/Content/PageContent.tsx

@@ -39,6 +39,8 @@ const SidebarContainer = styled.div<{
   width: ${(props) => (props.showSidebar ? props.theme.style.sidebarWidth : 0)};
   background-color: ${(props) => props.theme.style.sidebarBackgroundColor};
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 `;
 
 interface PageContentProps {

Diff for: src/web/routes/Main/Content/Personal/index.tsx

@@ -43,7 +43,7 @@ export const Personal: React.FC = TMemo(() => {
   return (
     <PageContent
       sidebar={
-        <div>
+        <>
           <SectionHeader>{getUserName(currentUserInfo)}</SectionHeader>
           <SidebarItemsContainer>
             <SidebarItem
@@ -99,7 +99,7 @@ export const Personal: React.FC = TMemo(() => {
               })}
             </div>
           </SidebarItemsContainer>
-        </div>
+        </>
       }
     >
       <Switch>

Diff for: src/web/routes/Main/Content/style.tsx

@@ -10,4 +10,6 @@ export const SidebarHeaderText = styled.div`
 
 export const SidebarItemsContainer = styled.div`
   padding: 8px;
+  flex: 1;
+  overflow: auto;
 `;