Index: Resources/Private/Layouts/popup.html
===================================================================
--- Resources/Private/Layouts/popup.html	(revision 3897)
+++ Resources/Private/Layouts/popup.html	(revision 3898)
@@ -10,6 +10,8 @@
 			// poor way to avoid that we require any scrollbars within the frames
 		var finalHeight = height * 1.1;
 		Ext.getCmp('visualPanel').setHeight(finalHeight);
+		Ext.getCmp('liveContainer').setHeight((100-Ext.getCmp('sizeSlider').getValue()/100) * finalHeight);
+		Ext.getCmp('wsContainer').setHeight(finalHeight);
 		Ext.getCmp('wsPanel').setHeight(finalHeight);
 		Ext.getCmp('livePanel').setHeight(finalHeight);
 	}
Index: Resources/Private/Templates/Preview/Preview.html
===================================================================
--- Resources/Private/Templates/Preview/Preview.html	(revision 3897)
+++ Resources/Private/Templates/Preview/Preview.html	(revision 3898)
@@ -1,19 +1,45 @@
 <script type="text/javascript">
-	document.domain =  '{backendDomain}';
 
 		// @todo redirect to split module if this is opened standalone
 
-		// make sure we're in the workspace preview module 
-	if (typeof parent.resize == 'function') {
-		parent.resize(
-			Math.max(
-				Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
-				Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
-				Math.max(document.body.clientHeight, document.documentElement.clientHeight)
-			)
-		);
+		// having this is very important, otherwise the parent.resize call will fail
+	document.domain = '{backendDomain}';
 
-		var element = document.getElementById('typo3-previewInfo');
-		element.parentNode.removeChild(element);
+	var asNumber = function(val) {
+		return isNaN(val) ? 0 : parseInt(val, 10);
+	};
+	var TYPO3 = {};
+	TYPO3.ready = function () {
+		// make sure we're in the workspace preview module
+		if (typeof parent.resize == 'function') {
+				// try to find the height of the document
+			var docHeight = Math.max(
+				asNumber(window.innerHeight),
+				asNumber(document.height),
+				asNumber(document.body.scrollHeight),
+				asNumber(document.body.offsetHeight),
+				asNumber(document.body.clientHeight),
+				asNumber(document.documentElement.scrollHeight),
+				asNumber(document.documentElement.offsetHeight),
+				asNumber(document.documentElement.clientHeight)
+			);
+			parent.resize(docHeight);
+				// remove the ugly red box if we're in the ws-repview frames
+			var element = document.getElementById('typo3-previewInfo');
+			element.parentNode.removeChild(element);
+		}
+	};
+		// trigger this after content is loaded, inspired by jQuery
+	if (document.addEventListener && !/opera/.test(navigator.userAgent.toLowerCase())) {
+		document.addEventListener("DOMContentLoaded", TYPO3.ready, false);
+	} else {
+		(function() {
+			if (document.readyState != "loaded" && document.readyState != "complete") {
+				setTimeout(arguments.callee, 10);
+			} else {
+				TYPO3.ready();
+			}
+		})();
 	}
+
 </script>
Index: Resources/Public/JavaScript/preview.js
===================================================================
--- Resources/Public/JavaScript/preview.js	(revision 3897)
+++ Resources/Public/JavaScript/preview.js	(revision 3898)
@@ -25,6 +25,8 @@
  ***************************************************************/
 
 Ext.onReady(function() {
+	var iconClsChecked = 't3-icon t3-icon-status t3-icon-status-status t3-icon-status-checked';
+	var iconClsEmpty = 't3-icon t3-icon-empty t3-icon-empty-empty t3-icon-empty';
 	var viewport = new Ext.Viewport({
 		layout: 'border',
 		items: [{
@@ -35,96 +37,222 @@
 			plugins : [{
 				ptype : 'Ext.ux.plugins.TabStripContainer',
 				id: 'controls',
-				width: 400,
-				items: [{
-					xtype: 'button',
-					id: 'sizeSliderButtonLive',
-					cls: 'sliderButton',
-					text: TYPO3.LLL.Workspaces.livePreview,
-					width: 100,
-					listeners: {
-						click: {
-							fn: function () {
-								Ext.getCmp('sizeSlider').setValue(0);
-							}
-						}
-					}
-				},
-				{
-					xtype: 'slider',
-					id: 'sizeSlider',
-					margins: '0 10 0 10',
-					maxValue: 100,
-					minValue: 0,
-					value: 100,
-					flex: 1,
-					listeners: {
-						change: {
-							fn: function resizeFromValue(slider, newValue, thumb) {
-								var height = Ext.getCmp('wsPanel').getHeight();
-								Ext.getCmp('liveContainer').setHeight(height * (100 - newValue) / 100);
-								Ext.getCmp('visualPanel').setHeight(height);
-							}
-						}
-					}
-				},
-				{
-					xtype: 'button',
-					id: 'sizeSliderButtonWorkspace',
-					cls: 'sliderButton',
-					text: TYPO3.LLL.Workspaces.workspacePreview,
-					width: 100,
-					listeners: {
-						click: {
-							fn: function () {
-								Ext.getCmp('sizeSlider').setValue(100);
-							}
-						}
-					}
-				}]
+				width: 600,
+				items: [
+						{
+							xtype: 'panel',
+							id: 'slider',
+							width: 460,
+							layout: 'hbox',
+							items: [
+								{
+									xtype: 'button',
+									id: 'sizeSliderButtonLive',
+									cls: 'sliderButton',
+									text: TYPO3.LLL.Workspaces.livePreview,
+									tooltip: TYPO3.LLL.Workspaces.livePreviewDetail,
+									width: 100,
+									listeners: {
+										click: {
+											fn: function () {
+												Ext.getCmp('sizeSlider').setValue(0);
+											}
+										}
+									}
+								},
+								{
+									xtype: 'slider',
+									id: 'sizeSlider',
+									margins: '0 10 0 10',
+									maxValue: 100,
+									minValue: 0,
+									value: 100,
+									width: 200,
+									flex: 1,
+									listeners: {
+										change: {
+											fn: function resizeFromValue(slider, newValue, thumb) {
+												var height = Ext.getCmp('wsPanel').getHeight();
+												Ext.getCmp('liveContainer').setHeight(height * (100 - newValue) / 100);
+												//Ext.getCmp('visualPanel').setHeight(height);
+											}
+										}
+									}
+								},
+								{
+									xtype: 'button',
+									id: 'sizeSliderButtonWorkspace',
+									cls: 'sliderButton',
+									text: TYPO3.LLL.Workspaces.workspacePreview,
+									tooltip: TYPO3.LLL.Workspaces.workspacePreviewDetail,
+									width: 100,
+									listeners: {
+										click: {
+											fn: function () {
+												Ext.getCmp('sizeSlider').setValue(100);
+											}
+										}
+									}
+								}
+							]
+						},
+						{
+							xtype: 'toolbar',
+							id: 'visual-mode-toolbar',
+							items: [{
+								iconCls: 'x-btn-icon t3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-options-view',
+								id: 'visual-mode-options',
+								menu: {
+									id: 'visual-mode-selector',
+									items: [{
+										text: TYPO3.LLL.Workspaces.modeSlider,
+										id: 'visual-mode-selector-slider',
+										iconCls: iconClsChecked,
+										handler: function(){
+											Ext.getCmp('visualPanel-hbox').hide();
+											Ext.getCmp('visualPanel-vbox').hide();
+											Ext.getCmp('visualPanel').show();
+											Ext.getCmp('slider').show();
+											Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" "))
+											Ext.getCmp('visual-mode-selector-slider').setIconClass(iconClsChecked);
+											Ext.getCmp('visual-mode-selector-hbox').setIconClass(iconClsEmpty);
+											Ext.getCmp('visual-mode-selector-vbox').setIconClass(iconClsEmpty);
+										}
+									},{
+										text: TYPO3.LLL.Workspaces.modeVbox,
+										id: 'visual-mode-selector-vbox',
+										iconCls: iconClsEmpty,
+										handler: function() {
+											Ext.getCmp('visualPanel-hbox').hide();
+											Ext.getCmp('visualPanel-vbox').show();
+											Ext.getCmp('visualPanel').hide();
+											Ext.getCmp('slider').hide();
+											Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" "))
+											Ext.getCmp('visual-mode-selector-slider').setIconClass(iconClsEmpty);
+											Ext.getCmp('visual-mode-selector-vbox').setIconClass(iconClsChecked)
+											Ext.getCmp('visual-mode-selector-hbox').setIconClass(iconClsEmpty);
+										}
+									},{
+										text: TYPO3.LLL.Workspaces.modeHbox,
+										id: 'visual-mode-selector-hbox',
+										iconCls: iconClsEmpty,
+										handler: function(){
+											Ext.getCmp('visualPanel-hbox').show();
+											Ext.getCmp('visualPanel-vbox').hide();
+											Ext.getCmp('visualPanel').hide();
+											Ext.getCmp('slider').hide();
+											Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" "))
+											Ext.getCmp('visual-mode-selector-slider').setIconClass(iconClsEmpty);
+											Ext.getCmp('visual-mode-selector-vbox').setIconClass(iconClsEmpty);
+											Ext.getCmp('visual-mode-selector-hbox').setIconClass(iconClsChecked);
+										}
+									}]
+								}
+							}]
+						}]
 			}],
 			items: [{
 				title: TYPO3.LLL.Workspaces.visualPreview,
 				id: 'wsVisual',
 				layout: 'fit',
+				anchor: '100% 100%',
 				items: [{
-					layout: 'fit',
+					layout: 'absolute',
+					anchor: '100% 100%',
 					x: 0, y:0,
-					anchor: '100% 100%',
-					autoScroll: true,
 					items: [{
-						layout: 'absolute',
-						id: 'visualPanel',
-						items: [{
+							layout: 'fit',
 							x: 0, y:0,
 							anchor: '100% 100%',
-							id: 'wsContainer',
-							layout: 'absolute',
-							autoScroll: false,
-							items:[{
+							autoScroll: true,
+							items: [{
+								layout: 'absolute',
+								id: 'visualPanel',
+								items: [{
+									x: 0, y:0,
+									anchor: '100% 100%',
+									id: 'wsContainer',
+									layout: 'absolute',
+									autoScroll: false,
+									items:[{
+										xtype: 'iframePanel',
+										x: 0, y:0,
+										id: 'wsPanel',
+										doMask: false,
+										src: wsUrl,
+										autoScroll: false
+									}]
+								},{
+									x: 0, y:0,
+									anchor: '100% 0%',
+									id: 'liveContainer',
+									layout: 'absolute',
+									bodyStyle: 'height:0px;border-bottom: 2px solid red;',
+									autoScroll: false,
+									items:[{
+										xtype: 'iframePanel',
+										x: 0, y:0,
+										id: 'livePanel',
+										doMask: false,
+										src: liveUrl,
+										autoScroll: false
+									}]
+								}]
+							}]
+						},{
+							layout: 'hbox',
+							hidden: true,
+							x: 0, y:0,
+							anchor: '100% 100%',
+							layoutConfig: {
+								align : 'stretch',
+								pack  : 'start'
+							},
+							id: 'visualPanel-hbox',
+							items: [{
 								xtype: 'iframePanel',
 								x: 0, y:0,
-								id: 'wsPanel',
+								id: 'wsPanel-hbox',
 								doMask: false,
 								src: wsUrl,
-								autoScroll: false
+								autoScroll: false,
+								flex: 1
+							},{
+								xtype: 'iframePanel',
+								x: 0, y:0,
+								id: 'livePanel-hbox',
+								doMask: false,
+								src: liveUrl,
+								autoScroll: false,
+								flex: 1
 							}]
-						},{
+					},{
+							layout: 'vbox',
+							hidden: true,
 							x: 0, y:0,
-							anchor: '100% 0%',
-							id: 'liveContainer',
-							layout: 'absolute',
-							bodyStyle: 'height:0px;border-bottom: 2px solid red;',
-							autoScroll: false,
-							items:[{
+							anchor: '100% 100%',
+							layoutConfig: {
+								align : 'stretch',
+								pack  : 'start'
+							},
+							id: 'visualPanel-vbox',
+							items: [{
 								xtype: 'iframePanel',
 								x: 0, y:0,
-								id: 'livePanel',
+								id: 'wsPanel-vbox',
 								doMask: false,
+								src: wsUrl,
+								autoScroll: false,
+								flex: 1
+							},{
+								xtype: 'iframePanel',
+								x: 0, y:0,
+								id: 'livePanel-vbox',
+								doMask: false,
 								src: liveUrl,
-								autoScroll: false
+								autoScroll: false,
+								flex: 1
 							}]
-						}]
 					}]
 				}]
 			},{
Index: Resources/Public/StyleSheet/preview.css
===================================================================
--- Resources/Public/StyleSheet/preview.css	(revision 3897)
+++ Resources/Public/StyleSheet/preview.css	(revision 3898)
@@ -103,8 +103,11 @@
  * Slider
  */
 #controls {
-	padding-top: 10px;
+	padding-top: 5px;
 }
+#slider {
+	padding-top: 5px;
+}
 
 /* remove default ExtJS border */
 .x-panel-body {
@@ -143,6 +146,48 @@
 	text-align: left;
 }
 
+#visual-mode-selector {
+	list-style: none;
+	background-color: #f9f9f9;
+	border: 1px solid #abb2bc;
+	border-top: none;
+}
+
+#visual-mode-selector td {
+	text-align: left;
+}
+
+#visual-mode-selector td button {
+	font-size: 11px;
+	line-height: 12px;
+	text-decoration: none;
+}
+
+#visual-mode-options {
+	display: block;
+	height: 20px;
+	margin: 5px 0 0 0;
+}
+#visual-mode-options.x-btn-menu-active {
+	background-color: #f9f9f9;
+	border: 1px solid #abb2bc;
+	border-bottom: none;
+}
+#visual-mode-options .x-btn-arrow {
+	padding-right: 2px;
+}
+
+#visual-mode-options .x-btn-text {
+	font-size: 11px;
+}
+#visual-mode-options.x-btn-menu-active .x-btn-text {
+	color: black;
+}
+
+#visual-mode-toolbar {
+	border:none;
+}
+
 /**
  * Preview panel
  */
Index: ext_emconf.php
===================================================================
--- ext_emconf.php	(revision 3897)
+++ ext_emconf.php	(revision 3898)
@@ -26,7 +26,7 @@
 	'uploadfolder' => 0,
 	'createDirs' => '',
 	'modify_tables' => '',
-	'clearCacheOnLoad' => 0,
+	'clearCacheOnLoad' => 1,
 	'lockType' => '',
 	'author_company' => '',
 	'version' => '4.5.0beta4',