feat: add allowOther field to questions and update image upload to return data URIs

app/form/admin/client.tsx

@@ -31,6 +31,7 @@ interface Question {
   displayOrder: number;
   required: boolean;
   options: string[] | null;
+  allowOther: boolean;
 }
 
 interface FormEditorClientProps {
@@ -102,6 +103,7 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
         const formattedUpdates = questions.map(q => ({
           ...q,
           options: q.options === null ? [] : q.options,
+          allowOther: q.allowOther,
         }));
         await bulkUpdateQuestions(form.id, formattedUpdates);
         toast.success("Questions saved!");
@@ -338,6 +340,7 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                       height={200}
                       src={q.imageUrl}
                       alt={q.label}
+                      unoptimized
                       className="w-32 h-auto rounded-md border object-contain"
                     />
                     <Button
@@ -410,15 +413,29 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
               )}
 
               <div className="flex justify-between items-center pt-2 border-t border-border">
-                <div className="flex items-center space-x-2">
-                  <Switch
-                    id={`required-${q.id}`}
-                    checked={q.required}
-                    onCheckedChange={(checked) => handleUpdateQuestion(q.id, { required: checked })}
-                  />
-                  <Label htmlFor={`required-${q.id}`} className="text-sm font-normal text-muted-foreground">
-                    Required
-                  </Label>
+                <div className="flex items-center flex-wrap gap-6">
+                  <div className="flex items-center gap-2">
+                    <Switch
+                      id={`required-${q.id}`}
+                      checked={q.required}
+                      onCheckedChange={(checked) => handleUpdateQuestion(q.id, { required: checked })}
+                    />
+                    <Label htmlFor={`required-${q.id}`} className="text-sm font-normal text-muted-foreground">
+                      Required
+                    </Label>
+                  </div>
+                  {(q.type === "radio" || q.type === "checkbox") && (
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        id={`allowOther-${q.id}`}
+                        checked={q.allowOther}
+                        onCheckedChange={(checked) => handleUpdateQuestion(q.id, { allowOther: checked })}
+                      />
+                      <Label htmlFor={`allowOther-${q.id}`} className="text-sm font-normal text-muted-foreground">
+                        Add 'Other' option
+                      </Label>
+                    </div>
+                  )}
                 </div>
                 <Button
                   variant="ghost"

app/form/admin/result/[id]/client.tsx

@@ -122,13 +122,13 @@ export default function SubmissionDetailClient({
                   )}
                 </div>
                 {q.imageUrl && (
-                  <div className="relative max-w-full h-auto max-h-60 overflow-hidden rounded-md border inline-block shrink-0">
+                  <div className="relative w-24 h-24 overflow-hidden rounded-md border shrink-0">
                     <Image
-                      width={100}
-                      height={100}
                       src={q.imageUrl}
-                      alt={q.label}
-                      className="object-contain w-auto"
+                      alt="Question image"
+                      fill
+                      unoptimized
+                      className="object-cover"
                     />
                   </div>
                 )}