feat: wrapping controls

src/app/tools/compare/page.tsx

@@ -529,9 +529,9 @@ export default function Page() {
 
   return (
     <PageWrapper color="crimson" size="100%">
-      <Flex justify="center" gap="2" align="center" mt="4" direction="column">
+      <Flex justify="center" gap="4" align="center" mt="4" direction="column">
         {(haveReactive || haveDynamicArmor || haveSpallLiner) && (
-          <Callout.Root mb="4">
+          <Callout.Root>
             <Callout.Icon>
               <InfoCircledIcon />
             </Callout.Icon>
@@ -542,13 +542,13 @@ export default function Page() {
           </Callout.Root>
         )}
 
-        <Flex gap="2">
+        <Flex gap="2" wrap="wrap" justify="center">
           <Dialog.Root
             open={addTankDialogOpen}
             onOpenChange={setAddTankDialogOpen}
           >
             <Dialog.Trigger>
-              <Button>
+              <Button variant="soft">
                 <PlusIcon /> Add
               </Button>
             </Dialog.Trigger>
@@ -607,7 +607,6 @@ export default function Page() {
           >
             <TrashIcon /> Clear
           </Button>
-        </Flex>
 
           <SegmentedControl.Root
             value={deltaMode}
@@ -628,6 +627,7 @@ export default function Page() {
             </SegmentedControl.Item>
           </SegmentedControl.Root>
         </Flex>
+      </Flex>
 
       {members.length > 0 && (
         <Flex justify="center">