Fix CSS for expression columns

Author: texodus

rust/perspective-viewer/src/less/column-selector.less

@@ -10,6 +10,17 @@
 @import "./aggregate-selector.less";
 
 :host {
+
+    .column-selector-column-title {
+        display: flex;
+        width: 100%;
+        flex-direction: row !important;
+    }
+
+    #expression-columns .column-selector-column-title {
+        width: calc(100% - 24px);
+    }
+
     #side_panel {
         & > :not(:last-child) {
             margin-bottom: 6px;
@@ -70,8 +81,7 @@
             span.expression-edit-button,
             span.expression-delete-button {
                 padding-left: 6px;
-                padding-right: 4px;
-                position: absolute;
+                padding-right: 0px;
                 font-family: "Material Icons";
                 cursor: pointer;
                 opacity: 1;
@@ -83,14 +93,6 @@
                 }
             }
 
-            span.expression-edit-button {
-                right: 0px;
-            }
-
-            span.expression-delete-button {
-                right: 18px;
-            }
-
             .column_selector_draggable {
                 display: flex;
                 align-items: start;
@@ -120,6 +122,7 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                     width: 100%;
+                    flex: 1 1 250px;
                 }
 
                 .column_name:before {
@@ -226,6 +229,11 @@
                 position: relative;
                 .column_selector_draggable {
                     width: calc(100% - 24px);
+
+                    span.expression-edit-button {
+                        margin-left: 18px;
+                    }
+             
                 }
 
                 &:before {

rust/perspective-viewer/src/less/config-selector.less

@@ -46,6 +46,12 @@
                 white-space: nowrap;
             }
 
+            span:first-child {
+                text-overflow: ellipsis;
+                max-width: 250px;
+                overflow: hidden;
+            }
+
             // Column is being dragged-over, e.g. this is the drop indicator.
             &.config-drop {
                 display: inline;

rust/perspective-viewer/src/less/viewer.less

@@ -169,4 +169,12 @@
             content: var(--settings-button--content, "\1f527");
         }
     }
+
+    .split-panel {
+        .split-panel-child {
+            &:first-child:not(.is-width-override) {
+                max-width: 250px;
+            }
+        }
+    }
 }

rust/perspective-viewer/src/rust/components/active_column.rs

@@ -285,7 +285,7 @@ impl Component for ActiveColumn {
                             ondragstart={ dragstart }
                             ondragend={ self.props.ondragend.clone() }>
 
-                            <span>
+                            <span class="column-selector-column-title">
                                 <span
                                     ref={ noderef.clone() }
                                     class={ format!("column_name {}", col_type) }>

rust/perspective-viewer/src/rust/components/containers/split_panel.rs

@@ -207,9 +207,15 @@ impl Component for SplitPanel {
             SplitPanelMsg::Reset
         });
 
+        let class = if style.is_some() {
+            "split-panel-child is-width-override"
+        } else {
+            "split-panel-child"
+        };
+
         html! {
             <div id={ self.props.id.clone() } class="split-panel">
-                <div class="split-panel-child" ref={ _ref } style={ style }>
+                <div class={ class } ref={ _ref } style={ style }>
                     { iter.next().unwrap() }
                 </div>
                 <div

rust/perspective-viewer/src/rust/components/inactive_column.rs

@@ -170,7 +170,7 @@ impl Component for InactiveColumn {
                     onmousedown={ add_column }>
                 </span>
                 <div
-                    class="column_selector_draggable"
+                    class="column_selector_draggable column-selector-column-title"
                     draggable="true"
                     ref={ self.add_expression_ref.clone() }
                     ondragstart={ dragstart }