chore: align viewing as banner

apps/trading/client-pages/fees/fees.tsx

@@ -1,27 +1,20 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
+import { TinyScroll } from '@vegaprotocol/ui-toolkit';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { FeesContainer } from '../../components/fees-container';
 import { useT } from '../../lib/use-t';
-import { usePageTitleStore } from '../../stores';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 export const Fees = () => {
   const t = useT();
   const title = t('Fees');
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-
-  useEffect(() => {
-    updateTitle(titlefy([title]));
-  }, [updateTitle, title]);
+  usePageTitle(title);
 
   return (
     <ErrorBoundary feature="fees">
-      <div className="container p-4 mx-auto">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+      <TinyScroll className="p-4 max-h-full overflow-auto">
+        <h1 className="md:px-4 pb-4 text-2xl">{title}</h1>
         <FeesContainer />
-      </div>
+      </TinyScroll>
     </ErrorBoundary>
   );
 };

apps/trading/client-pages/markets/markets-page.tsx

@@ -1,5 +1,3 @@
-import React, { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
 import {
   LocalStoragePersistTabs as Tabs,
   Tab,
@@ -7,7 +5,6 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { OpenMarkets } from './open-markets';
 import { Proposed } from './proposed';
-import { usePageTitleStore } from '../../stores';
 import { Closed } from './closed';
 import {
   DApp,
@@ -17,19 +14,14 @@ import {
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { MarketsSettings } from './markets-settings';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 export const MarketsPage = () => {
   const t = useT();
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-
   const governanceLink = useLinks(DApp.Governance);
   const externalLink = governanceLink(TOKEN_NEW_MARKET_PROPOSAL);
 
-  useEffect(() => {
-    updateTitle(titlefy([t('Markets')]));
-  }, [updateTitle, t]);
+  usePageTitle(t('Markets'));
 
   return (
     <div className="h-full pt-0.5 pb-3 px-1.5">

apps/trading/client-pages/portfolio/portfolio.tsx

@@ -1,10 +1,8 @@
 import { useEffect } from 'react';
 import type { ReactNode } from 'react';
 import { LayoutPriority } from 'allotment';
-import { titlefy } from '@vegaprotocol/utils';
 import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
-import { usePageTitleStore } from '../../stores';
 import {
   AccountsContainer,
   AccountsSettings,
@@ -41,6 +39,7 @@ import { WithdrawalsMenu } from '../../components/withdrawals-menu';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -69,14 +68,7 @@ const SidebarViewInitializer = () => {
 
 export const Portfolio = () => {
   const t = useT();
-
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-
-  useEffect(() => {
-    updateTitle(titlefy([t('Portfolio')]));
-  }, [updateTitle, t]);
+  usePageTitle(t('Portfolio'));
 
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
   const wrapperClasses = 'p-0.5 h-full max-h-full flex flex-col';

apps/trading/client-pages/rewards/rewards.tsx

@@ -1,24 +1,18 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
+import { TinyScroll } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
-import { usePageTitleStore } from '../../stores';
 import { ErrorBoundary } from '../../components/error-boundary';
-import { TinyScroll } from '@vegaprotocol/ui-toolkit';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 export const Rewards = () => {
   const t = useT();
   const title = t('Rewards');
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-  useEffect(() => {
-    updateTitle(titlefy([title]));
-  }, [updateTitle, title]);
+  usePageTitle(title);
+
   return (
     <ErrorBoundary feature="rewards">
       <TinyScroll className="p-4 max-h-full overflow-auto">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+        <h1 className="md:px-4 pb-4 text-2xl">{title}</h1>
         <RewardsContainer />
       </TinyScroll>
     </ErrorBoundary>

libs/proposals/src/components/protocol-upgrade-in-progress-notification.tsx

@@ -4,7 +4,6 @@ import {
   ExternalLink,
   Intent,
   NotificationBanner,
-  SHORT,
 } from '@vegaprotocol/ui-toolkit';
 import type { StoredNextProtocolUpgradeData } from '../lib';
 import {
@@ -70,7 +69,7 @@ export const ProtocolUpgradeInProgressNotification = () => {
   if (!upgradeInProgress) return null;
 
   return (
-    <NotificationBanner intent={Intent.Danger} className={SHORT}>
+    <NotificationBanner intent={Intent.Danger}>
       <div className="uppercase">
         {t('The network is being upgraded to {{vegaReleaseTag}}', {
           vegaReleaseTag,

libs/ui-toolkit/src/components/notification-banner/notification-banner.tsx

@@ -4,8 +4,6 @@ import { Intent } from '../../utils/intent';
 import { Icon, VegaIcon, VegaIconNames } from '../icon';
 import type { HTMLAttributes } from 'react';
 
-export const SHORT = '!px-1 !py-1 min-h-fit';
-
 interface NotificationBannerProps {
   intent?: Intent;
   children?: React.ReactNode;
@@ -23,7 +21,7 @@ export const NotificationBanner = ({
   return (
     <div
       className={classNames(
-        'flex items-center border-b px-2',
+        'flex items-center border-b pl-3 pr-2',
         'text-xs leading-tight font-normal',
         {
           'bg-vega-light-100 dark:bg-vega-dark-100 ': intent === Intent.None,

libs/ui-toolkit/src/components/viewing-as-user/index.tsx

@@ -1,4 +1,4 @@
-import { NotificationBanner, SHORT } from '../notification-banner';
+import { NotificationBanner } from '../notification-banner';
 import { Intent } from '../../utils/intent';
 import { TradingButton } from '../trading-button';
 import { useT } from '../../use-t';
@@ -23,7 +23,7 @@ export const ViewingAsBanner = ({
 }: ViewingAsBannerProps) => {
   const t = useT();
   return (
-    <NotificationBanner intent={Intent.None} className={SHORT}>
+    <NotificationBanner>
       <div className="flex items-baseline justify-between">
         <span data-testid="view-banner">
           {t('Viewing as Vega user: {{pubKey}}', {