fix: improve PDF417 barcode generation and data handling

- Fix newline corruption: URL-encode hub3aText to prevent browser form submission from converting \n to \r\n
- Align with HUB3A specs: Set error correction level to 4 and pixel size to 4x3 for better barcode scanning reliability
- Fix barcode sizing: Add responsive width constraints (max-w-[35rem], sm:max-w-[25rem]) across all barcode displays
- Update package dependencies: Remove peer dependency flags

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/lib/actions/billActions.ts

@@ -153,7 +153,8 @@ export const updateOrAddBill = withUser(async (user: AuthenticatedUser, location
 
     const billPaid = formData.get('billPaid') === 'on';
     const billedTo = (formData.get('billedTo') as BilledTo) ?? BilledTo.Tenant;
-    const hub3aText = formData.get('hub3aText')?.valueOf() as string;
+    const hub3aTextEncoded = formData.get('hub3aText')?.valueOf() as string;
+    const hub3aText = hub3aTextEncoded ? decodeURIComponent(hub3aTextEncoded) : undefined;
 
     // update the bill in the mongodb
     const dbClient = await getDbClient();

app/ui/BillEditForm.tsx

@@ -198,12 +198,12 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
                             ))}
                     </div>
 
-                    <input type="hidden" name="hub3aText" value={hub3aText} />
+                    <input type="hidden" name="hub3aText" value={hub3aText ? encodeURIComponent(hub3aText) : ''} />
                     {
                         hub3aText ?
                             <div className="form-control p-1">
                                 <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
-                                    <Pdf417Barcode hub3aText={hub3aText} />
+                                    <Pdf417Barcode hub3aText={hub3aText} className="w-full max-w-[35rem] sm:max-w-[25rem]" />
                                 </label>
                                 <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
                             </div> : null

app/ui/Pdf417Barcode.tsx

@@ -3,17 +3,18 @@
 import { useState, useEffect, FC } from 'react';
 import { generateBarcode } from '../lib/pdf/pdf417';
 import { renderBarcode } from '../lib/pdf/renderBarcode';
-    
-export const Pdf417Barcode:FC<{hub3aText:string, className?: string, errorCorrectionLevel?: number}> = ({  hub3aText: hub3a_text, className, errorCorrectionLevel = 3}) => {
+
+export const Pdf417Barcode:FC<{hub3aText:string, className?: string }> = ({  hub3aText: hub3a_text, className }) => {
     const [bitmapData, setBitmapData] = useState<string | undefined>(undefined);
 
     console.log("Rendering Pdf417Barcode with hub3a_text:", hub3a_text);
 
     useEffect(() => {
         const aspectRatio = 3;
+        const errorCorrectionLevel = 4; // error correction 4 is common for HUB3A PDF417 barcodes
         
-        const barcodeMatrix = generateBarcode(hub3a_text, errorCorrectionLevel , aspectRatio);
-        const bitmap = renderBarcode(barcodeMatrix, 1, 1);
+        const barcodeMatrix = generateBarcode(hub3a_text, errorCorrectionLevel ?? 4 , aspectRatio);
+        const bitmap = renderBarcode(barcodeMatrix, 4, 3); // 4:3 block size is common for HUB3A PDF417 barcodes
         setBitmapData(bitmap);
     }, [hub3a_text]);
 

app/ui/ViewBillCard.tsx

@@ -111,7 +111,7 @@ export const ViewBillCard: FC<ViewBillCardProps> = ({ location, bill, shareId })
                     hub3aText ?
                         <div className="form-control p-1">
                             <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
-                                <Pdf417Barcode hub3aText={hub3aText} />
+                                <Pdf417Barcode hub3aText={hub3aText} className="w-full max-w-[35rem] sm:max-w-[25rem]" />
                             </label>
                             <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
                         </div> : null

app/ui/ViewLocationCard.tsx

@@ -153,7 +153,7 @@ export const ViewLocationCard: FC<ViewLocationCardProps> = ({ location, userSett
                                 <li><strong>{t("payment-reference-label")}</strong><pre className="inline pl-1">{paymentParams.PozivNaBroj}</pre></li>
                             </ul>
                             <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
-                                <Pdf417Barcode hub3aText={hub3aText} />
+                                <Pdf417Barcode hub3aText={hub3aText} className="w-full max-w-[35rem] sm:max-w-[25rem]" />
                             </label>
                         </>
                         : null