Merge pull request #2466 from metabase/data-model-flex-fixes

Data model flex fixes

frontend/src/admin/datamodel/components/database/MetadataTableList.jsx

@@ -71,7 +71,7 @@ export default class MetadataTableList extends Component {
         }
 
         return (
-            <div className="MetadataEditor-table-list AdminList">
+            <div className="MetadataEditor-table-list AdminList flex-no-shrink">
                 <div className="AdminList-search">
                     <Icon name="search" width="16" height="16"/>
                     <input

frontend/src/admin/datamodel/components/database/SegmentItem.jsx

@@ -22,7 +22,9 @@ export default class SegmentItem extends Component {
                     {segment.name}
                 </td>
                 <td className="px1 text-ellipsis">
-                    {description}
+                    <div style={{maxWidth: 400, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                        {description}
+                    </div>
                 </td>
                 <td className="px1 text-centered">
                     <ObjectActionSelect

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/admin/datamodel/containers/MetricForm.jsx

@@ -64,7 +64,7 @@ export default class MetricForm extends Component {
         return (
             <LoadingAndErrorWrapper loading={!tableMetadata}>
             { () =>
-                <form onSubmit={handleSubmit}>
+                <form className="full" onSubmit={handleSubmit}>
                     <div className="wrapper py4">
                         <FormLabel
                             title={(metric && metric.id != null ? "Edit" : "Create") + " Your Metric"}
@@ -124,8 +124,10 @@ export default class MetricForm extends Component {
                     </div>
 
                     { id.value == null &&
-                        <div  className="border-top wrapper py4">
-                            {this.renderActionButtons()}
+                        <div className="border-top py4">
+                            <div className="wrapper">
+                                {this.renderActionButtons()}
+                            </div>
                         </div>
                     }
                 </form>

frontend/src/admin/datamodel/containers/SegmentForm.jsx

@@ -65,7 +65,7 @@ export default class SegmentForm extends Component {
         return (
             <LoadingAndErrorWrapper loading={!tableMetadata}>
             { () =>
-                <form onSubmit={handleSubmit}>
+                <form className="full" onSubmit={handleSubmit}>
                     <div className="wrapper py4">
                         <FormLabel
                             title={(segment && segment.id != null ? "Edit" : "Create") + " Your Segment"}
@@ -123,8 +123,10 @@ export default class SegmentForm extends Component {
                     </div>
 
                     { id.value == null &&
-                        <div  className="border-top wrapper py4">
-                            {this.renderActionButtons()}
+                        <div className="border-top py4">
+                            <div className="wrapper">
+                                {this.renderActionButtons()}
+                            </div>
                         </div>
                     }
                 </form>

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}