fix(docs-infra): make header full-width and panels full-width on mobile screens (#34188)

On events page the header was not able to take full width when body exceeds viewport width of the screen So made the below body go overflow-x auto and resources page was taking 80% of the width which is okay on desktop but on mobile it should take 100% width put a media quer for it.

Fixes #34163

PR Close #34188

aio/content/marketing/events.html

@@ -2,7 +2,7 @@
   <h1 class="banner-headline no-toc no-anchor">Events</h1>
 </header>
 
-<article>
+<article class="events-container">
   <p>Where we'll be presenting:</p>
   <table class="is-full-width">
     <thead>

aio/src/styles/1-layouts/_marketing-layout.scss

@@ -439,3 +439,7 @@ div[layout=row]{
 .page-features .marketing-banner {
   margin-bottom: 20px;
 }
+
+.events-container{
+  overflow-x: auto;
+}

aio/src/styles/2-modules/_resources.scss

@@ -1,5 +1,8 @@
 .showcase {
   width: 80%;
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 }
 
 .c-resource-nav {