fix: make banner responsive and cover entire app (#5934)

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/ui/components/top-banner/TopBanner.tsx

@@ -23,11 +23,11 @@ export function TopBanner(props: TopBannerProps) {
     <div
       data-testid="banner"
       className={classNames(
-        " z-30 flex min-h-[40px] w-full items-start justify-between gap-8 bg-gray-50 px-4 text-center sm:items-center",
+        "z-30 flex min-h-[40px] w-full items-start justify-between gap-8 bg-gray-50 py-2 px-4 text-center lg:items-center",
         variantClassName[variant]
       )}>
-      <div className="flex flex-1 items-center justify-center gap-2 p-1">
-        <p className="flex items-center justify-center gap-2 font-sans text-sm font-medium leading-4 text-gray-900">
+      <div className="flex flex-1 flex-col items-start justify-center gap-2 p-1 lg:flex-row lg:items-center">
+        <p className="flex flex-col items-start justify-center gap-2 text-left font-sans text-sm font-medium leading-4 text-gray-900 lg:flex-row lg:items-center">
           {["warning", "error"].includes(variant) && (
             <ExclamationIcon className="h-5 w-5 text-black" aria-hidden="true" />
           )}

packages/ui/v2/core/Shell.tsx

@@ -154,10 +154,10 @@ const Layout = (props: LayoutProps) => {
       {/* todo: only run this if timezone is different */}
       <TimezoneChangeDialog />
       <div className="h-screen overflow-hidden">
+        <TeamsUpgradeBanner />
         <div className="flex h-screen overflow-hidden" data-testid="dashboard-shell">
           {props.SidebarContainer || <SideBarContainer />}
           <div className="flex w-0 flex-1 flex-col overflow-hidden">
-            <TeamsUpgradeBanner />
             <ImpersonatingBanner />
             <MainContainer {...props} />
           </div>