fix: resolve AI assistant button overlap and mobile padding on Teams page (#24286)

* Fix padding in UpgradeTip component

Adjusted padding in UpgradeTip component.

* Adjust bottom positioning of main navigation component

* Adjust bottom positioning for main navigation

apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx

@@ -45,7 +45,7 @@ export function ShellMainAppDir(props: LayoutProps) {
                   className={classNames(
                     props.backPath
                       ? "relative"
-                      : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
+                      : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-32 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
                     "flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
                   )}>
                   {props.CTA}

packages/features/tips/UpgradeTip.tsx

@@ -54,7 +54,7 @@ export function UpgradeTip({
             alt={title}
           />
         </picture>
-        <div className="relative my-4 px-8 sm:px-14">
+        <div className="relative my-4 px-8 pb-4 sm:px-14">
           <h1 className={classNames("font-cal mt-4 text-3xl")}>{title}</h1>
           <p className={classNames("mb-8 mt-4 max-w-sm")}>{description}</p>
           {buttons}