fix problem that resizing redraw the editor and preview

core/wiki/macros/sidebar-resizer.tid

@@ -503,7 +503,7 @@ title: $:/core/procedures/sidebar-resizer
 			class=<<get.active.class tc-slider-pointermove-eventcatcher-wrapper>>
 			selector=".tc-slider"
 			matchSelector=".tc-slider"
-			$pointerup=<<sidebar-resizer-pointercancel-actions>>>
+			$pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}>
 
 			<$eventcatcher
 				tag="div"
@@ -517,7 +517,6 @@ title: $:/core/procedures/sidebar-resizer
 				$pointerdown=<<sidebar-resizer-pointercancel-actions>>
 				$touchstart=<<sidebar-resizer-pointercancel-actions>>
 				$pointermove=<<sidebar-resizer-pointermove-actions>>
-				$touchmove=<<sidebar-resizer-pointermove-actions>>
 				$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
 
 				<div class=<<get.active.class tc-slider-pointermove>>/>
@@ -532,18 +531,18 @@ title: $:/core/procedures/sidebar-resizer
 
 			<% endif %>
 
-			<%if [<template>is[variable]] %>
-
-				<$transclude $variable=<<template>> mode=<<mode>>/>
-
-			<% else %>
-
-				<$transclude $tiddler=<<template>> mode=<<mode>>/>
-
-			<% endif %>
-
 		</$eventcatcher>
 
+		<%if [<template>is[variable]] %>
+
+			<$transclude $variable=<<template>> mode=<<mode>>/>
+
+		<% else %>
+
+			<$transclude $tiddler=<<template>> mode=<<mode>>/>
+
+		<% endif %>
+
 	<% endif %>
 
 </$eventcatcher>

themes/tiddlywiki/vanilla/base.tid

@@ -1394,6 +1394,7 @@ html[dir="rtl"] .tc-tiddler-frame .tc-tiddler-controls {
 
 .tc-tiddler-frame iframe.tc-edit-texteditor {
 	background-color: <<colour tiddler-background>>;
+	z-index: 1;
 }
 
 .tc-tiddler-frame .tc-edit-fields input.tc-edit-fieldeditor,
@@ -1464,7 +1465,7 @@ html body.tc-body.tc-single-tiddler-window {
 
 .tc-editor-toolbar {
 	background-color: <<colour tiddler-background>>;
-	z-index: 1;
+	z-index: 2;
 	padding-top: 8px;
 	margin-left: -2px;
 	margin-right: -2px;
@@ -1749,6 +1750,7 @@ html body.tc-body.tc-single-tiddler-window {
 	border: 1px solid <<colour tiddler-editor-border>>;
 	margin: 4px 0 3px 0;
 	padding: 3px 3px 3px 3px;
+	z-index: 1;
 }
 
 .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview > iframe[sandbox] {

themes/tiddlywiki/vanilla/sidebar-resizer.tid

@@ -46,13 +46,16 @@ code-body: yes
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
+	align-items: stretch;
 }
 
 .tc-slider-pointermove-eventcatcher-wrapper:not(.tc-main-slider) {
+	position: absolute;
+	width: 100%;
 	flex-direction: row;
 }
 
-.tc-slider-pointerdown-eventcatcher:not(.tc-main-slider), .tc-slider-pointermove-eventcatcher-wrapper:not(.tc-main-slider) {
+.tc-slider-pointerdown-eventcatcher:not(.tc-main-slider) {
 	position: relative;
 }
 
@@ -61,19 +64,34 @@ code-body: yes
 	user-select: none;
 }
 
-.tc-slider-pointermove-eventcatcher-wrapper.tc-resizer-active {
+.tc-slider-pointermove-eventcatcher-wrapper.tc-main-slider.tc-resizer-active {
 	z-index: 801;
 }
 
-.tc-slider-pointermove-eventcatcher.tc-resizer-active {
+.tc-slider-pointermove-eventcatcher.tc-main-slider.tc-resizer-active {
 	z-index: 802;
 }
 
-.tc-slider-pointermove.tc-resizer-active {
+.tc-slider-pointermove.tc-main-slider.tc-resizer-active {
 	z-index: 803;
+}
+
+.tc-slider-pointermove.tc-resizer-active {
 	cursor: ew-resize;
 }
 
+.tc-slider-pointermove-eventcatcher-wrapper.tc-resizer-active:not(.tc-main-slider) {
+	z-index: 2;
+}
+
+.tc-slider-pointermove-eventcatcher.tc-resizer-active:not(.tc-main-slider) {
+	z-index: 3;
+}
+
+.tc-slider-pointermove.tc-resizer-active:not(.tc-main-slider) {
+	z-index: 4;
+}
+
 .tc-slider.tc-resizer-active {
 	opacity: <<get.theme.metric slideropacityhover>>;
 }
@@ -211,7 +229,7 @@ div[class*="tc-editor-preview-slider-"] {
 		<%if [[$:/state/resizing/editor-preview-]addsuffix<identifier>is[tiddler]] %>
 
 			div.tc-slider.tc-editor-preview-slider-<<identifier>> {
-				opacity: min(calc(3 * <<get.theme.metric slideropacity>>),1);
+				opacity: min(<<get.theme.metric slideropacityhover>>,1);
 			}
 
 		<% endif %>