fix: add extra padding on mobile (#4959)

Author: omBratteng

packages/shared/package.json

@@ -96,6 +96,7 @@
     "react-modal": "^3.14.3",
     "react-swipeable": "^7.0.1",
     "tailwindcss": "^3.4.14",
+    "tailwindcss-safe-area": "0.8.0",
     "ts-jest": "^26.5.4",
     "typescript": "5.6.3"
   },

packages/shared/src/features/onboarding/shared/FunnelStepCtaWrapper.tsx

@@ -57,12 +57,7 @@ export function FunnelStepCtaWrapper({
   return (
     <div className="relative flex flex-1 flex-col gap-4">
       <div className={classNames('flex-1', containerClassName)}>{children}</div>
-      <div
-        className="sticky mx-auto my-4 flex w-full max-w-md flex-col gap-4 px-4"
-        style={{
-          bottom: `max(env(safe-area-inset-bottom, 0), .5rem)`,
-        }}
-      >
+      <div className="sticky mx-auto my-4 flex w-full max-w-md flex-col gap-4 px-4 bottom-safe-or-2">
         {note}
         <Button
           className={classNames(className, cta?.animation, 'w-full')}

packages/shared/tailwind.config.ts

@@ -1,5 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { type Config } from 'tailwindcss';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import safeArea from 'tailwindcss-safe-area';
 import colors from './tailwind/colors';
 import boxShadow from './tailwind/boxShadow';
 import caret from './tailwind/caret';
@@ -252,7 +254,7 @@ export default {
     },
   },
   // eslint-disable-next-line global-require
-  plugins: [caret, typography, buttons],
+  plugins: [caret, typography, buttons, safeArea],
   corePlugins: {
     invert: false,
   },

packages/webapp/package.json

@@ -98,6 +98,7 @@
     "prettier": "^2.6.2",
     "serwist": "^9.0.9",
     "tailwindcss": "^3.4.14",
+    "tailwindcss-safe-area": "0.8.0",
     "ts-jest": "^26.5.4",
     "typescript": "5.6.3",
     "vercel": "^21.3.3"

packages/webapp/pages/opportunity/[id]/index.tsx

@@ -339,12 +339,12 @@ const JobPage = (): ReactElement => {
           className={{
             buttons: 'flex-1',
             container:
-              'fixed bottom-0 z-header flex min-h-14 w-full items-center gap-4 border-t border-border-subtlest-tertiary bg-background-default px-4 tablet:hidden',
+              'fixed bottom-0 z-header flex min-h-14 w-full items-center gap-4 border-t border-border-subtlest-tertiary bg-background-default px-4 pt-2 pb-safe-or-2 tablet:hidden',
           }}
           size={ButtonSize.Medium}
         />
       )}
-      <div className="mx-auto flex w-full max-w-[69.25rem] flex-col gap-4 laptop:flex-row">
+      <div className="z-0 mx-auto flex w-full max-w-[69.25rem] flex-col gap-4 pb-14 laptop:flex-row laptop:pb-0">
         <div className="h-full min-w-0 max-w-full flex-1 flex-shrink-0 rounded-16 border border-border-subtlest-tertiary">
           {/* Header */}
           <div className="flex min-h-14 items-center gap-4 border-b border-border-subtlest-tertiary p-3">