feat: stack limit options vertically

src/components/organisms/RightSidePanel.tsx

@@ -255,33 +255,42 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
           </Box>
         )}
         {showLimitOptions && (
-          <FormControl>
-            <FormLabel>
-              <h4>What is the maximum number of rows you want to extract?</h4>
-            </FormLabel>
-            <RadioGroup row value={limitType} onChange={(e) => updateLimitType(e.target.value as LimitType)} sx={{ width: '500px' }}>
-              <FormControlLabel value="10" control={<Radio />} label="10" />
-              <FormControlLabel value="100" control={<Radio />} label="100" />
-              <FormControlLabel value="custom" control={<Radio />} label="Custom" />
-              {limitType === 'custom' && (
-                <TextField
-                  type="number"
-                  value={customLimit}
-                  onChange={(e) => updateCustomLimit(e.target.value)}
-                  placeholder="Enter number"
-                  sx={{
-                    marginLeft: '10px',
-                    marginTop: '-3px',
-                    '& input': {
-                      padding: '10px',
-                    },
-                  }}
-                />
-              )}
-            </RadioGroup>
-          </FormControl>
-
+  <FormControl>
+    <FormLabel>
+      <h4>What is the maximum number of rows you want to extract?</h4>
+    </FormLabel>
+    <RadioGroup
+      value={limitType}
+      onChange={(e) => updateLimitType(e.target.value as LimitType)}
+      sx={{ 
+        display: 'flex', 
+        flexDirection: 'column',
+        width: '500px' 
+      }}
+    >
+      <FormControlLabel value="10" control={<Radio />} label="10" />
+      <FormControlLabel value="100" control={<Radio />} label="100" />
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <FormControlLabel value="custom" control={<Radio />} label="Custom" />
+        {limitType === 'custom' && (
+          <TextField
+            type="number"
+            value={customLimit}
+            onChange={(e) => updateCustomLimit(e.target.value)}
+            placeholder="Enter number"
+            sx={{
+              marginLeft: '10px',
+              '& input': {
+                padding: '10px',
+              },
+            }}
+          />
         )}
+      </div>
+    </RadioGroup>
+  </FormControl>
+)}
+
         {!getText && !getScreenshot && !getList && <Button variant="contained" onClick={startGetText}>Capture Text</Button>}
         {getText &&
           <>