From 0299ecc435066dcb77a792dcde11060fd10fe8f1 Mon Sep 17 00:00:00 2001
From: Aghyad <aghyad.alahmad97@gmail.com>
Date: Tue, 1 Sep 2026 19:36:36 +0400
Subject: [PATCH] fix(ui): ensure TwoPane and upload dropzones adapt cleanly on
 mobile

---
 src/components/AsciiArt.tsx                   |  4 ++--
 src/components/AudioTranscriber.tsx           |  4 ++--
 src/components/BgRemoval.tsx                  | 12 +++++-----
 src/components/ColorCorrection.tsx            |  4 ++--
 src/components/CompressVideo.tsx              | 18 +++++++-------
 src/components/GifMaker.tsx                   |  2 +-
 src/components/ImageCaptioner.tsx             |  4 ++--
 src/components/ImageColorPicker.tsx           |  4 ++--
 src/components/ImageCompression.tsx           |  4 ++--
 src/components/ImageConverter.tsx             | 18 +++++++-------
 src/components/ImageToText.tsx                |  8 +++----
 src/components/ImageUpscaler.tsx              |  4 ++--
 src/components/MemeGenerator.tsx              |  4 ++--
 src/components/ObjectCutout.tsx               |  4 ++--
 src/components/PhotoCensor.tsx                |  4 ++--
 src/components/PhotoCollage.tsx               |  2 +-
 src/components/ScreenshotBeautifier.tsx       |  4 ++--
 src/components/VideoConverter.tsx             | 24 +++++++++----------
 src/components/VideoEditor.tsx                |  4 ++--
 src/components/shared/TwoPane.module.css      | 11 +++------
 .../subtitle-studio/TranscribePanel.tsx       |  4 ++--
 21 files changed, 71 insertions(+), 76 deletions(-)

diff --git a/src/components/AsciiArt.tsx b/src/components/AsciiArt.tsx
index 32654697..d09b5fee 100644
--- a/src/components/AsciiArt.tsx
+++ b/src/components/AsciiArt.tsx
@@ -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")}
diff --git a/src/components/AudioTranscriber.tsx b/src/components/AudioTranscriber.tsx
index 0eae3b45..1a5447f0 100644
--- a/src/components/AudioTranscriber.tsx
+++ b/src/components/AudioTranscriber.tsx
@@ -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")}
diff --git a/src/components/BgRemoval.tsx b/src/components/BgRemoval.tsx
index ebd1dcc4..d2a902f6 100644
--- a/src/components/BgRemoval.tsx
+++ b/src/components/BgRemoval.tsx
@@ -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={{
@@ -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 && (
diff --git a/src/components/ColorCorrection.tsx b/src/components/ColorCorrection.tsx
index b5c0a75a..adb0b25b 100644
--- a/src/components/ColorCorrection.tsx
+++ b/src/components/ColorCorrection.tsx
@@ -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">
diff --git a/src/components/CompressVideo.tsx b/src/components/CompressVideo.tsx
index 6a6a935f..43a47903 100644
--- a/src/components/CompressVideo.tsx
+++ b/src/components/CompressVideo.tsx
@@ -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
@@ -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
@@ -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>
@@ -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}
diff --git a/src/components/GifMaker.tsx b/src/components/GifMaker.tsx
index 08e9a524..fc7f6fe3 100644
--- a/src/components/GifMaker.tsx
+++ b/src/components/GifMaker.tsx
@@ -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
diff --git a/src/components/ImageCaptioner.tsx b/src/components/ImageCaptioner.tsx
index e7e45b37..e8aed87c 100644
--- a/src/components/ImageCaptioner.tsx
+++ b/src/components/ImageCaptioner.tsx
@@ -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")}
diff --git a/src/components/ImageColorPicker.tsx b/src/components/ImageColorPicker.tsx
index cde226a6..4051e589 100644
--- a/src/components/ImageColorPicker.tsx
+++ b/src/components/ImageColorPicker.tsx
@@ -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")}
diff --git a/src/components/ImageCompression.tsx b/src/components/ImageCompression.tsx
index 41c126b5..e911e6f6 100644
--- a/src/components/ImageCompression.tsx
+++ b/src/components/ImageCompression.tsx
@@ -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")}
diff --git a/src/components/ImageConverter.tsx b/src/components/ImageConverter.tsx
index d8ffaaeb..74068238 100644
--- a/src/components/ImageConverter.tsx
+++ b/src/components/ImageConverter.tsx
@@ -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={
@@ -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
@@ -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>
@@ -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
diff --git a/src/components/ImageToText.tsx b/src/components/ImageToText.tsx
index 7bde1a82..f969c6f9 100644
--- a/src/components/ImageToText.tsx
+++ b/src/components/ImageToText.tsx
@@ -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}
@@ -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")}
diff --git a/src/components/ImageUpscaler.tsx b/src/components/ImageUpscaler.tsx
index 27e851e6..1a1af902 100644
--- a/src/components/ImageUpscaler.tsx
+++ b/src/components/ImageUpscaler.tsx
@@ -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")}
diff --git a/src/components/MemeGenerator.tsx b/src/components/MemeGenerator.tsx
index 37c82687..8f76d775 100644
--- a/src/components/MemeGenerator.tsx
+++ b/src/components/MemeGenerator.tsx
@@ -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">
diff --git a/src/components/ObjectCutout.tsx b/src/components/ObjectCutout.tsx
index 02661a66..ea7feb16 100644
--- a/src/components/ObjectCutout.tsx
+++ b/src/components/ObjectCutout.tsx
@@ -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")}
diff --git a/src/components/PhotoCensor.tsx b/src/components/PhotoCensor.tsx
index 3380b0b1..c6ec07fa 100644
--- a/src/components/PhotoCensor.tsx
+++ b/src/components/PhotoCensor.tsx
@@ -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")}
diff --git a/src/components/PhotoCollage.tsx b/src/components/PhotoCollage.tsx
index 8d6b1100..db136e92 100644
--- a/src/components/PhotoCollage.tsx
+++ b/src/components/PhotoCollage.tsx
@@ -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}
diff --git a/src/components/ScreenshotBeautifier.tsx b/src/components/ScreenshotBeautifier.tsx
index 3ef61018..3ae25e20 100644
--- a/src/components/ScreenshotBeautifier.tsx
+++ b/src/components/ScreenshotBeautifier.tsx
@@ -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>
diff --git a/src/components/VideoConverter.tsx b/src/components/VideoConverter.tsx
index 2c813d96..a4b13366 100644
--- a/src/components/VideoConverter.tsx
+++ b/src/components/VideoConverter.tsx
@@ -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>
@@ -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
@@ -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>
@@ -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>
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 6a08f1c7..bac68865 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -518,8 +518,8 @@ export default function VideoEditor() {
                 `}
               >
                 <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("dropHere")}
diff --git a/src/components/shared/TwoPane.module.css b/src/components/shared/TwoPane.module.css
index 41bc644d..80fa5ec0 100644
--- a/src/components/shared/TwoPane.module.css
+++ b/src/components/shared/TwoPane.module.css
@@ -26,13 +26,8 @@
   }
 }
 
-/* Fallback for engines without container-query support: viewport stack. Applied
-   only where @container is unsupported (older browsers) — modern engines honour
-   the container rule above and ignore this being overridden at wide widths. */
-@supports not (container-type: inline-size) {
-  @media (max-width: 720px) {
-    .pane {
-      grid-template-columns: 1fr;
-    }
+@media (max-width: 720px) {
+  .pane {
+    grid-template-columns: 1fr;
   }
 }
diff --git a/src/components/subtitle-studio/TranscribePanel.tsx b/src/components/subtitle-studio/TranscribePanel.tsx
index 1d55fe25..a97c07e0 100644
--- a/src/components/subtitle-studio/TranscribePanel.tsx
+++ b/src/components/subtitle-studio/TranscribePanel.tsx
@@ -174,8 +174,8 @@ export function TranscribePanel({ onTranscribed }: TranscribePanelProps) {
           </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")}</h3>
             <p className="text-sm text-muted-foreground">