handle long revision history entries

frontend/src/admin/datamodel/components/revisions/QueryDiff.jsx

@@ -20,7 +20,7 @@ export default class QueryDiff extends Component {
         return (
             <LoadingAndErrorWrapper loading={!tableMetadata}>
             {() =>
-                <div className="my1 flex" style={{ pointerEvents: "none" }}>
+                <div className="my1" style={{ pointerEvents: "none" }}>
                     { defintion.aggregation &&
                         <AggregationWidget
                             aggregation={defintion.aggregation}

frontend/src/admin/datamodel/components/revisions/RevisionDiff.jsx

@@ -26,16 +26,18 @@ export default class RevisionDiff extends Component {
         }
 
         return (
-            <div className="bordered rounded  my2 flex flex-row align-center" style={{borderWidth: 2}}>
-                <div className="m3">
-                    {icon}
-                </div>
-                <div>
-                    { this.props.property === "definition" ?
-                        <QueryDiff diff={this.props.diff} tableMetadata={tableMetadata}/>
-                    :
-                        <TextDiff diff={this.props.diff}/>
-                    }
+            <div className="bordered rounded my2" style={{borderWidth: 2, overflow: 'hidden', maxWidth: 860}}>
+                <div className="flex scroll-x scroll-show scroll-show-horizontal">
+                    <div className="m3">
+                        {icon}
+                    </div>
+                    <div>
+                        { this.props.property === "definition" ?
+                            <QueryDiff diff={this.props.diff} tableMetadata={tableMetadata}/>
+                        :
+                            <TextDiff diff={this.props.diff}/>
+                        }
+                    </div>
                 </div>
             </div>
         );

frontend/src/css/query_builder.css

@@ -73,7 +73,6 @@
 
 .Query-filterList {
     display: flex;
-    overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
     min-height: 55px;

frontend/src/query_builder/filters/FilterList.jsx

@@ -34,7 +34,7 @@ export default class FilterList extends Component {
     render() {
         const { filters, tableMetadata } = this.props;
         return (
-        <div className="Query-filterList scroll-show scroll-show--horizontal">
+            <div className="Query-filterList scroll-x scroll-show scroll-show--horizontal">
                 {filters.slice(1).map((filter, index) =>
                     <FilterWidget
                         key={index}