Mobile CSS

Author: davidramirezm30

apps/frontend/src/app/(app)/(site)/billing/page.tsx

@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 export default async function Page() {
   return (
-    <div className="bg-newBgColorInner flex-1 flex-col flex p-[20px] gap-[12px]">
+    <div className="bg-newBgColorInner flex-1 flex-col flex p-[12px] md:p-[20px] gap-[8px] md:gap-[12px]">
       <BillingComponent />
     </div>
   );

apps/frontend/src/app/(app)/(site)/integrations/social/layout.tsx

@@ -9,7 +9,7 @@ export default async function IntegrationLayout({
 
   return (
     <div className="bg-newBgColorInner p-[20px] flex flex-col transition-all flex-1">
-      <div className="text-6xl text-center mt-[50px]">
+      <div className="text-3xl md:text-6xl text-center mt-[50px]">
         {t('adding_channel_redirecting_you', 'Adding channel, Redirecting You')}
         {children}
       </div>

apps/frontend/src/app/(app)/auth/layout.tsx

@@ -15,13 +15,13 @@ export default async function AuthLayout({
   const t = await getT();
 
   return (
-    <div className="bg-[#0E0E0E] flex flex-1 p-[12px] gap-[12px] min-h-screen w-screen text-white">
+    <div className="bg-[#0E0E0E] flex flex-1 p-[12px] gap-[12px] min-h-screen w-full text-white">
       {/*<style>{`html, body {overflow-x: hidden;}`}</style>*/}
       <ReturnUrlComponent />
-      <div className="flex flex-col py-[40px] px-[20px] flex-1 lg:w-[600px] lg:flex-none rounded-[12px] text-white p-[12px] bg-[#1A1919]">
-        <div className="w-full max-w-[440px] mx-auto justify-center gap-[20px] h-full flex flex-col text-white">
+      <div className="flex flex-col py-[40px] px-[20px] md:px-[40px] flex-1 lg:w-[600px] lg:flex-none rounded-[12px] text-white bg-[#1A1919] overflow-y-auto">
+        <div className="w-full max-w-[440px] mx-auto justify-center gap-[20px] h-fit min-h-full flex flex-col text-white py-4">
           <LogoTextComponent />
-          <div className="flex">{children}</div>
+          <div className="flex flex-col flex-1">{children}</div>
         </div>
       </div>
       <div className="text-[36px] flex-1 pt-[88px] hidden lg:flex flex-col items-center">

apps/frontend/src/app/(app)/layout.tsx

@@ -73,9 +73,9 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
           transloadit={
             process.env.TRANSLOADIT_AUTH && process.env.TRANSLOADIT_TEMPLATE
               ? [
-                  process.env.TRANSLOADIT_AUTH!,
-                  process.env.TRANSLOADIT_TEMPLATE!,
-                ]
+                process.env.TRANSLOADIT_AUTH!,
+                process.env.TRANSLOADIT_TEMPLATE!,
+              ]
               : []
           }
         >