style: refine shared UI primitives and management flows

src/app/(modules)/clients/components/ClientSheet.tsx

@@ -13,6 +13,7 @@ import { FormField, PhoneInput } from '@/components/form';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
+  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -71,12 +72,12 @@ export function ClientSheet({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-3xl">
-        <DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
-          <DialogTitle className="text-lg leading-none font-semibold tracking-tight">
+      <DialogContent className="sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>
             {clientId ? 'Edit Client' : 'Create Client'}
           </DialogTitle>
-          <DialogDescription className="text-sm">
+          <DialogDescription>
             Manage company and primary contact details.
           </DialogDescription>
         </DialogHeader>
@@ -86,7 +87,7 @@ export function ClientSheet({
           onSubmit={onSubmit}
           className="flex min-h-0 flex-1 flex-col"
         >
-          <div className="max-h-[58vh] space-y-5 overflow-y-auto px-6 py-4">
+          <DialogBody className="space-y-5">
             <div className="grid gap-4 md:grid-cols-2">
               <FormField
                 id="client-first-name"
@@ -240,9 +241,9 @@ export function ClientSheet({
                 />
               </FormField>
             </div>
-          </div>
+          </DialogBody>
 
-          <DialogFooter className="shrink-0 border-t px-6 py-4">
+          <DialogFooter>
             <Button
               type="button"
               variant="outline"