From 75a33e5c6941e74b668df1486298c7470976a1b0 Mon Sep 17 00:00:00 2001
From: Ian Krieger <iandkrieger@gmail.com>
Date: Mon, 28 Aug 2023 16:07:22 -0400
Subject: [PATCH] fix: scroll table

---
 src/components/Drawer/MiniSideBar.tsx  |  6 +++---
 src/components/Switch/OnOff.tsx        |  3 ++-
 src/user/campaignList/CampaignList.tsx | 10 +++++++---
 src/user/views/user/CampaignView.tsx   |  1 +
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Drawer/MiniSideBar.tsx b/src/components/Drawer/MiniSideBar.tsx
index 01335fc1..3b6f4614 100644
--- a/src/components/Drawer/MiniSideBar.tsx
+++ b/src/components/Drawer/MiniSideBar.tsx
@@ -30,7 +30,7 @@ type RouteOption = {
   onClick?: (event: MouseEvent<any>) => void;
 };
 
-const drawerWidth = 120;
+const drawerWidth = 110;
 export default function MiniSideBar({ children }: PropsWithChildren) {
   const dashboardRoutes: RouteOption[] = [
     {
@@ -151,8 +151,8 @@ const ItemBox = (props: RouteOption) => {
         borderRadius: "0px",
         gap: "3px",
         visibility: props.disabled ? "hidden" : "visible",
-        paddingLeft: "5px",
-        paddingRight: "5px",
+        paddingLeft: "3px",
+        paddingRight: "3px",
       }}
       selected={match.url.includes(props.href)}
       onClick={props.onClick}
diff --git a/src/components/Switch/OnOff.tsx b/src/components/Switch/OnOff.tsx
index 04fe7024..ebc8ebb6 100644
--- a/src/components/Switch/OnOff.tsx
+++ b/src/components/Switch/OnOff.tsx
@@ -36,11 +36,12 @@ export function OnOff({ state, loading, end, onChange, type, source }: Props) {
               setChecked(e.target.checked);
               onChange(theState);
             }}
+            sx={{ p: 0 }}
             checked={checked}
             disabled={loading}
           />
         ) : (
-          <Typography sx={{ textAlign: "center" }}>-</Typography>
+          <Typography sx={{ textAlign: "center", p: 0 }}>-</Typography>
         )}
       </span>
     </Tooltip>
diff --git a/src/user/campaignList/CampaignList.tsx b/src/user/campaignList/CampaignList.tsx
index d78f3307..03e05917 100644
--- a/src/user/campaignList/CampaignList.tsx
+++ b/src/user/campaignList/CampaignList.tsx
@@ -34,6 +34,7 @@ export function CampaignList({
   selectedCampaigns,
   onCampaignSelect,
 }: Props) {
+  let initialSort = 11;
   const [engagementData, setEngagementData] =
     useState<Map<string, EngagementOverview>>();
 
@@ -60,7 +61,7 @@ export function CampaignList({
           ...r,
           advertiserId: advertiser?.id ?? "",
         }),
-      sx: { width: "1px" },
+      sx: { width: "1px", p: 0 },
       sortable: false,
     },
     {
@@ -86,7 +87,7 @@ export function CampaignList({
       extendedRenderer: (r) => (
         <Status state={r.state} start={r.startAt} end={r.endAt} />
       ),
-      sx: { width: "10px" },
+      sx: { width: "1px", p: 0 },
     },
     {
       title: "Budget",
@@ -143,6 +144,7 @@ export function CampaignList({
   ];
 
   if (advertiser?.selfServiceCreate && advertiser.selfServiceEdit) {
+    initialSort += 1;
     columns.unshift({
       title: "",
       value: (c) => c.id,
@@ -155,13 +157,14 @@ export function CampaignList({
         />
       ),
       align: "center",
+      sx: { width: "1px" },
     });
   }
 
   return (
     <EnhancedTable
       rows={advertiser?.campaigns ?? []}
-      initialSortColumn={9}
+      initialSortColumn={initialSort}
       initialSortDirection="desc"
       columns={columns}
     />
@@ -182,6 +185,7 @@ const CampaignCheckBox = (props: CheckBoxProps) => {
     <Checkbox
       disabled={props.selectedCampaigns.length === 1 && !campaignSelected}
       size="small"
+      sx={{ p: 0 }}
       checked={campaignSelected}
       onChange={(e) =>
         props.onCampaignSelect(props.campaign.id, e.target.checked)
diff --git a/src/user/views/user/CampaignView.tsx b/src/user/views/user/CampaignView.tsx
index 9fea3d5d..8b145766 100644
--- a/src/user/views/user/CampaignView.tsx
+++ b/src/user/views/user/CampaignView.tsx
@@ -69,6 +69,7 @@ export function CampaignView() {
         sx={{
           flexGrow: 1,
           mr: 2,
+          overflowX: "auto",
         }}
         additionalAction={<CampaignAgeFilter disabled={loading} />}
       >