style(exam->bodypositionlist): center body position images and append buttons horizontally, adjust width to 50%

close #26

src/pages/exam/components/BodyPositionList.tsx

@@ -69,7 +69,7 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
   return (
     // 父级是flex，这里是grid，grid的高度需要设置为0，并且flex-grow，这样才能不撑开grid
     <div className={`${layout} grid grid-rows-[1fr_auto] h-0 flex-grow`}>
-      <div className="overflow-y-auto">
+      <div className="overflow-y-auto flex flex-col ">
         {bodyPositions.map((bodyPosition, index) => (
           <ImageViewer
             key={index}
@@ -78,14 +78,19 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
                 ? getExposedImageUrl(bodyPosition.sop_instance_uid)
                 : getViewIconUrl(bodyPosition.view_icon_name)
             }
-            className="image-viewer-item"
+            className="image-viewer-item w-[50%] mx-auto"
             onClick={() => handleImageClick(bodyPosition)}
           />
         ))}
       </div>
 
       {showAddButton && (
-        <Image src={AppendViewIcon} preview={false}>
+        <Image
+          src={AppendViewIcon}
+          preview={false}
+          style={{ width: '50%' }}
+          className="mx-auto"
+        >
           <Button onClick={addBodyPositionClick} className="add-button" />
         </Image>
       )}