style(processing): adjust operation panel to fill vertically, add tooltips to buttons and truncate long text

src/pages/view/components/FunctionArea.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button, Row, Col } from 'antd';
+import '@/themes/truncateText.css';
 import { useDispatch } from 'react-redux';
 import { setAction } from '@/states/view/functionAreaSlice';
 
@@ -12,163 +13,334 @@ const FunctionArea = () => {
   };
 
   return (
-    <Row gutter={[8, 8]} style={{ maxHeight: '400px', overflowY: 'auto' }}>
+    <Row gutter={[8, 8]} style={{ overflowY: 'auto' }}>
       <Col>
-        <Button onClick={() => handleButtonClick('Add L Mark')}>
+        <Button
+          onClick={() => handleButtonClick('Add L Mark')}
+          style={{ width: '44px', height: '44px' }}
+          title="Add L Mark"
+          className="truncate-text"
+        >
           Add L Mark
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Add R Mark')}>
+        <Button
+          onClick={() => handleButtonClick('Add R Mark')}
+          style={{ width: '44px', height: '44px' }}
+          title="Add R Mark"
+          className="truncate-text"
+        >
           Add R Mark
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Delete Selected Mark')}>
+        <Button
+          onClick={() => handleButtonClick('Delete Selected Mark')}
+          style={{ width: '44px', height: '44px' }}
+          title="Delete Selected Mark"
+          className="truncate-text"
+        >
           Delete Selected Mark
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Horizontal Flip')}>
+        <Button
+          onClick={() => handleButtonClick('Horizontal Flip')}
+          style={{ width: '44px', height: '44px' }}
+          title="Horizontal Flip"
+          className="truncate-text"
+        >
           Horizontal Flip
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Vertical Flip')}>
+        <Button
+          onClick={() => handleButtonClick('Vertical Flip')}
+          style={{ width: '44px', height: '44px' }}
+          title="Vertical Flip"
+          className="truncate-text"
+        >
           Vertical Flip
         </Button>
       </Col>
       <Col>
         <Button
           onClick={() => handleButtonClick('Rotate Counterclockwise 90')}
+          style={{ width: '44px', height: '44px' }}
+          title="Rotate Counterclockwise 90°"
+          className="truncate-text"
         >
           Rotate Counterclockwise 90°
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Rotate Clockwise 90')}>
+        <Button
+          onClick={() => handleButtonClick('Rotate Clockwise 90')}
+          style={{ width: '44px', height: '44px' }}
+          title="Rotate Clockwise 90°"
+          className="truncate-text"
+        >
           Rotate Clockwise 90°
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Rotate Any Angle')}>
+        <Button
+          onClick={() => handleButtonClick('Rotate Any Angle')}
+          style={{ width: '44px', height: '44px' }}
+          title="Rotate Any Angle"
+          className="truncate-text"
+        >
           Rotate Any Angle
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Crop Image')}>
+        <Button
+          onClick={() => handleButtonClick('Crop Image')}
+          style={{ width: '44px', height: '44px' }}
+          title="Crop Image"
+          className="truncate-text"
+        >
           Crop Image
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Delete Digital Mask')}>
+        <Button
+          onClick={() => handleButtonClick('Delete Digital Mask')}
+          style={{ width: '44px', height: '44px' }}
+          title="Delete Digital Mask"
+          className="truncate-text"
+        >
           Delete Digital Mask
         </Button>
       </Col>
       <Col>
         <Button
           onClick={() => handleButtonClick('Adjust Brightness and Contrast')}
+          style={{ width: '44px', height: '44px' }}
+          title="Adjust Brightness and Contrast"
+          className="truncate-text"
         >
           Adjust Brightness and Contrast
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Crop Selected Area')}>
+        <Button
+          onClick={() => handleButtonClick('Crop Selected Area')}
+          style={{ width: '44px', height: '44px' }}
+          title="Crop Selected Area"
+          className="truncate-text"
+        >
           Crop Selected Area
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Delete Mask')}>
+        <Button
+          onClick={() => handleButtonClick('Delete Mask')}
+          style={{ width: '44px', height: '44px' }}
+          title="Delete Mask"
+          className="truncate-text"
+        >
           Delete Mask
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Image Comparison')}>
+        <Button
+          onClick={() => handleButtonClick('Image Comparison')}
+          style={{ width: '44px', height: '44px' }}
+          title="Image Comparison"
+          className="truncate-text"
+        >
           Image Comparison
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Invert Contrast')}>
+        <Button
+          onClick={() => handleButtonClick('Invert Contrast')}
+          style={{ width: '44px', height: '44px' }}
+          title="Invert Contrast"
+          className="truncate-text"
+        >
           Invert Contrast
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('1x1 Layout')}>
+        <Button
+          onClick={() => handleButtonClick('1x1 Layout')}
+          style={{ width: '44px', height: '44px' }}
+          title="1x1 Layout"
+          className="truncate-text"
+        >
           1x1 Layout
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('1x2 Layout')}>
+        <Button
+          onClick={() => handleButtonClick('1x2 Layout')}
+          style={{ width: '44px', height: '44px' }}
+          title="1x2 Layout"
+          className="truncate-text"
+        >
           1x2 Layout
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('2x2 Layout')}>
+        <Button
+          onClick={() => handleButtonClick('2x2 Layout')}
+          style={{ width: '44px', height: '44px' }}
+          title="2x2 Layout"
+          className="truncate-text"
+        >
           2x2 Layout
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('4x4 Layout')}>
+        <Button
+          onClick={() => handleButtonClick('4x4 Layout')}
+          style={{ width: '44px', height: '44px' }}
+          title="4x4 Layout"
+          className="truncate-text"
+        >
           4x4 Layout
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Magnifier')}>
+        <Button
+          onClick={() => handleButtonClick('Magnifier')}
+          style={{ width: '44px', height: '44px' }}
+          title="Magnifier"
+          className="truncate-text"
+        >
           Magnifier
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Fit Size')}>Fit Size</Button>
+        <Button
+          onClick={() => handleButtonClick('Fit Size')}
+          style={{ width: '44px', height: '44px' }}
+          title="Fit Size"
+          className="truncate-text"
+        >
+          Fit Size
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Original Size')}>
+        <Button
+          onClick={() => handleButtonClick('Original Size')}
+          style={{ width: '44px', height: '44px' }}
+          title="Original Size"
+          className="truncate-text"
+        >
           Original Size
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Zoom Image')}>
+        <Button
+          onClick={() => handleButtonClick('Zoom Image')}
+          style={{ width: '44px', height: '44px' }}
+          title="Zoom Image"
+          className="truncate-text"
+        >
           Zoom Image
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Reset Cursor')}>
+        <Button
+          onClick={() => handleButtonClick('Reset Cursor')}
+          style={{ width: '44px', height: '44px' }}
+          title="Reset Cursor"
+          className="truncate-text"
+        >
           Reset Cursor
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Pan')}>Pan</Button>
+        <Button
+          onClick={() => handleButtonClick('Pan')}
+          style={{ width: '44px', height: '44px' }}
+          title="Pan"
+          className="truncate-text"
+        >
+          Pan
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Invert Image')}>
+        <Button
+          onClick={() => handleButtonClick('Invert Image')}
+          style={{ width: '44px', height: '44px' }}
+          title="Invert Image"
+          className="truncate-text"
+        >
           Invert Image
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Reset Image')}>
+        <Button
+          onClick={() => handleButtonClick('Reset Image')}
+          style={{ width: '44px', height: '44px' }}
+          title="Reset Image"
+          className="truncate-text"
+        >
           Reset Image
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Snapshot')}>Snapshot</Button>
+        <Button
+          onClick={() => handleButtonClick('Snapshot')}
+          style={{ width: '44px', height: '44px' }}
+          title="Snapshot"
+          className="truncate-text"
+        >
+          Snapshot
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Advanced Processing')}>
+        <Button
+          onClick={() => handleButtonClick('Advanced Processing')}
+          style={{ width: '44px', height: '44px' }}
+          title="Advanced Processing"
+          className="truncate-text"
+        >
           Advanced Processing
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Musician')}>Musician</Button>
+        <Button
+          onClick={() => handleButtonClick('Musician')}
+          style={{ width: '44px', height: '44px' }}
+          title="Musician"
+          className="truncate-text"
+        >
+          Musician
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Image Measurement')}>
+        <Button
+          onClick={() => handleButtonClick('Image Measurement')}
+          style={{ width: '44px', height: '44px' }}
+          title="Image Measurement"
+          className="truncate-text"
+        >
           Image Measurement
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('More')}>More</Button>
+        <Button
+          onClick={() => handleButtonClick('More')}
+          style={{ width: '44px', height: '44px' }}
+          title="More"
+          className="truncate-text"
+        >
+          More
+        </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Apply Colormap')}>
+        <Button
+          onClick={() => handleButtonClick('Apply Colormap')}
+          style={{ width: '44px', height: '44px' }}
+          title="Apply Colormap"
+          className="truncate-text"
+        >
           Apply Colormap
         </Button>
       </Col>

src/pages/view/components/OperationPanel.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { Card } from 'antd';
+import { Flex } from 'antd';
 import FunctionArea from './FunctionArea';
 
 const OperationPanel = () => {
   return (
-    <Card title="Operation Panel" className="operation-panel">
-      <div>
-        <FunctionArea />
-      </div>
+    <Flex className="h-full" vertical>
+      <FunctionArea />
       <div>Image State Control</div>
       <div>Transfer Area</div>
-    </Card>
+    </Flex>
   );
 };
 

src/themes/truncateText.css

@@ -0,0 +1,6 @@
+.truncate-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}