From 144d57adb2b1458c30f813e3f3c4cfa42b7eeda5 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Fri, 9 Dec 2022 00:12:55 +0530
Subject: [PATCH] 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 | 6 +++---
 packages/ui/v2/core/Shell.tsx                   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index 6e31b5db07..0a62d141aa 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/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" />
           )}
diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index df8b1753a9..c0f1e7a63d 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/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>