fix: Expression window resize (#3587)

* fix: Expression window resize

* fix: Expression window resize

* fix: Expression window resize

hard-coded value removed

* fix: Expression window resize

- adding column dialog fixed
- default width is preserved

Co-authored-by: Antonin Delpeuch <antonin@delpeuch.eu>

main/webapp/modules/core/scripts/dialogs/expression-preview-dialog.js

@@ -36,8 +36,7 @@ function ExpressionPreviewDialog(title, cellIndex, rowIndices, values, expressio
 
     var self = this;
     var frame = DialogSystem.createDialog();
-    frame.width("700px");
+    frame.css("min-width", "700px")
-    
     var header = $('<div></div>').addClass("dialog-header").text(title).appendTo(frame);
     var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
     var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
@@ -134,8 +133,6 @@ ExpressionPreviewDialog.Widget = function(
         .select()
         .focus();
     
-    this._tabContentWidth = this._elmts.expressionPreviewPreviewContainer.width() + "px";
-    
     this._elmts.or_dialog_expr.html($.i18n('core-dialogs/expression'));
     this._elmts.or_dialog_lang.html($.i18n('core-dialogs/language'));
     this._elmts.or_dialog_preview.html($.i18n('core-dialogs/preview'));
@@ -186,8 +183,7 @@ ExpressionPreviewDialog.Widget.prototype._renderHelpTab = function() {
 };
 
 ExpressionPreviewDialog.Widget.prototype._renderHelp = function(data) {
-    var elmt = this._elmts.expressionPreviewHelpTabBody.empty().width(this._tabContentWidth);
+    var elmt = this._elmts.expressionPreviewHelpTabBody.empty();
-    
     $('<h3></h3>').text("Variables").appendTo(elmt);
     var varTable = $('<table cellspacing="5"></table>').appendTo(elmt)[0];
     var vars = [
@@ -269,7 +265,7 @@ ExpressionPreviewDialog.Widget.prototype._renderExpressionHistoryTab = function(
 
 ExpressionPreviewDialog.Widget.prototype._renderExpressionHistory = function(data) {
     var self = this;
-    var elmt = this._elmts.expressionPreviewHistoryContainer.empty().width(this._tabContentWidth);
+    var elmt = this._elmts.expressionPreviewHistoryContainer.empty();
     
     var table = $(
         '<table>' +
@@ -337,7 +333,7 @@ ExpressionPreviewDialog.Widget.prototype._renderStarredExpressionsTab = function
 
 ExpressionPreviewDialog.Widget.prototype._renderStarredExpressions = function(data) {
     var self = this;
-    var elmt = this._elmts.expressionPreviewStarredContainer.empty().width(this._tabContentWidth);
+    var elmt = this._elmts.expressionPreviewStarredContainer.empty();
     
     var table = $(
         '<table>' +
@@ -436,7 +432,7 @@ ExpressionPreviewDialog.Widget.prototype._prepareUpdate = function(params) {
 };
 
 ExpressionPreviewDialog.Widget.prototype._renderPreview = function(expression, data) {
-    var container = this._elmts.expressionPreviewPreviewContainer.empty().width(this._tabContentWidth);
+    var container = this._elmts.expressionPreviewPreviewContainer.empty();
     
     var table = $('<table></table>').appendTo(
         $('<div>').addClass("expression-preview-table-wrapper").appendTo(container))[0];

main/webapp/modules/core/scripts/dialogs/extend-data-preview-dialog.js

@@ -323,7 +323,6 @@ ExtendReconciledDataPreviewDialog.prototype._constrainProperty = function(id) {
   var property = this._findProperty(id);
 
   var frame = DialogSystem.createDialog();
-  frame.width("500px");
 
   var header = $('<div></div>').addClass("dialog-header").text("Settings for " + id).appendTo(frame);
   var body = $('<div></div>').addClass("dialog-body").appendTo(frame);

main/webapp/modules/core/scripts/dialogs/sql-exporter-dialog.html

@@ -1,4 +1,4 @@
-<div class="dialog-frame" style="width: 800px;">
+<div class="dialog-frame" style="min-width: 800px;">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">
       <div id="sql-exporter-tabs" class="refine-tabs">

main/webapp/modules/core/scripts/dialogs/templating-exporter-dialog.html

@@ -1,4 +1,4 @@
-<div class="dialog-frame" style="width: 900px;">
+<div class="dialog-frame" style="min-width: 900px;">
   <div class="dialog-header" bind="dialogHeader"></div>
   <div class="dialog-body" bind="dialogBody">
     <div class="grid-layout layout-normal layout-full"><table>

main/webapp/modules/core/scripts/views/data-table/add-column-by-fetching-urls-dialog.html

@@ -1,8 +1,8 @@
-<div class="dialog-frame" style="width: 700px;">
+<div class="dialog-frame" style="min-width: 700px;">
   <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">
-      <div class="grid-layout layout-normal layout-full"><table cols="2">
+      <div class="grid-layout layout-normal layout-full"><table cols="2" style="width: 700px;">
         <tr>
           <td width="1%" style="white-space: pre;" bind="or_views_newCol"></td>
           <td><input bind="columnNameInput" size="40" /></td>

main/webapp/modules/core/scripts/views/data-table/add-column-dialog.html

@@ -1,8 +1,8 @@
-<div class="dialog-frame" style="width: 700px;">
+<div class="dialog-frame" style="min-width: 700px;">
   <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">
-      <div class="grid-layout layout-normal layout-full"><table cols="2">
+      <div class="grid-layout layout-normal layout-full"><table cols="2" style="width: 700px">
         <tr>
           <td width="1%" style="white-space: pre;" bind="or_views_newCol"></td>
           <td><input bind="columnNameInput" size="40" /></td>

main/webapp/modules/core/scripts/views/data-table/split-column-dialog.html

@@ -1,4 +1,4 @@
-<div class="dialog-frame" style="width: 600px;">
+<div class="dialog-frame" style="min-width: 600px;">
   <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">

main/webapp/modules/core/scripts/views/data-table/split-multi-valued-cells-dialog.html

@@ -1,4 +1,4 @@
-<div class="dialog-frame" style="width: 600px;">
+<div class="dialog-frame" style="min-width: 600px;">
   <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">

main/webapp/modules/core/scripts/views/data-table/text-transform-dialog.html

@@ -1,4 +1,4 @@
-<div class="dialog-frame" style="width: 80%;" >
+<div class="dialog-frame" style="min-width: 600px;">
   <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">

main/webapp/modules/core/scripts/views/data-table/transpose-columns-into-rows.html

@@ -1,4 +1,4 @@
-<div class="dialog-frame" style="width: 700px;">
+<div class="dialog-frame" style="min-width: 700px;">
   <div class="dialog-border">
     <div class="dialog-header" bind="dialogHeader"></div>
     <div class="dialog-body" bind="dialogBody">

main/webapp/modules/core/styles/common.less

@@ -389,7 +389,7 @@ div.input-container {
   }
 
 div.input-container > input, div.input-container > textarea {
-  display: block;
+  display: inline-block;
   width: 100%;
   padding: 2px;
   border: 1px inset;

main/webapp/modules/core/styles/dialogs/expression-preview-dialog.less

@@ -75,6 +75,7 @@ textarea.expression-preview-code {
 
 .expression-preview-table-wrapper {
   padding: @padding_normal;
+  width: 100%;
   }
 
 .expression-preview-container td {
@@ -116,5 +117,9 @@ td.expression-preview-value {
   }
 
 .expression-preview-doc-item-desc {
+  max-width: 250px;
+  white-space: pre-wrap;
+  overflow-x: hidden;
   color: #666;
+
 }

main/webapp/modules/core/styles/util/dialog.less

@@ -55,6 +55,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   text-align: left;
   background: white;
   border: 1px solid @dialog_frame;
+  display: inline-block;
   }
 
 .dialog-border {