Improve responsiviness

Author: ZaikoXander

src/App.tsx

@@ -143,20 +143,20 @@ export default function App() {
   return (
     <main
       className={cn(
-        'flex h-screen flex-col items-center justify-center gap-40',
-        'bg-[#FFD700] pb-32',
+        'flex h-screen flex-col items-center justify-center sm:gap-40',
+        'bg-[#FFD700] pb-[env(safe-area-inset-bottom)] sm:pb-[calc(env(safe-area-inset-bottom)+8rem)]',
       )}
     >
       <h1
         className={cn(
-          'font-[Baloo] text-6xl font-bold text-[#333333] shadow-black',
-          'drop-shadow',
+          'font-[Baloo] text-xl font-bold text-[#333333] shadow-black sm:text-3xl md:text-4xl lg:text-6xl',
+          'pb-8 drop-shadow sm:pb-0',
         )}
       >
         {t('title')}
       </h1>
       <section className='flex flex-col items-center gap-12'>
-        <Timer className='mb-10' />
+        <Timer className='sm:mb-10' />
         <VolumeControl />
         <AudioOrVideoSourceInput
           onChange={handleAudioOrVideoSourceInputChange}
@@ -189,7 +189,7 @@ export default function App() {
         </MediaPlayer>
       </div>
       <a
-        className='absolute right-5 top-4'
+        className='absolute right-5 top-4 hidden sm:block'
         target='_blank'
         rel='noopener noreferrer'
         href='https://github.com/ZaikoXander/HoraDeSilencioInterrompido'

src/components/AudioOrVideoSourceInput/FileInputButton.tsx

@@ -39,7 +39,7 @@ export default function FileInputButton({ onChange }: FileInputButtonProps) {
   }
 
   return (
-    <div>
+    <div className='w-52 sm:w-full'>
       <input
         type='file'
         ref={inputRef}

src/components/AudioOrVideoSourceInput/YoutubeVideoUrlInput.tsx

@@ -37,7 +37,7 @@ export default function YoutubeVideoUrlInput({
       className={cn(
         'rounded border border-gray-300 px-4 py-2 font-[Inter] text-2xl',
         'font-semibold outline-none focus:border focus:border-blue-500',
-        'focus:ring-2 focus:ring-blue-500',
+        'w-64 focus:ring-2 focus:ring-blue-500 sm:w-full',
       )}
       placeholder={t('placeholder')}
       onChange={handleInputChange}

src/components/AudioOrVideoSourceInput/index.tsx

@@ -14,7 +14,7 @@ export default function AudioOrVideoSourceInput({
 
   return (
     <div className='flex flex-col gap-y-4'>
-      <div className='flex items-center justify-between gap-4 pr-4'>
+      <div className='flex items-center justify-between gap-4 sm:pr-4'>
         <FileInputButton onChange={onChange} />
         <span className='font-[Inter] text-2xl font-semibold'>
           {t('audioOrVideoSourceInputSpan')}

src/components/Button.tsx

@@ -19,7 +19,7 @@ export default function Button({
     <button
       type='button'
       className={cn(
-        'rounded bg-blue-500 px-4 py-2 font-[Inter] text-2xl font-bold',
+        'rounded bg-blue-500 px-4 py-2 font-[Inter] text-xl font-bold sm:text-2xl',
         'text-white shadow-sm shadow-black transition-all hover:bg-blue-600',
         'hover:text-gray-100 disabled:opacity-50 disabled:hover:bg-blue-500',
         'disabled:hover:text-white',