feat(governance): full width Governance and Explorer header (#3453)

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

apps/explorer/src/app/routes/layout.tsx

@@ -38,14 +38,16 @@ const DialogsContainer = () => {
 export const Layout = () => {
   const isHome = Boolean(useMatch(Routes.HOME));
   const { ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();
+  const fixedWidthClasses = 'w-full max-w-[1500px] mx-auto';
+
   return (
     <>
       <div
         className={classNames(
-          'max-w-[1500px] min-h-[100vh]',
+          'min-h-screen',
           'mx-auto my-0',
           'grid grid-rows-[auto_1fr_auto] grid-cols-1',
-          'border-vega-light-200 dark:border-vega-dark-200 lg:border-l lg:border-r',
+          'border-vega-light-200 dark:border-vega-dark-200',
           'antialiased text-black dark:text-white',
           'overflow-hidden relative'
         )}
@@ -59,13 +61,13 @@ export const Layout = () => {
           )}
           <Header />
         </div>
-        <div>
+        <div className={fixedWidthClasses}>
           <main className="p-4">
             {!isHome && <BreadcrumbsContainer className="mb-4" />}
             <Outlet />
           </main>
         </div>
-        <div>
+        <div className={fixedWidthClasses}>
           <Footer />
         </div>
       </div>

apps/governance/src/components/page-templates/app-layout.tsx

@@ -1,15 +1,19 @@
 import classNames from 'classnames';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { ReactNode } from 'react';
+import { AnnouncementBanner } from '@vegaprotocol/announcements';
+import { Nav } from '../nav';
+import { Networks, useEnvironment } from '@vegaprotocol/environment';
+import React from 'react';
 
 interface AppLayoutProps {
   children: ReactNode;
 }
 export const AppLayout = ({ children }: AppLayoutProps) => {
+  const { VEGA_ENV, ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();
   const { isReadOnly } = useVegaWallet();
   const AppLayoutClasses = classNames(
-    'app w-full max-w-[1500px] mx-auto grid min-h-full',
+    'app w-full max-w-[1500px] mx-auto grid',
-    'border-neutral-700 lg:border-l lg:border-r',
     'lg:text-body-large',
     {
       'grid-rows-[repeat(2,min-content)_1fr_min-content]': !isReadOnly,
@@ -17,5 +21,18 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
     }
   );
 
-  return <div className={AppLayoutClasses}>{children}</div>;
+  return (
+    <div className="min-h-full">
+      <div className="lg:text-body-large">
+        {ANNOUNCEMENTS_CONFIG_URL && (
+          <AnnouncementBanner
+            app="governance"
+            configUrl={ANNOUNCEMENTS_CONFIG_URL}
+          />
+        )}
+        <Nav theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
+      </div>
+      <div className={AppLayoutClasses}>{children}</div>
+    </div>
+  );
 };

apps/governance/src/components/page-templates/template-sidebar.tsx

@@ -1,28 +1,16 @@
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { ViewingAsBanner } from '@vegaprotocol/ui-toolkit';
-import { AnnouncementBanner } from '@vegaprotocol/announcements';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import React from 'react';
 
-import { Nav } from '../nav';
-
 export interface TemplateSidebarProps {
   children: React.ReactNode;
   sidebar: React.ReactNode[];
 }
 
 export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
-  const { VEGA_ENV, ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();
   const { isReadOnly, pubKey, disconnect } = useVegaWallet();
   return (
     <>
-      {ANNOUNCEMENTS_CONFIG_URL && (
-        <AnnouncementBanner
-          app="governance"
-          configUrl={ANNOUNCEMENTS_CONFIG_URL}
-        />
-      )}
-      <Nav theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
       {isReadOnly ? (
         <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
       ) : null}