Style tweaks for reports without footers

Author: nielsdejong

public/style.css

@@ -95,7 +95,8 @@
 }
 
 .react-resizable-handle {
-  bottom: 1px !important;
+  bottom: 4px !important;
+  right: -2px !important;
   opacity: 0.5;
   color: rgb(222, 222, 222);
 }
@@ -216,7 +217,7 @@
 }
 
 .card-view .MuiTablePagination-root {
-  margin-top: -40px;
+  margin-top: 0px;
 
 }
 

src/card/settings/CardSettings.tsx

@@ -36,7 +36,7 @@ const NeoCardSettings = ({
   expanded,
   onToggleCardExpand,
 }) => {
-  const reportHeight = heightPx - CARD_HEADER_HEIGHT + 24;
+  const reportHeight = heightPx - CARD_HEADER_HEIGHT + 19;
 
   const cardSettingsHeader = (
     <NeoCardSettingsHeader

src/card/view/CardView.tsx

@@ -44,7 +44,7 @@ const NeoCardView = ({
   expanded,
   onToggleCardExpand,
 }) => {
-  const reportHeight = heightPx - CARD_FOOTER_HEIGHT - CARD_HEADER_HEIGHT + 22;
+  const reportHeight = heightPx - CARD_FOOTER_HEIGHT - CARD_HEADER_HEIGHT + 20;
   const cardHeight = heightPx - CARD_FOOTER_HEIGHT + 23;
   const ref = React.useRef();
 
@@ -137,10 +137,10 @@ const NeoCardView = ({
 
   const localParameters = { ...getLocalParameters(query), ...getLocalParameters(settings.drilldownLink) };
   const reportTypes = getReportTypes(extensions);
-  const withoutFooter =
-    reportTypes[type] && reportTypes[type].withoutFooter
-      ? reportTypes[type].withoutFooter
-      : (reportTypes[type] && !reportTypes[type].selection) || (settings && settings.hideSelections);
+  const reportTypeHasNoFooter = reportTypes[type] && reportTypes[type].withoutFooter;
+  const withoutFooter = reportTypeHasNoFooter
+    ? reportTypes[type].withoutFooter
+    : (reportTypes[type] && !reportTypes[type].selection) || (settings && settings.hideSelections);
 
   const getGlobalParameter = (key: string): unknown => {
     return globalParameters ? globalParameters[key] : undefined;
@@ -170,13 +170,13 @@ const NeoCardView = ({
     paddingRight: '0px',
     paddingTop: '0px',
     width: '100%',
-    marginTop: '-3px',
+    marginTop: '-9px',
     height: expanded
       ? withoutFooter
         ? '100%'
         : `calc(100% - ${CARD_FOOTER_HEIGHT}px)`
       : withoutFooter
-      ? `${reportHeight + CARD_FOOTER_HEIGHT}px`
+      ? `${reportHeight + CARD_FOOTER_HEIGHT - (reportTypeHasNoFooter ? 0 : 20)}px`
       : `${reportHeight}px`,
     overflow: 'auto',
   };

src/chart/graph/component/GraphChartCanvas.tsx

@@ -1,10 +1,21 @@
 import React from 'react';
 
-const canvasStyle = { paddingLeft: '10px', position: 'relative', overflow: 'hidden', width: '100%', height: '100%' };
+const canvasStyle = {
+  paddingLeft: '10px',
+  marginBottom: 5,
+  position: 'relative',
+  overflow: 'hidden',
+  width: '100%',
+  height: '100%',
+};
 
 /**
  * Renders the canvas on which the graph visualization is projected.
  */
 export const NeoGraphChartCanvas = ({ children }) => {
-  return <div style={canvasStyle}>{children}</div>;
+  return (
+    <div className='graph-chart-canvas' style={canvasStyle}>
+      {children}
+    </div>
+  );
 };