[WEB-2459] Fix: analytics scroll + dashboard stat minor padding (#5613)

* fix: analytics scroll + dashboard stat minor padding

* fix: build issue

web/core/components/analytics/custom-analytics/custom-analytics.tsx

@@ -5,7 +5,6 @@ import useSWR from "swr";
 import { IAnalyticsParams } from "@plane/types";
 // services
 // components
-import { ContentWrapper } from "@plane/ui";
 import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSidebar } from "@/components/analytics";
 // types
 // fetch-keys
@@ -54,7 +53,7 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
 
   return (
     <div className={cn("relative flex h-full w-full overflow-hidden", isProjectLevel ? "flex-col-reverse" : "")}>
-      <ContentWrapper>
+      <div className="flex h-full w-full flex-col overflow-hidden">
         <CustomAnalyticsSelectBar
           control={control}
           setValue={setValue}
@@ -68,7 +67,7 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
           params={params}
           fullScreen={fullScreen}
         />
-      </ContentWrapper>
+      </div>
 
       <div
         className={cn(

web/core/components/analytics/custom-analytics/select-bar.tsx

@@ -5,6 +5,7 @@ import { IAnalyticsParams } from "@plane/types";
 import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "@/components/analytics";
 import { ANALYTICS_X_AXIS_VALUES } from "@/constants/analytics";
 import { useProject } from "@/hooks/store";
+import { Row } from "@plane/ui";
 // components
 // types
 
@@ -30,10 +31,10 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
     : ANALYTICS_X_AXIS_VALUES;
 
   return (
-    <div
-      className={`grid items-center gap-4 pb-2.5 ${
+    <Row
+      className={`grid items-center gap-4 py-2.5 ${
         isProjectLevel ? "grid-cols-1 sm:grid-cols-3" : "grid-cols-2"
-      } ${fullScreen ? "md:pb-5 lg:grid-cols-4" : ""}`}
+      } ${fullScreen ? "md:py-5 lg:grid-cols-4" : ""}`}
     >
       {!isProjectLevel && (
         <div>
@@ -88,6 +89,6 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
           )}
         />
       </div>
-    </div>
+    </Row>
   );
 });

web/core/components/analytics/custom-analytics/table.tsx

@@ -19,7 +19,7 @@ type Props = {
 };
 
 export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
-  <div className="w-full overflow-hidden overflow-x-auto absolute left-0">
+  <div className="w-full overflow-hidden overflow-x-auto">
     <table className="w-full overflow-hidden divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
       <thead className="bg-custom-background-80">
         <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">

web/core/components/dashboard/widgets/overview-stats.tsx

@@ -66,7 +66,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
   return (
     <Card
       spacing={ECardSpacing.SM}
-      className="flex-row grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2 space-y-0
+      className="flex-row grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2 space-y-0 p-0.5
         [&>div>a>div]:border-r
         [&>div:last-child>a>div]:border-0
         [&>div>a>div]:border-custom-border-200
@@ -79,8 +79,8 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
           key={stat.key}
           className={cn(
             `w-full flex flex-col gap-2 hover:bg-custom-background-80`,
-            index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
-            index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "",
+            index === 0 ? "rounded-l-md" : "",
+            index === STATS_LIST.length - 1 ? "rounded-r-md" : "",
             index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "",
             index == 2 ? "rounded-bl-xl lg:rounded-[0px]" : ""
           )}

web/core/components/page-views/workspace-dashboard.tsx

@@ -67,7 +67,7 @@ export const WorkspaceDashboardView = observer(() => {
             <>
               <IssuePeekOverview />
               <ContentWrapper
-                className={cn("gap-7", {
+                className={cn("gap-7 bg-custom-background-90", {
                   "vertical-scrollbar scrollbar-lg": windowWidth >= 768,
                 })}
               >