Widget filters overlapped by visualization (#4137)

* Fix: widget filters overlapped by visualization

* Fix tests

* Fix tests

client/app/assets/less/inc/visualizations/pivot-table.less

@@ -1,3 +1,4 @@
-.pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
+.pivot-table-renderer > table,
+visualization-renderer > .visualization-renderer-wrapper {
   overflow: auto;
 }

client/app/assets/less/redash/query.less

@@ -343,7 +343,8 @@ a.label-tag {
       border-bottom: 1px solid #efefef;
     }
 
-    .pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
+    .pivot-table-renderer > table,
+    visualization-renderer > .visualization-renderer-wrapper {
       overflow: visible;
     }
 

client/app/pages/dashboards/dashboard.less

@@ -22,7 +22,8 @@
     padding: 0;
   }
 
-  .pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
+  .pivot-table-renderer > table,
+  visualization-renderer > .visualization-renderer-wrapper {
     overflow: visible;
   }
 
@@ -65,7 +66,7 @@
       right: 0;
       bottom: 0;
 
-      > div {
+      > .visualization-renderer-wrapper {
         flex-grow: 1;
         position: relative;
       }

client/app/visualizations/VisualizationRenderer.jsx

@@ -60,13 +60,15 @@ export function VisualizationRenderer(props) {
   return (
     <React.Fragment>
       {showFilters && <Filters filters={filters} onChange={setFilters} />}
-      <Renderer
-        key={`visualization${visualization.id}`}
-        options={options}
-        data={filteredData}
-        visualizationName={visualization.name}
-        context={props.context}
-      />
+      <div className="visualization-renderer-wrapper">
+        <Renderer
+          key={`visualization${visualization.id}`}
+          options={options}
+          data={filteredData}
+          visualizationName={visualization.name}
+          context={props.context}
+        />
+      </div>
     </React.Fragment>
   );
 }

client/app/visualizations/table/renderer.less

@@ -103,6 +103,10 @@
 
   /* START table x scroll */
   .dashboard-widget-wrapper:not(.widget-auto-height-enabled) & {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
     height: 100%;
 
     & div {