Fix horizontal overflow in popups caused by large fonts or wide templates

- Fixed main layout table so it doesn't force the template wider
- Changed overflow calculation so even if it does, the popup will grow

api/js/etemplate/et2_widget_grid.ts

@@ -740,6 +740,19 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		const h = this.rowCount = _cells.length;
 		const w = this.columnCount = (h > 0) ? _cells[0].length : 0;
 
+		// Create the table columns
+		let colgroup = document.createElement("colgroup");
+		this.table.prepend(colgroup);
+		_colData.forEach((col) =>
+		{
+			const attributes = {};
+			if(col.width)
+			{
+				attributes['style'] = "width:" + col.width + (isNaN(col.width) ? "" : "px");
+			}
+			colgroup.append(Object.assign(document.createElement("col"), attributes));
+		});
+
 		// Create the table rows.
 		for(let y = 0; y < h; y++)
 		{
@@ -813,12 +826,6 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 						}
 					}
 
-					// do NOT set cell width, if we have a colspan
-					if(cell.width !== "auto" && cell.colSpan <= 1)
-					{
-						td.width(cell.width);
-					}
-
 					if(cell.align)
 					{
 						td.attr("align", cell.align);

api/js/jsapi/egw.js

@@ -317,7 +317,14 @@ window.app = {classes: {}};
 		var resize_popup = function()
 		{
 			var $main_div = jQuery('#popupMainDiv');
-			var $et2 = jQuery('.et2_container');
+			let $et2 = jQuery('.et2_container');
+			let $layoutTable = jQuery(".et2_container > div > table", $main_div);
+			if ($layoutTable.length && $et2.width() < $layoutTable.width())
+			{
+				// Still using a layout table, and it's bigger.
+				// Use the layout table for width calculation
+				$et2 = $layoutTable;
+			}
 			var w = {
 				width: egw_getWindowInnerWidth(),
 				height: egw_getWindowInnerHeight()

api/templates/default/etemplate2.css

@@ -71,6 +71,11 @@
     height: 100%;
 }
 
+.et2_container > div:not([class]) > table {
+	table-layout: fixed;
+	width: 100%;
+}
+
 /**
  * Basic rules
  */