Skip to content

fix(ui): responsive two-pane and upload dropzone layout on mobile #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aghyad97 merged 1 commit into from
Sep 1, 2026
Merged

fix(ui): responsive two-pane and upload dropzone layout on mobile #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/AsciiArt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,8 +263,8 @@ export default function AsciiArt() {
</div>
) : (
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
{t("dropImageHere")}
Expand Down
4 changes: 2 additions & 2 deletions src/components/AudioTranscriber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,8 +165,8 @@ export default function AudioTranscriber() {
</div>
) : (
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<UploadIcon className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<UploadIcon className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
{t("dropHere")}
Expand Down
12 changes: 6 additions & 6 deletions src/components/BgRemoval.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ export default function BgRemoval() {
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Upload Area */}
<Card className="min-h-[16rem] col-span-1 md:col-span-2">
<Card className="min-h-48 sm:min-h-[16rem] col-span-1 md:col-span-2">
<FileDropzone
onFiles={onDrop}
accept={{
Expand All @@ -383,16 +383,16 @@ export default function BgRemoval() {
exit={{ opacity: 0, y: -10 }}
className="text-center"
>
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-2">
<h3 className="text-base sm:text-lg font-semibold mb-1 sm:mb-2">
{t("dropImagesHere")}
</h3>
<p className="text-muted-foreground text-sm">
<p className="text-muted-foreground text-xs sm:text-sm">
{t("supportedFormats")}
</p>
<p className="text-muted-foreground text-xs mt-2 max-w-md mx-auto">
<p className="text-muted-foreground text-xs mt-1 sm:mt-2 max-w-md mx-auto">
{t("privacyNote")}
</p>
{modelBytes !== null && (
Expand Down
4 changes: 2 additions & 2 deletions src/components/ColorCorrection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,8 @@ export default function ColorCorrection() {
}
`}
>
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<div className="text-center">
<h3 className="text-lg font-semibold mb-1">
Expand Down
18 changes: 9 additions & 9 deletions src/components/CompressVideo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ export default function CompressVideo() {
)}
<Card className="p-6 shadow-none">
{video ? (
<div className="w-full h-64 relative">
<div className="w-full h-52 sm:h-64 relative">
<video
src={video.url}
controls
Expand All @@ -238,8 +238,8 @@ export default function CompressVideo() {
}}
multiple={false}
className={({ isDragActive }) => `
h-64 rounded-lg border-2 border-dashed
flex flex-col items-center justify-center space-y-4 p-8
min-h-48 sm:h-64 rounded-lg border-2 border-dashed
flex flex-col items-center justify-center space-y-3 sm:space-y-4 p-4 sm:p-8
cursor-pointer transition-[border-color,background-color] duration-150
${
isDragActive
Expand All @@ -249,13 +249,13 @@ export default function CompressVideo() {
`}
>
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
<h3 className="text-base sm:text-lg font-semibold mb-1">
{t("dropVideoHere")}
</h3>
<p className="text-sm text-muted-foreground">
<p className="text-xs sm:text-sm text-muted-foreground max-w-xs mx-auto">
{t("supportedFormats")}
</p>
</div>
Expand Down Expand Up @@ -353,8 +353,8 @@ export default function CompressVideo() {
</div>

<div className="space-y-4">
<Card className="p-6">
<div className="h-64 rounded-lg border-2 border-dashed border-muted-foreground flex items-center justify-center overflow-hidden">
<Card className="p-4 sm:p-6">
<div className="h-52 sm:h-64 rounded-lg border-2 border-dashed border-muted-foreground flex items-center justify-center overflow-hidden">
{outputUrl ? (
<video
src={outputUrl}
Expand Down
2 changes: 1 addition & 1 deletion src/components/GifMaker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,7 @@ export default function GifMaker() {
{/* Right: result */}
<div className="space-y-4">
<Card className="p-6">
<div className="min-h-64 rounded-lg border-2 border-dashed border-muted-foreground flex items-center justify-center p-4">
<div className="min-h-48 sm:min-h-64 rounded-lg border-2 border-dashed border-muted-foreground flex items-center justify-center p-4">
{result ? (
<div className="w-full text-center space-y-2">
<img
Expand Down
4 changes: 2 additions & 2 deletions src/components/ImageCaptioner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,8 @@ export default function ImageCaptioner() {
/>
) : (
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
{t("dropImageHere")}
Expand Down
4 changes: 2 additions & 2 deletions src/components/ImageColorPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,8 +309,8 @@ export default function ImageColorPicker() {
}
>
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
{t("dropImageHere")}
Expand Down
4 changes: 2 additions & 2 deletions src/components/ImageCompression.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,8 +388,8 @@ export default function ImageCompression({
`}
>
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
{t("dropImageHere")}
Expand Down
18 changes: 9 additions & 9 deletions src/components/ImageConverter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ export default function ImageConverter({
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<Card className="p-6 shadow-none">
<Card className="p-4 sm:p-6 shadow-none">
<FileDropzone
onFiles={onDrop}
accept={
Expand Down Expand Up @@ -262,8 +262,8 @@ export default function ImageConverter({
}
multiple={false}
className={({ isDragActive }) => `
h-64 rounded-lg border-2 border-dashed
flex flex-col items-center justify-center space-y-4 p-8
min-h-48 sm:h-64 rounded-lg border-2 border-dashed
flex flex-col items-center justify-center space-y-3 sm:space-y-4 p-4 sm:p-8
cursor-pointer transition-[border-color,background-color] duration-150
${
isDragActive
Expand All @@ -286,13 +286,13 @@ export default function ImageConverter({
</div>
) : (
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
<h3 className="text-base sm:text-lg font-semibold mb-1">
{t("dropImageHere")}
</h3>
<p className="text-sm text-muted-foreground">
<p className="text-xs sm:text-sm text-muted-foreground max-w-xs mx-auto">
{heicEmphasis ? t("heicDropHint") : t("supportedFormats")}
</p>
</div>
Expand Down Expand Up @@ -341,8 +341,8 @@ export default function ImageConverter({
</div>

<div className="space-y-4">
<Card className="p-6">
<div className="h-64 rounded-lg border-2 border-dashed border-muted-foreground flex items-center justify-center">
<Card className="p-4 sm:p-6">
<div className="h-52 sm:h-64 rounded-lg border-2 border-dashed border-muted-foreground flex items-center justify-center">
{convertedImage ? (
<div className="w-full h-full relative">
<img
Expand Down
8 changes: 4 additions & 4 deletions src/components/ImageToText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,8 +310,8 @@ export default function ImageToText() {
</div>
) : image ? (
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<FileText className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<FileText className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1 break-all px-2">
{image.name}
Expand All @@ -320,8 +320,8 @@ export default function ImageToText() {
</div>
) : (
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
{t("dropImageHere")}
Expand Down
4 changes: 2 additions & 2 deletions src/components/ImageUpscaler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,8 @@ export default function ImageUpscaler() {
</div>
) : (
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
{t("dropImageHere")}
Expand Down
4 changes: 2 additions & 2 deletions src/components/MemeGenerator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,8 +308,8 @@ export default function MemeGenerator() {
}
`}
>
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<div className="text-center">
<h3 className="text-lg font-semibold mb-1">
Expand Down
4 changes: 2 additions & 2 deletions src/components/ObjectCutout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,8 +247,8 @@ export default function ObjectCutout() {
}
>
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
{t("dropImageHere")}
Expand Down
4 changes: 2 additions & 2 deletions src/components/PhotoCensor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,8 +393,8 @@ export default function PhotoCensor() {
`}
>
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
{t("dropImageHere")}
Expand Down
2 changes: 1 addition & 1 deletion src/components/PhotoCollage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -570,7 +570,7 @@ export default function PhotoCollage() {

{/* Preview column */}
<div className="space-y-4">
<Card className="p-6 flex items-center justify-center min-h-64">
<Card className="p-4 sm:p-6 flex items-center justify-center min-h-48 sm:min-h-64">
{images.length > 0 ? (
<canvas
ref={canvasRef}
Expand Down
4 changes: 2 additions & 2 deletions src/components/ScreenshotBeautifier.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,8 +382,8 @@ export default function ScreenshotBeautifier() {
}
>
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">{t("dropImageHere")}</h3>
<p className="text-sm text-muted-foreground">{t("supportedFormats")}</p>
Expand Down
24 changes: 12 additions & 12 deletions src/components/VideoConverter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,13 +434,13 @@ export default function VideoConverter() {
</div>
)}

<Card className="p-6 shadow-none">
<Card className="p-4 sm:p-6 shadow-none">
{video ? (
<div className="w-full h-64 relative flex items-center justify-center">
<div className="w-full h-52 sm:h-64 relative flex items-center justify-center">
{inputPreviewFailed ? (
<div className="text-center px-4">
<Video className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
<p className="text-sm text-muted-foreground">
<Video className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-3 sm:mb-4 text-muted-foreground" />
<p className="text-xs sm:text-sm text-muted-foreground">
{t("inputPreviewUnavailable")}
</p>
</div>
Expand All @@ -464,8 +464,8 @@ export default function VideoConverter() {
}}
multiple={false}
className={({ isDragActive }) => `
h-64 rounded-lg border-2 border-dashed
flex flex-col items-center justify-center space-y-4 p-8
min-h-48 sm:h-64 rounded-lg border-2 border-dashed
flex flex-col items-center justify-center space-y-3 sm:space-y-4 p-4 sm:p-8
cursor-pointer transition-[border-color,background-color] duration-150
${
isDragActive
Expand All @@ -475,13 +475,13 @@ export default function VideoConverter() {
`}
>
<div className="text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
<Upload className="w-10 h-10 text-primary" />
<div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3 sm:mb-4">
<Upload className="w-6 h-6 sm:w-8 sm:h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-1">
<h3 className="text-base sm:text-lg font-semibold mb-1">
{t("dropVideoHere")}
</h3>
<p className="text-sm text-muted-foreground">
<p className="text-xs sm:text-sm text-muted-foreground max-w-xs mx-auto">
{t("supportedFormats")}
</p>
</div>
Expand Down Expand Up @@ -642,8 +642,8 @@ export default function VideoConverter() {
}
end={
<div className="space-y-4">
<Card className="p-6">
<div className="h-64 rounded-lg border-2 border-dashed border-muted-foreground flex items-center justify-center overflow-hidden">
<Card className="p-4 sm:p-6">
<div className="h-52 sm:h-64 rounded-lg border-2 border-dashed border-muted-foreground flex items-center justify-center overflow-hidden">
{outputPreview()}
</div>
</Card>
Expand Down
Loading
Loading