fix(core): use divider component to replace height dividers (#9986)

packages/frontend/core/src/modules/peek-view/view/image-preview/index.css.ts

@@ -102,14 +102,7 @@ export const cursorStyle = style({
   padding: '1px 2px',
   fontSize: '14px',
 });
-export const dividerStyle = style({
-  width: '0.5px',
-  height: '100%',
-  background: cssVar('borderColor'),
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
+
 export const scaleIndicatorButtonStyle = style({
   height: '24px',
   padding: '1px 2px',

packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@affine/component';
+import { Divider, toast } from '@affine/component';
 import { Button, IconButton } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import type { ImageBlockModel } from '@blocksuite/affine/blocks';
@@ -326,7 +326,7 @@ const ImagePreviewModalImpl = ({
             disabled={cursor + 1 === blocks.length}
             onClick={() => goto(cursor + 1)}
           />
-          <div className={styles.dividerStyle}></div>
+          <Divider size="thinner" orientation="vertical" />
           <IconButton
             data-testid="fit-to-screen-button"
             tooltip="Fit to screen"
@@ -347,14 +347,13 @@ const ImagePreviewModalImpl = ({
           >
             {`${(currentScale * 100).toFixed(0)}%`}
           </Button>
-
           <IconButton
             data-testid="zoom-in-button"
             tooltip="Zoom in"
             icon={<PlusIcon />}
             onClick={zoomIn}
           />
-          <div className={styles.dividerStyle}></div>
+          <Divider size="thinner" orientation="vertical" />
           <IconButton
             data-testid="download-button"
             tooltip="Download"
@@ -369,7 +368,7 @@ const ImagePreviewModalImpl = ({
           />
           {blockModel && !blockModel.doc.readonly && (
             <>
-              <div className={styles.dividerStyle}></div>
+              <Divider size="thinner" orientation="vertical" />
               <IconButton
                 data-testid="delete-button"
                 tooltip="Delete"