From e49792f7d265b2a45ad36ecaf9ad7151bfdf24b5 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 13 Oct 2023 17:47:20 +0200
Subject: [PATCH] fix(ui): layout content width

---
 frontend/app/components/Assist/AssistView.tsx                 | 2 +-
 frontend/app/components/Assist/RecordingsList/Recordings.tsx  | 2 +-
 frontend/app/components/Client/Client.tsx                     | 2 +-
 .../app/components/Dashboard/components/Alerts/AlertsView.tsx | 2 +-
 .../Dashboard/components/DashboardList/DashboardsView.tsx     | 2 +-
 .../Dashboard/components/DashboardModal/DashboardModal.tsx    | 2 +-
 .../Dashboard/components/DashboardView/DashboardView.tsx      | 2 +-
 .../Dashboard/components/MetricsView/MetricsView.tsx          | 2 +-
 frontend/app/components/FFlags/FFlagsList.tsx                 | 2 +-
 frontend/app/components/FFlags/FlagView/FlagView.tsx          | 2 +-
 frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx          | 4 ++--
 frontend/app/components/Onboarding/Onboarding.tsx             | 2 +-
 frontend/app/components/Overview/Overview.tsx                 | 2 +-
 13 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/app/components/Assist/AssistView.tsx b/frontend/app/components/Assist/AssistView.tsx
index 36e7b7137..5a345380a 100644
--- a/frontend/app/components/Assist/AssistView.tsx
+++ b/frontend/app/components/Assist/AssistView.tsx
@@ -5,7 +5,7 @@ import AssistSearchField from './AssistSearchField';
 
 function AssistView() {
   return (
-    <div className="w-full mx-auto" style={{ maxWidth: '1300px'}}>
+    <div className="w-full mx-auto" style={{ maxWidth: '1360px'}}>
       <AssistSearchField />
       <LiveSessionSearch />
       <div className="my-4" />
diff --git a/frontend/app/components/Assist/RecordingsList/Recordings.tsx b/frontend/app/components/Assist/RecordingsList/Recordings.tsx
index 652567f77..8650da09a 100644
--- a/frontend/app/components/Assist/RecordingsList/Recordings.tsx
+++ b/frontend/app/components/Assist/RecordingsList/Recordings.tsx
@@ -28,7 +28,7 @@ function Recordings(props: Props) {
   };
 
   return (
-    <div style={{ maxWidth: '1300px', margin: 'auto' }} className='bg-white rounded py-4 border'>
+    <div style={{ maxWidth: '1360px', margin: 'auto' }} className='bg-white rounded py-4 border'>
       <div className='flex items-center mb-4 justify-between px-6'>
         <div className='flex items-baseline mr-3'>
           <PageTitle title='Recordings' />
diff --git a/frontend/app/components/Client/Client.tsx b/frontend/app/components/Client/Client.tsx
index 7a4758808..45e7dfa08 100644
--- a/frontend/app/components/Client/Client.tsx
+++ b/frontend/app/components/Client/Client.tsx
@@ -52,7 +52,7 @@ export default class Client extends React.PureComponent {
       }
     } = this.props;
     return (
-      <div className='w-full mx-auto mb-8' style={{ maxWidth: '1300px' }}>
+      <div className='w-full mx-auto mb-8' style={{ maxWidth: '1360px' }}>
         {activeTab && this.renderActiveTab()}
       </div>
     );
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
index 1c313b067..d0ea74281 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
@@ -26,7 +26,7 @@ function AlertsView({ siteId }: IAlertsView) {
         return unmount;
       }, [history]);
     return (
-        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 border">
+        <div style={{ maxWidth: '1360px', margin: 'auto'}} className="bg-white rounded py-4 border">
             <div className="flex items-center mb-4 justify-between px-6">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Alerts" />
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
index f0c8b46ff..1c5f1ae46 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
@@ -5,7 +5,7 @@ import Header from './Header';
 
 function DashboardsView({ history, siteId }: { history: any; siteId: string }) {
   return (
-    <div style={{ maxWidth: '1300px', margin: 'auto' }} className="bg-white rounded py-4 border">
+    <div style={{ maxWidth: '1360px', margin: 'auto' }} className="bg-white rounded py-4 border">
       <Header history={history} siteId={siteId} />
       <DashboardList />
     </div>
diff --git a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
index 421a936bb..659b4a604 100644
--- a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
@@ -45,7 +45,7 @@ function DashboardModal(props: Props) {
         <div style={{ maxWidth: '85vw' }}>
             <div
                 className="border-r shadow p-4 h-screen"
-                style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', maxWidth: '1300px' }}
+                style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', maxWidth: '1360px' }}
             >
                 <div className="mb-6 flex items-end justify-between">
                     <div>
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index 0cde69517..3ea2ff765 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -75,7 +75,7 @@ function DashboardView(props: Props) {
 
   return (
     <Loader loading={loading}>
-      <div style={{ maxWidth: '1300px', margin: 'auto' }}>
+      <div style={{ maxWidth: '1360px', margin: 'auto' }}>
         {/* @ts-ignore */}
         <DashboardHeader renderReport={props.renderReport} siteId={siteId} dashboardId={dashboardId} />
 
diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
index e07fa6dab..fa7ce7019 100644
--- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
@@ -9,7 +9,7 @@ interface Props {
 }
 function MetricsView({ siteId }: Props) {
   return useObserver(() => (
-    <div style={{ maxWidth: '1300px', margin: 'auto' }} className="bg-white rounded pt-4 border">
+    <div style={{ maxWidth: '1360px', margin: 'auto' }} className="bg-white rounded pt-4 border">
       <MetricViewHeader siteId={siteId} />
       <MetricsList siteId={siteId} />
     </div>
diff --git a/frontend/app/components/FFlags/FFlagsList.tsx b/frontend/app/components/FFlags/FFlagsList.tsx
index e1dd0aaf6..3b1c9de07 100644
--- a/frontend/app/components/FFlags/FFlagsList.tsx
+++ b/frontend/app/components/FFlags/FFlagsList.tsx
@@ -21,7 +21,7 @@ function FFlagsList({ siteId }: { siteId: string }) {
   return (
     <div
       className={'mb-5 w-full mx-auto bg-white rounded pb-10 pt-4 widget-wrapper'}
-      style={{ maxWidth: '1300px' }}
+      style={{ maxWidth: '1360px' }}
     >
       <FFlagsListHeader siteId={siteId} />
       <div className={'border-y px-3 py-2 mt-2 flex items-center w-full justify-end gap-4'}>
diff --git a/frontend/app/components/FFlags/FlagView/FlagView.tsx b/frontend/app/components/FFlags/FlagView/FlagView.tsx
index 32269f5be..d0ddb7770 100644
--- a/frontend/app/components/FFlags/FlagView/FlagView.tsx
+++ b/frontend/app/components/FFlags/FlagView/FlagView.tsx
@@ -47,7 +47,7 @@ function FlagView({ siteId, fflagId }: { siteId: string; fflagId: string }) {
   };
 
   return (
-    <div className={'w-full mx-auto mb-4'} style={{ maxWidth: 1300 }}>
+    <div className={'w-full mx-auto mb-4'} style={{ maxWidth: '1360px' }}>
       <Breadcrumb
         items={[
           { label: 'Feature Flags', to: withSiteId(fflags(), siteId) },
diff --git a/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx b/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx
index 823379f56..65e6fa74a 100644
--- a/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx
+++ b/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx
@@ -34,7 +34,7 @@ function NewFFlag({ siteId, fflagId }: { siteId: string; fflagId?: string }) {
 
   if (featureFlagsStore.isLoading) return <Loader loading={true} />;
   if (!current) return (
-    <div className={'w-full mx-auto mb-4'} style={{ maxWidth: 1300 }}>
+    <div className={'w-full mx-auto mb-4'} style={{ maxWidth: '1360px' }}>
       <Breadcrumb
         items={[
           { label: 'Feature Flags', to: withSiteId(fflags(), siteId) },
@@ -76,7 +76,7 @@ function NewFFlag({ siteId, fflagId }: { siteId: string; fflagId?: string }) {
 
   const showDescription = Boolean(current.description?.length);
   return (
-    <div className={'w-full mx-auto mb-4'} style={{ maxWidth: 1300 }}>
+    <div className={'w-full mx-auto mb-4'} style={{ maxWidth: '1360px' }}>
       <Prompt
         when={current.hasChanged}
         message={() => {
diff --git a/frontend/app/components/Onboarding/Onboarding.tsx b/frontend/app/components/Onboarding/Onboarding.tsx
index b871d40bc..bdc9413a5 100644
--- a/frontend/app/components/Onboarding/Onboarding.tsx
+++ b/frontend/app/components/Onboarding/Onboarding.tsx
@@ -40,7 +40,7 @@ const Onboarding = (props: Props) => {
       <div className="side-menu-margined w-full">
         <div
           className="bg-white w-full rounded-lg mx-auto mb-8 border"
-          style={{ maxWidth: '1300px' }}
+          style={{ maxWidth: '1360px' }}
         >
           <Switch>
             <Route exact strict path={route(OB_TABS.INSTALLING)} component={InstallOpenReplayTab} />
diff --git a/frontend/app/components/Overview/Overview.tsx b/frontend/app/components/Overview/Overview.tsx
index b509c1ca3..0d73da1e1 100644
--- a/frontend/app/components/Overview/Overview.tsx
+++ b/frontend/app/components/Overview/Overview.tsx
@@ -30,7 +30,7 @@ function Overview({ match: { params } }: IProps) {
     <Switch>
       <Route exact strict
              path={[withSiteId(sessions(), siteId), withSiteId(notes(), siteId), withSiteId(bookmarks(), siteId)]}>
-        <div className='mb-5 w-full mx-auto' style={{ maxWidth: '1300px' }}>
+        <div className='mb-5 w-full mx-auto' style={{ maxWidth: '1360px' }}>
           <NoSessionsMessage siteId={siteId} />
           <MainSearchBar />
           <SessionSearch />