fix: make submit form responsive

src/app/components/submit-form.tsx

@@ -148,8 +148,8 @@ export default function SubmitForm() {
 	}, [qrBytesRaw]);
 
 	return (
-		<form onSubmit={handleSubmit} className="grid grid-cols-2">
+		<form onSubmit={handleSubmit} className="grid grid-cols-2 max-md:grid-cols-1">
-			<div className="p-4 flex flex-col gap-2">
+			<div className="p-4 flex flex-col gap-2 max-md:order-2">
 				<div className="flex justify-center gap-2">
 					<img
 						src={studioUrl}
@@ -221,15 +221,15 @@ export default function SubmitForm() {
 
 					<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
 				</fieldset>
+			</div>
 
-				<div className="flex justify-between items-center">
+			<div className="flex justify-between items-center px-4 min-md:col-start-2 max-md:order-3">
-					{error && <span className="text-red-400 font-semibold">Error: {error}</span>}
+				{error && <span className="text-red-400 font-bold">Error: {error}</span>}
 
 				<button type="submit" className="pill button w-min ml-auto mb-auto">
 					Submit
 				</button>
 			</div>
-			</div>
 		</form>
 	);
 }

src/app/components/submit/image-list.tsx

@@ -28,7 +28,7 @@ export default function ImageList({ files, setFiles }: Props) {
 		<DragDropContext onDragEnd={handleDragEnd}>
 			<Droppable droppableId="imageDroppable">
 				{(provided) => (
-					<div ref={provided.innerRef} {...provided.droppableProps} className="flex flex-col px-12">
+					<div ref={provided.innerRef} {...provided.droppableProps} className="flex flex-col px-12 max-lg:px-0 max-md:px-12 max-[32rem]:px-0">
 						{files.map((file, index) => (
 							<Draggable key={file.name} draggableId={file.name} index={index}>
 								{(provided) => (