Added margin control to form

X-Lovable-Edit-ID: edt-f812883e-6f55-46a5-bac9-75e61c5d5bdf
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/forms/custom-form-builder.tsx

@@ -201,6 +201,7 @@ interface SavedTemplate {
   font_family: string;
   font_size_pt: number;
   line_height: number;
+  margin_inches?: number;
   signature_blocks: Array<{ name: string; title?: string }>;
   fields: FormFieldDef[];
   updated_at: string;
@@ -215,6 +216,15 @@ const LINE_HEIGHTS = [
   { value: 2.0, label: "2.0" },
 ];
 
+const MARGIN_OPTIONS = [
+  { value: 0.5, label: '0.5"' },
+  { value: 0.75, label: '0.75"' },
+  { value: 1.0, label: '1"' },
+  { value: 1.25, label: '1.25"' },
+  { value: 1.5, label: '1.5"' },
+  { value: 2.0, label: '2"' },
+];
+
 export function CustomFormBuilder() {
   const [title, setTitle] = useState("Official Notice");
   const [hideTitle, setHideTitle] = useState(false);
@@ -228,6 +238,7 @@ export function CustomFormBuilder() {
   const [fontFamily, setFontFamily] = useState("Bookman Old Style");
   const [fontSize, setFontSize] = useState(12);
   const [lineHeight, setLineHeight] = useState(1.5);
+  const [marginInches, setMarginInches] = useState(1.0);
 
   // Template management
   const [templates, setTemplates] = useState<SavedTemplate[]>([]);
@@ -289,14 +300,16 @@ export function CustomFormBuilder() {
     setTemplates((data ?? []) as unknown as SavedTemplate[]);
   };
 
-  // Apply font style + line height to editor DOM
+  // Apply font style + line height + page margin to editor DOM
   useEffect(() => {
     if (!editor) return;
     const el = editor.view.dom as HTMLElement;
     el.style.fontFamily = `"${fontFamily}", Georgia, serif`;
     el.style.fontSize = `${fontSize}pt`;
     el.style.lineHeight = String(lineHeight);
-  }, [editor, fontFamily, fontSize, lineHeight]);
+    const padPx = Math.round(marginInches * 96);
+    el.style.padding = `${padPx}px`;
+  }, [editor, fontFamily, fontSize, lineHeight, marginInches]);
 
   const insertVar = (key: string) => {
     if (!editor) return;
@@ -520,11 +533,11 @@ export function CustomFormBuilder() {
     const ctx = await getContext();
     const segments = getRenderedSegments();
     const doc = new jsPDF({ unit: "pt", format: "letter" });
-    const margin = 54;
+    const margin = Math.round(marginInches * 72);
     const pageW = doc.internal.pageSize.getWidth();
     const pageH = doc.internal.pageSize.getHeight();
     const maxW = pageW - margin * 2;
-    let y = 80;
+    let y = margin + 26;
 
     const fontDef = FONT_FAMILIES.find((f) => f.value === fontFamily);
     const pdfFont = fontDef?.pdf ?? "times";
@@ -861,7 +874,7 @@ export function CustomFormBuilder() {
           properties: {
             page: {
               size: { width: 12240, height: 15840 },
-              margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 },
+              margin: (() => { const m = Math.round(marginInches * 1440); return { top: m, right: m, bottom: m, left: m }; })(),
             },
           },
           children,
@@ -916,6 +929,7 @@ export function CustomFormBuilder() {
       font_family: fontFamily,
       font_size_pt: fontSize,
       line_height: lineHeight,
+      margin_inches: marginInches,
       signature_blocks: [],
       fields: formFields as any,
     };
@@ -954,6 +968,7 @@ export function CustomFormBuilder() {
     setFontFamily(t.font_family);
     setFontSize(t.font_size_pt);
     if (typeof t.line_height === "number" && t.line_height > 0) setLineHeight(t.line_height);
+    if (typeof t.margin_inches === "number" && t.margin_inches > 0) setMarginInches(t.margin_inches);
     editor.commands.setContent(t.body_html || "<p></p>");
     const loadedFields = Array.isArray(t.fields) ? t.fields : [];
     setFormFields(loadedFields);
@@ -1093,6 +1108,17 @@ export function CustomFormBuilder() {
                 </SelectContent>
               </Select>
             </div>
+            <div>
+              <Label className="text-xs">Margins</Label>
+              <Select value={String(marginInches)} onValueChange={(v) => setMarginInches(parseFloat(v))}>
+                <SelectTrigger className="w-[90px] h-9"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {MARGIN_OPTIONS.map((m) => (
+                    <SelectItem key={m.value} value={String(m.value)}>{m.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
           </div>
         </CardContent>
       </Card>

src/integrations/supabase/types.ts

@@ -961,6 +961,7 @@ export type Database = {
           hide_title: boolean
           id: string
           line_height: number
+          margin_inches: number
           name: string
           signature_blocks: Json
           title: string
@@ -977,6 +978,7 @@ export type Database = {
           hide_title?: boolean
           id?: string
           line_height?: number
+          margin_inches?: number
           name: string
           signature_blocks?: Json
           title?: string
@@ -993,6 +995,7 @@ export type Database = {
           hide_title?: boolean
           id?: string
           line_height?: number
+          margin_inches?: number
           name?: string
           signature_blocks?: Json
           title?: string

supabase/migrations/20260418030231_97cce1e8-ac07-42ff-93c7-84ae134b2c24.sql

@@ -0,0 +1 @@
+ALTER TABLE public.custom_form_templates ADD COLUMN IF NOT EXISTS margin_inches numeric NOT NULL DEFAULT 1.0;