[AI] What to change: The container that opens when you tap “End ticket” within a s...

src/components/drawers/end-ticket-drawer.tsx

@@ -47,6 +47,7 @@ export function EndTicketDrawer({ isOpen, onClose, onEndTicket, timeEntries = []
       isOpen={isOpen}
       onClose={onClose}
       title="End ticket"
+      footerClassName="border-t-0"
       footer={
         <div className="flex gap-3">
           <Button variant="outline" onClick={onClose} className="flex-1">
@@ -60,7 +61,7 @@ export function EndTicketDrawer({ isOpen, onClose, onEndTicket, timeEntries = []
     >
       <div className="flex-1 p-6 space-y-6 overflow-auto">
         <div>
-          <h3 className="font-medium text-foreground mb-4">How did the support go?</h3>
+          <h3 className="text-sm font-medium text-foreground mb-4">How did the support go?</h3>
           <RadioGroup value={supportOutcome} onValueChange={setSupportOutcome}>
             <div className="flex items-center space-x-2">
               <RadioGroupItem value="able-to-help" id="able-to-help" />
@@ -79,13 +80,13 @@ export function EndTicketDrawer({ isOpen, onClose, onEndTicket, timeEntries = []
         </div>
 
         <div>
-          <h3 className="font-medium text-foreground mb-4">Logged time</h3>
+          <h3 className="text-sm font-medium text-foreground mb-4">Logged time</h3>
           {timeEntries.length > 0 ? (
             <div className="space-y-3">
               {timeEntries.map((entry) => {
                 const formatted = formatTimeEntry(entry)
                 return (
-                  <div key={entry.id} className="py-2 border-b border-border">
+                  <div key={entry.id} className="py-2">
                     <div className="flex items-center justify-between mb-1">
                       <div className="flex items-center gap-3">
                         <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
@@ -113,7 +114,7 @@ export function EndTicketDrawer({ isOpen, onClose, onEndTicket, timeEntries = []
         </div>
 
         <div className="bg-muted/50 rounded-lg p-4 border border-border">
-          <h4 className="font-medium text-foreground mb-2">Completed support</h4>
+          <h4 className="text-[13px] font-semibold text-foreground mb-2">Completed support</h4>
           <p className="text-sm text-muted-foreground leading-relaxed">
             If the support was completed successfully, log the time spent. If you were not able to help, consider
             adjusting any time spent, in accordance with the user&apos;s expectations and actual delivery.

src/components/ui/drawer-panel.tsx

@@ -23,6 +23,8 @@ export interface DrawerPanelProps {
   backdropClassName?: string
   /** Extra class for the panel container */
   className?: string
+  /** Extra class for the footer wrapper */
+  footerClassName?: string
 }
 
 /**
@@ -39,6 +41,7 @@ export function DrawerPanel({
   width = "w-96",
   backdropClassName = "bg-black/20",
   className,
+  footerClassName,
 }: DrawerPanelProps) {
   if (!isOpen) return null
 
@@ -82,7 +85,9 @@ export function DrawerPanel({
         )}
         <div className="flex-1 flex flex-col min-h-0">{children}</div>
         {footer != null && (
-          <div className="px-6 py-4 border-t border-border flex-shrink-0">{footer}</div>
+          <div className={cn("px-6 py-4 border-t border-border flex-shrink-0", footerClassName)}>
+            {footer}
+          </div>
         )}
       </div>
     </>

src/hooks/usePaymentConnect.ts

@@ -68,7 +68,8 @@ interface StartHelperArgs {
  */
 export function useStartHelperPaymentConnect() {
   return useMutation({
-    mutationFn: async ({ projectId }: StartHelperArgs = {}) => {
+    mutationFn: async (args: StartHelperArgs | void) => {
+      const projectId = args?.projectId
       const body: Record<string, unknown> = { scope: "user" }
       if (projectId) body.project_id = projectId
       const created = await supabase.functions.invoke("payments-create-account", { body })