chore: rename sidebar body wrapper

__tests__/cases/homepage.not-render.ts

@@ -4,6 +4,6 @@ describe(`in GitHub homepage`, () => {
   beforeAll(() => page.goto('https://github.com'))
 
   it('should not render Gitako', async () => {
-    await expectToNotFind('.gitako-side-bar .gitako-position-wrapper')
+    await expectToNotFind('.gitako-side-bar .gitako-side-bar-body-wrapper')
   })
 })

__tests__/cases/project-page.gitako.ts

@@ -4,7 +4,7 @@ describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako'))
 
   it('should render Gitako', async () => {
-    await expectToFind('.gitako-side-bar .gitako-position-wrapper')
+    await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper')
   })
 
   it('should render file list', async () => {

__tests__/cases/pull-request-page.gitako.ts

@@ -4,7 +4,7 @@ describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/pull/71'))
 
   it('should render Gitako', async () => {
-    await expectToFind('.gitako-side-bar .gitako-position-wrapper')
+    await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper')
   })
 
   it('should render file list', async () => {

src/components/ResizeHandler.tsx

@@ -1,6 +1,6 @@
 import { Icon } from 'components/Icon'
 import * as React from 'react'
-import { Size } from './Resizable'
+import { Size } from './SideBarBodyWrapper'
 
 type Props = {
   size: Size

src/components/SideBar.tsx

@@ -2,8 +2,8 @@ import { AccessDeniedDescription } from 'components/AccessDeniedDescription'
 import { FileExplorer } from 'components/FileExplorer'
 import { MetaBar } from 'components/MetaBar'
 import { Portal } from 'components/Portal'
-import { Resizable } from 'components/Resizable'
 import { SettingsBar } from 'components/settings/SettingsBar'
+import { SideBarBodyWrapper } from 'components/SideBarBodyWrapper'
 import { ToggleShowButton } from 'components/ToggleShowButton'
 import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
@@ -105,7 +105,7 @@ export function SideBar() {
         <Portal into={$logoContainerElement.value}>
           {!shouldShow && <ToggleShowButton error={error} onClick={toggleShowSideBar} />}
         </Portal>
-        <Resizable className={cx({ hidden: error || !shouldShow })} baseSize={baseSize}>
+        <SideBarBodyWrapper className={cx({ hidden: error || !shouldShow })} baseSize={baseSize}>
           <div className={'gitako-side-bar-body'}>
             <div className={'close-side-bar-button-position'}>
               <button className={'close-side-bar-button'} onClick={toggleShowSideBar}>
@@ -151,7 +151,7 @@ export function SideBar() {
             </div>
             <SettingsBar toggleShowSettings={toggleShowSettings} activated={showSettings} />
           </div>
-        </Resizable>
+        </SideBarBodyWrapper>
       </div>
     </Theme>
   )

src/components/SideBarBodyWrapper.tsx

@@ -16,7 +16,11 @@ type Props = {
 const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100
 const MINIMAL_WIDTH = 240
 
-export function Resizable({ baseSize, className, children }: React.PropsWithChildren<Props>) {
+export function SideBarBodyWrapper({
+  baseSize,
+  className,
+  children,
+}: React.PropsWithChildren<Props>) {
   const [size, setSize] = React.useState(baseSize)
   const configContext = useConfigs()
 
@@ -48,8 +52,8 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
     else setSize(size)
   }, [])
   return (
-    <div className={cx('gitako-position-wrapper', className)}>
-      <div className={'gitako-position-content'}>{children}</div>
+    <div className={cx('gitako-side-bar-body-wrapper', className)}>
+      <div className={'gitako-side-bar-body-wrapper-content'}>{children}</div>
       {features.resize && <HorizontalResizeHandler onResize={onResize} size={size} />}
     </div>
   )

src/styles/index.scss

@@ -264,7 +264,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     color: var(--gitako-text-link);
   }
 
-  .#{$name}-position-wrapper {
+  .#{$name}-side-bar-body-wrapper {
     position: fixed;
     top: 0;
     left: 0;
@@ -276,7 +276,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       @extend %hidden;
     }
 
-    .gitako-position-content {
+    .gitako-side-bar-body-wrapper-content {
       width: var(--gitako-width);
     }
   }