feat: vertical align

src/components/organisms/RightSidePanel.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, MenuItem, Paper, Stack, Tabs, Tab } from "@mui/material";
+import { Button, MenuItem, Paper, Stack, Tabs, Tab, Box } from "@mui/material";
 import { Dropdown as MuiDropdown } from '../atoms/DropdownMui';
 import styled from "styled-components";
 import { ActionSettings } from "../molecules/ActionSettings";
@@ -83,27 +83,29 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
         : null
       }
 
-      {!getText && !getScreenshot && (
+      <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px'}}>
-        <Button variant="contained" onClick={startGetText}>
+        {!getText && !getScreenshot && (
-          Capture Text
+          <Button variant="contained" onClick={startGetText}>
-        </Button>
+            Capture Text
-      )}
+          </Button>
-      {getText && (
+        )}
-        <Button variant="contained" onClick={stopGetText}>
+        {getText && (
-          Stop Capture Text
+          <Button variant="contained" onClick={stopGetText}>
-        </Button>
+            Stop Capture Text
-      )}
+          </Button>
+        )}
 
-      {!getText && !getScreenshot && (
+        {!getText && !getScreenshot && (
-        <Button variant="contained" onClick={startGetScreenshot}>
+          <Button variant="contained" onClick={startGetScreenshot}>
-          Capture Screenshot
+            Capture Screenshot
-        </Button>
+          </Button>
-      )}
+        )}
-      {getScreenshot && (
+        {getScreenshot && (
-        <Button variant="contained" onClick={stopGetScreenshot}>
+          <Button variant="contained" onClick={stopGetScreenshot}>
-          Stop Capture Screenshot
+            Stop Capture Screenshot
-        </Button>
+          </Button>
-      )}
+        )}
+      </Box>
     </Paper>
   );
 };