fix(governance): empty div disrupts other page elements (#2855)

apps/token/src/app.tsx

@@ -8,6 +8,7 @@ import { AppLoader } from './app-loader';
 import { NetworkInfo } from '@vegaprotocol/network-info';
 import { BalanceManager } from './components/balance-manager';
 import { EthWallet } from './components/eth-wallet';
+import { AppLayout } from './components/page-templates/app-layout';
 import { TemplateSidebar } from './components/page-templates/template-sidebar';
 import { TransactionModal } from './components/transactions-modal';
 import { VegaWallet } from './components/vega-wallet';
@@ -88,14 +89,14 @@ const Web3Container = ({
             <AppLoader>
               <BalanceManager>
                 <>
-                  <div className="app w-full max-w-[1500px] mx-auto grid grid-rows-[min-content_min-content_1fr_min-content] min-h-full border-neutral-700 lg:border-l lg:border-r lg:text-body-large">
+                  <AppLayout>
                     <TemplateSidebar sidebar={sideBar}>
                       <AppRouter />
                     </TemplateSidebar>
                     <footer className="p-4 border-t border-neutral-700">
                       <NetworkInfo />
                     </footer>
-                  </div>
+                  </AppLayout>
                   <VegaWalletDialogs />
                   <TransactionModal />
                   <WithdrawalDialog />

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

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import type { ReactNode } from 'react';
+
+interface AppLayoutProps {
+  children: ReactNode;
+}
+export const AppLayout = ({ children }: AppLayoutProps) => {
+  const { isReadOnly } = useVegaWallet();
+  const AppLayoutClasses = classNames(
+    'app w-full max-w-[1500px] mx-auto grid min-h-full',
+    'border-neutral-700 lg:border-l lg:border-r',
+    'lg:text-body-large',
+    {
+      'grid-rows-[repeat(2,min-content)_1fr_min-content]': !isReadOnly,
+      'grid-rows-[repeat(3,min-content)_1fr_min-content]': isReadOnly,
+    }
+  );
+
+  return <div className={AppLayoutClasses}>{children}</div>;
+};

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

@@ -30,9 +30,7 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
       <Nav navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
       {isReadOnly ? (
         <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
-      ) : (
-        <div />
-      )}
+      ) : null}
       <div className="w-full border-b border-neutral-700 lg:grid lg:grid-rows-[1fr] lg:grid-cols-[1fr_450px]">
         <main className="col-start-1 p-4">{children}</main>
         <aside className="col-start-2 row-start-1 row-span-2 hidden lg:block p-4 bg-banner bg-contain border-l border-neutral-700">