fix: Columns in Rule Editor don't have clear separation (#546)

Author: going-confetti

src/views/Generator/RuleEditor/CorrelationEditor.tsx

@@ -4,6 +4,7 @@ import {
   Flex,
   Grid,
   Heading,
+  Separator,
   Switch,
   Text,
   Tooltip,
@@ -59,7 +60,7 @@ export function CorrelationEditor() {
   }
 
   return (
-    <Grid columns="1fr 1fr" gap="3">
+    <Grid columns="1fr auto 1fr" gap="4">
       <Box>
         <Heading size="2" weight="medium" mb="2">
           Extractor
@@ -99,6 +100,7 @@ export function CorrelationEditor() {
           </Text>
         )}
       </Box>
+      <Separator orientation="vertical" size="4" decorative />
       <Box>
         <Flex justify="between" align="center">
           <Heading size="2" weight="medium" mb="2">

src/views/Generator/RuleEditor/ParameterizationEditor/ParameterizationEditor.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, Text } from '@radix-ui/themes'
+import { Box, Grid, Separator, Text } from '@radix-ui/themes'
 import { ValueEditor } from './ValueEditor'
 import { FilterField } from '../FilterField'
 import { SelectorField } from '../SelectorField'
@@ -9,11 +9,12 @@ export function ParameterizationEditor() {
       <Text size="2" as="p" mb="2" color="gray">
         Replace request data with variables or custom values.
       </Text>
-      <Grid columns="2" gap="3">
+      <Grid columns="1fr auto 1fr" gap="4">
         <Box>
           <FilterField field="filter" />
           <SelectorField field="selector" />
         </Box>
+        <Separator orientation="vertical" size="4" decorative />
         <Box>
           <ValueEditor />
         </Box>

src/views/Generator/RuleEditor/RuleEditor.tsx

@@ -123,7 +123,7 @@ export function RuleEditor({ rule }: RuleEditorProps) {
           </Flex>
         </StickyPanelHeader>
         <form onSubmit={handleSubmit(onSubmit)}>
-          <Box p="2" pr="4">
+          <Box p="2">
             {!rule.enabled && <RuleDisabledWarning />}
             <RuleEditorSwitch />
           </Box>