fix: scroll table (#874)

* fix: scroll table * fix: remove created * fix: sort by start
brave · Aug 29, 2023 · b1c8205 · b1c8205
1 parent 46eeb37
commit b1c8205
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 14 deletions.
diff --git 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 = 100;
 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
@@ -40,7 +40,7 @@ export function OnOff({ state, loading, end, onChange, type, source }: Props) {
             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
@@ -34,6 +34,7 @@ export function CampaignList({
   selectedCampaigns,
   onCampaignSelect,
 }: Props) {
+  let initialSort = 9;
   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",
@@ -134,15 +135,10 @@ export function CampaignList({
       renderer: StandardRenderers.date,
       align: "right",
     },
-    {
-      title: "Created",
-      value: (c) => c.createdAt,
-      renderer: StandardRenderers.date,
-      align: "right",
-    },
   ];
 
   if (advertiser?.selfServiceCreate && advertiser.selfServiceEdit) {
+    initialSort += 1;
     columns.unshift({
       title: "",
       value: (c) => c.id,
@@ -155,13 +151,14 @@ export function CampaignList({
         />
       ),
       align: "center",
+      sx: { width: "1px" },
     });
   }
 
   return (
     <EnhancedTable
       rows={advertiser?.campaigns ?? []}
-      initialSortColumn={9}
+      initialSortColumn={initialSort}
       initialSortDirection="desc"
       columns={columns}
     />
@@ -182,6 +179,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
@@ -68,7 +68,7 @@ export function CampaignView() {
         }
         sx={{
           flexGrow: 1,
-          mr: 2,
+          overflowX: "auto",
         }}
         additionalAction={<CampaignAgeFilter disabled={loading} />}
       >