trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make submit form responsive

Browse source
This commit is contained in:
trafficlunar 2025-04-06 22:59:44 +01:00
parent a1fcd46bda
commit 4460290e6b
2 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/app/components/submit-form.tsx
View file

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

2
src/app/components/submit/image-list.tsx
View file

@ -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) => (