Style polish

app/scripts/components/exploration/components/datasets/dataset-chart.tsx

@@ -30,19 +30,19 @@ interface DatasetChartProps {
   onUpdateSettings: (type: string, m: DataMetric[]) => void;
 }
 
-const ChartAnalysisMenu = styled.div`
+const ChartAnalysisMenu = styled.div<{axisWidth: number}>`
   width: inherit;
   position: relative;
   display: flex;
   justify-content: end;
-  margin-right: 6.5rem;
+  margin-right: calc(${props=> props.axisWidth}px + 0.5rem);
   z-index: 3000;
 `;
-const AxisBackground = styled.div`
+const AxisBackground = styled.div<{axisWidth: number}>`
   position: absolute;
   right: 0;
   top: 0;
-  width: ${props=> props.width}px;
+  width: ${props=> props.axisWidth}px;
   height: 100%;
   background-color: #F0F0F0;
   z-index: -1;
@@ -73,7 +73,7 @@ export function DatasetChart(props: DatasetChartProps) {
     const extents = [
       ...enhancedTimeseries.flatMap(d => extent(lineMetrics.map(m => d[m.id]))),
       ...areaMetrics.length && enhancedTimeseries.flatMap(d => extent([d[areaDataKey]].flat())),
-    ].filter(Boolean); // Filter out falsey values if areaMetrics.length is 0
+    ].filter(Boolean); // Filter out falsey values 
     return extent(extents.flat()) as [undefined, undefined] | [number, number];
   }, [enhancedTimeseries, lineMetrics, areaMetrics]);
 
@@ -94,10 +94,10 @@ export function DatasetChart(props: DatasetChartProps) {
           There are no active metrics to visualize.
         </DatasetTrackMessage>
       )}
-      <ChartAnalysisMenu>
+      <ChartAnalysisMenu axisWidth={RIGHT_AXIS_SPACE}>
         <LayerChartAnalysisMenu activeMetrics={activeMetrics} onChange={onUpdateSettings} triggerIcon={chartAnalysisIconTrigger} />
       </ChartAnalysisMenu>
-      <AxisBackground width={RIGHT_AXIS_SPACE} />
+      <AxisBackground axisWidth={RIGHT_AXIS_SPACE} />
       <svg width={width + RIGHT_AXIS_SPACE} height={height}>
         <clipPath id='data-clip'>
           <rect width={width} height={height} />