feat: switch to new dialog gutter

app/components/Dialog.tsx

@@ -31,7 +31,7 @@ interface GutterProps {
 
 function Gutter({ children }: GutterProps) {
 	return (
-		<div className="mt-6 flex justify-end gap-2 mt-6">
+		<div className="mt-6 flex justify-end gap-4 mt-6">
 			{children}
 		</div>
 	)

app/routes/dns/components/magic.tsx

@@ -27,7 +27,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 							Devices will no longer be accessible via your tailnet domain. The
 							search domain will also be disabled.
 						</Dialog.Text>
-						<div className="mt-6 flex justify-end gap-2 mt-6">
+						<Dialog.Gutter>
 							<Dialog.Action variant="cancel" onPress={close}>
 								Cancel
 							</Dialog.Action>
@@ -50,7 +50,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 							>
 								{isEnabled ? 'Disable' : 'Enable'} Magic DNS
 							</Dialog.Action>
-						</div>
+						</Dialog.Gutter>
 					</>
 				)}
 			</Dialog.Panel>

app/routes/dns/components/rename.tsx

@@ -60,7 +60,7 @@ export default function Modal({ name, disabled }: Properties) {
 								state={[newName, setNewName]}
 								className="my-2"
 							/>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -82,7 +82,7 @@ export default function Modal({ name, disabled }: Properties) {
 								>
 									Rename
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</>
 					)}
 				</Dialog.Panel>

app/routes/dns/dialogs/dns.tsx

@@ -82,7 +82,7 @@ export default function AddDNS({ records }: Props) {
 									address <Code>{ip}</Code> already exists.
 								</p>
 							) : undefined}
-							<div className="mt-6 flex justify-end gap-2 mt-8">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -93,7 +93,7 @@ export default function AddDNS({ records }: Props) {
 								>
 									Add
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}

app/routes/dns/dialogs/nameserver.tsx

@@ -139,14 +139,14 @@ export default function AddNameserver({ nameservers }: Props) {
 									</Dialog.Text>
 								</>
 							) : undefined}
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Add
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}

app/routes/machines/dialogs/delete.tsx

@@ -32,7 +32,7 @@ export default function Delete({ machine, state }: DeleteProps) {
 						>
 							<input type="hidden" name="_method" value="delete" />
 							<input type="hidden" name="id" value={machine.id} />
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -48,7 +48,7 @@ export default function Delete({ machine, state }: DeleteProps) {
 								>
 									Remove
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}

app/routes/machines/dialogs/expire.tsx

@@ -31,7 +31,7 @@ export default function Expire({ machine, state }: ExpireProps) {
 						>
 							<input type="hidden" name="_method" value="expire" />
 							<input type="hidden" name="id" value={machine.id} />
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -47,7 +47,7 @@ export default function Expire({ machine, state }: ExpireProps) {
 								>
 									Expire
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}

app/routes/machines/dialogs/move.tsx

@@ -55,14 +55,14 @@ export default function Move({ machine, state, magic, users }: MoveProps) {
 									.
 								</p>
 							) : undefined}
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Change owner
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}

app/routes/machines/dialogs/new.tsx

@@ -81,7 +81,7 @@ export default function New(data: NewProps) {
 										</Select.Item>
 									))}
 								</Select>
-								<div className="mt-6 flex justify-end gap-2 mt-6">
+								<Dialog.Gutter>
 									<Dialog.Action variant="cancel" onPress={close}>
 										Cancel
 									</Dialog.Action>
@@ -96,7 +96,7 @@ export default function New(data: NewProps) {
 										)}
 										Register
 									</Dialog.Action>
-								</div>
+								</Dialog.Gutter>
 							</fetcher.Form>
 						</>
 					)}

app/routes/machines/dialogs/rename.tsx

@@ -62,14 +62,14 @@ export default function Rename({ machine, state, magic }: RenameProps) {
 									</p>
 								)
 							) : undefined}
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Rename
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}

app/routes/machines/dialogs/routes.tsx

@@ -159,7 +159,7 @@ export default function Routes({ machine, routes, state }: RoutesProps) {
 								</div>
 							)}
 						</div>
-						<div className="mt-6 flex justify-end gap-2 mt-6">
+						<Dialog.Gutter>
 							<Dialog.Action
 								variant="cancel"
 								isDisabled={fetcher.state === 'submitting'}
@@ -167,7 +167,7 @@ export default function Routes({ machine, routes, state }: RoutesProps) {
 							>
 								Close
 							</Dialog.Action>
-						</div>
+						</Dialog.Gutter>
 					</>
 				)}
 			</Dialog.Panel>

app/routes/machines/dialogs/tags.tsx

@@ -130,14 +130,14 @@ export default function Tags({ machine, state }: TagsProps) {
 									</Button>
 								</div>
 							</div>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Save
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}

app/routes/settings/dialogs/expire.tsx

@@ -33,7 +33,7 @@ export default function ExpireKey({ authKey }: Props) {
 								from being used to authenticate new devices. This action cannot
 								be undone.
 							</Dialog.Text>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -52,7 +52,7 @@ export default function ExpireKey({ authKey }: Props) {
 									)}
 									Expire
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</fetcher.Form>
 					</>
 				)}

app/routes/settings/dialogs/new.tsx

@@ -124,7 +124,7 @@ export default function AddPreAuthKey(data: Props) {
 								name="ephemeral"
 								value={ephemeral.toString()}
 							/>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -138,7 +138,7 @@ export default function AddPreAuthKey(data: Props) {
 									)}
 									Generate
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</fetcher.Form>
 					</>
 				)}

app/routes/users/dialogs/add.tsx

@@ -45,14 +45,14 @@ export default function Add({ magic }: Props) {
 								state={[username, setUsername]}
 								className="my-2"
 							/>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Create
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}