From c87f9964c4eb0c51f424ef01571825225497ab03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Tue, 13 Feb 2024 11:52:25 +0100
Subject: [PATCH] BillEditForm: responsive width, white barcoder outline

---
 app/ui/BillEditForm.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx
index 9565fd3..cf3253b 100644
--- a/app/ui/BillEditForm.tsx
+++ b/app/ui/BillEditForm.tsx
@@ -93,7 +93,9 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
                     </Link>
                     : null
                 }
-                <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered max-w-sm w-full file-input-xs my-2 block" onChange={billAttachment_handleChange} />
+                <div className="flex">
+                    <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered grow file-input-xs my-2 block" onChange={billAttachment_handleChange} />
+                </div>
                 <div id="status-error" aria-live="polite" aria-atomic="true">
                     {state.errors?.billAttachment &&
                     state.errors.billAttachment.map((error: string) => (
@@ -109,10 +111,10 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
                             <input id="billPaid" name="billPaid" type="checkbox" className="toggle toggle-success" defaultChecked={paid} onChange={billPaid_handleChange} />
                         </label>
                     </div>
-                    <div className="form-control">
-                        <label className="cursor-pointer label">
+                    <div className="form-control grow">
+                        <label className="cursor-pointer label grow">
                             <span className="label-text mx-[1em]">Amount</span> 
-                            <input type="text" id="payedAmount" name="payedAmount" className="input input-bordered text-right w-[9.2em]" placeholder="0.00" value={payedAmount} onFocus={e => e.target.select()} onChange={payedAmount_handleChange} />
+                            <input type="text" id="payedAmount" name="payedAmount" className="input input-bordered text-right w-[5em] grow" placeholder="0.00" value={payedAmount} onFocus={e => e.target.select()} onChange={payedAmount_handleChange} />
                         </label>
                     </div>
                 </div>
@@ -128,11 +130,9 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
                 <input type="hidden" name="barcodeImage" value={barcodeImage} />
                 {
                     barcodeImage ?
-                    <div className="form-control w-[325px] p-1">
-                        <label className="cursor-pointer label p-0">
-                            <span>
-                                <img src={barcodeImage} className="max-w-[325px]" />
-                            </span>
+                    <div className="form-control p-1">
+                        <label className="cursor-pointer label p-2 grow bg-white">
+                            <img src={barcodeImage} className="grow sm:max-w-[350px]" />
                         </label>
                     </div> : null
                 }