diff --git a/core/wiki/macros/sidebar-resizer.tid b/core/wiki/macros/sidebar-resizer.tid
index 11cf95361..b08aa59c9 100644
--- a/core/wiki/macros/sidebar-resizer.tid
+++ b/core/wiki/macros/sidebar-resizer.tid
@@ -3,8 +3,12 @@ tags: $:/tags/Global
 
 \procedure sidebar-resizer-pointerdown-actions()
 <%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]] %>
-	<$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} dragDiff=<<event-fromselected-posx>> dragDiffPercentage={{{ [<dragDiff>divide<viewportWidth>] }}} dragWidthPercentage={{{ [<tv-selectednode-width>divide<viewportWidth>] }}} sidebarOffsetPercentage={{{ [[22]divide<viewportWidth>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>subtract<leftOffset>divide<viewportWidth>subtract<dragDiffPercentage>] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract<sidebarOffsetPercentage>] }}}>
-		<$action-setfield $tiddler="$:/state/sidebar/posx"
+	<$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} dragDiff=<<event-fromselected-posx>> leftOffsetPercentage={{{ [<leftOffset>divide<viewportWidth>] }}} dragDiffPercentage={{{ [<dragDiff>divide<viewportWidth>] }}} dragWidthPercentage={{{ [<tv-selectednode-width>divide<viewportWidth>] }}} sidebarOffsetPercentage={{{ [[22]divide<viewportWidth>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>divide<viewportWidth>subtract<dragDiffPercentage>] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract<sidebarOffsetPercentage>subtract<leftOffsetPercentage>] }}} widgetNodeWidthPercentage={{{ [<tv-widgetnode-width>divide<viewportWidth>] }}}>
+		<$action-setfield $tiddler="$:/state/sidebar/dimensions"
+			left-offset=<<leftOffset>>
+			left-offset-percentage=<<leftOffsetPercentage>>
+			widget-node-width-percentage=<<widgetNodeWidthPercentage>>
+			widget-node-width=<<tv-widgetnode-width>>
 			drag-width=<<tv-selectednode-width>>
 			drag-diff=<<dragDiff>>
 			drag-diff-percentage=<<dragDiffPercentage>>
@@ -23,8 +27,8 @@ tags: $:/tags/Global
 \end
 \procedure sidebar-resizer-pointermove-actions()
 <%if [[$:/state/sidebar/resizing]!is[missing]] %>
-	<$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>subtract<leftOffset>divide<viewportWidth>subtract{$:/state/sidebar/posx!!drag-diff-percentage}] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract{$:/state/sidebar/posx!!sidebar-offset-percentage}] }}}>
-		<$action-setfield $tiddler="$:/state/sidebar/posx"
+	<$let leftOffset={{$:/state/sidebar/dimensions!!left-offset}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} leftOffsetPercentage={{{ [<leftOffset>divide<viewportWidth>] }}} storyRiverPercentage={{{ [<event-fromcatcher-posx>divide<viewportWidth>subtract{$:/state/sidebar/dimensions!!drag-diff-percentage}] }}} sidebarPercentage={{{ [[1]subtract<storyRiverPercentage>subtract{$:/state/sidebar/dimensions!!sidebar-offset-percentage}subtract<leftOffsetPercentage>] }}}>
+		<$action-setfield $tiddler="$:/state/sidebar/dimensions"
 			story-river-percentage=<<storyRiverPercentage>>
 			sidebar-percentage=<<sidebarPercentage>>/>
 	</$let>
diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer.tid b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
index 391b6d3f5..69c746c50 100644
--- a/themes/tiddlywiki/vanilla/sidebar-resizer.tid
+++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
@@ -74,15 +74,15 @@ code-body: yes
 	}
 
 	.tc-sidebar-resizer-pointerdown-eventcatcher {
-		z-index: 3;
+		z-index: 800;
 	}
 
 	.tc-sidebar-resizer-pointermove-eventcatcher {
-		z-index: 4;
+		z-index: 801;
 	}
 
 	.tc-sidebar-resizer-pointermove {
-		z-index: 5;
+		z-index: 802;
 		cursor: ew-resize;
 	}
 
@@ -92,23 +92,24 @@ code-body: yes
 
 <% endif %>
 
-<%if [[$:/state/sidebar/posx]!is[missing]then{$:/state/sidebar}!match[no]] %>
-
-	.tc-sidebar-resizer-pointerdown-eventcatcher {
-		right: auto;
-		width: calc(100% + (100vw - 100%));
-	}
-
-	.tc-sidebar-resizer {
-		right: min(max(calc(({{$:/state/sidebar/posx!!sidebar-percentage}} * 100%)),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc((100vw - 100%) + (100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}) - 22px));
-	}
+<%if [[$:/state/sidebar/dimensions]!is[missing]then{$:/state/sidebar}!match[no]] %>
 
 	.tc-story-river {
-		width: min(max(calc({{$:/state/sidebar/posx!!story-river-percentage}} * 100%),{{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
+		width: max(min(calc(({{$:/state/sidebar/dimensions!!story-river-percentage}} * 100vw) - ({{$:/state/sidebar/dimensions!!widget-node-width}}px - 100vw + {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}) - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),{{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}});
 	}
 
 	.tc-sidebar-scrollable {
-		width: min(max(calc(({{$:/state/sidebar/posx!!sidebar-percentage}} * 100%)),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc((100vw - 100%) + (100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}) - 22px));
+		width: min(max(calc({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - ({{$:/state/sidebar/dimensions!!widget-node-width}}px - 100vw + {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}) - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 22px));
+	}
+
+	.tc-sidebar-resizer-pointerdown-eventcatcher {
+		right: auto;
+		max-width: max(min(calc((100% + ({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw) + 22px) - (100vw - 100% - 22px - ({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw))),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
+		min-width: max(min(calc((100% + ({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw) + 22px) - (100vw - 100% - 22px - ({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw))),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
+	}
+
+	.tc-sidebar-resizer {
+		right: min(max(calc({{$:/state/sidebar/dimensions!!sidebar-percentage}} * 100vw),calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px)),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - ({{$:/state/sidebar/dimensions!!widget-node-width}}px - 100vw + {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}) - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - 22px));
 	}
 
 <% endif %>