From 4ac8ce39047acec2e8ebe64dca254541e789eaf4 Mon Sep 17 00:00:00 2001
From: Tim Hess <tim.hess@broadcom.com>
Date: Wed, 4 Sep 2024 14:15:54 -0500
Subject: [PATCH] show banner on mobile, keep content centered and reduce pill
 content spillage

---
 src/Client/Components/Banner.razor | 12 +++++-------
 src/Client/wwwroot/css/mobile.css  |  6 +-----
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/Client/Components/Banner.razor b/src/Client/Components/Banner.razor
index be76bdb..6eb1182 100644
--- a/src/Client/Components/Banner.razor
+++ b/src/Client/Components/Banner.razor
@@ -1,13 +1,11 @@
 <div class="banner">
 	<Href href="@Href" NewWindow="@NewWindow">
-		<div class="row no-gutters align-items-center">
-			<div class="col-2" style="margin: .7% 3% .7% 5%;max-width: 11%;">
-				<div class="sign rounded-pill special-link">
-				<div style="padding: 2px;">@BannerTypeName</div>
-			</div>
-			</div>
+		<div class="row no-gutters text-center" style="padding: 1% 0">
 			<div class="col desc">
-				@ChildContent
+                <div class="sign rounded-pill special-link text-center" style="min-width:125px;max-width:200px;display:inline-block;margin:10px;">
+                    <div style="padding: 4px 4px 0 4px;">@BannerTypeName</div>
+                </div>
+                @ChildContent
 			</div>
 		</div>
 	</Href>
diff --git a/src/Client/wwwroot/css/mobile.css b/src/Client/wwwroot/css/mobile.css
index 4b51b5f..5161d55 100644
--- a/src/Client/wwwroot/css/mobile.css
+++ b/src/Client/wwwroot/css/mobile.css
@@ -1,4 +1,4 @@
-@media (max-width: 576px) {
+@media (max-width: 576px) {
     .width-90 {
         max-width: 97%;
     }
@@ -100,10 +100,6 @@
         padding-right: 15px;
     }
 
-    .banner {
-        display: none;
-    }
-
     .docs-nav-col {
         top: 231px;
         width: 180px;