diff --git a/core/ui/PageTemplate/sidebar-resizer.tid b/core/ui/PageTemplate/sidebar-resizer.tid
new file mode 100644
index 000000000..cb626cf2b
--- /dev/null
+++ b/core/ui/PageTemplate/sidebar-resizer.tid
@@ -0,0 +1,26 @@
+title: $:/core/ui/PageTemplate/sidebar-resizer
+tags: $:/tags/PageTemplate
+list-after: $:/core/ui/PageTemplate/story
+
+\import $:/core/macros/sidebar-resizer
+\whitespace trim
+
+<$eventcatcher tag="div" class="tc-sidebar-resizer-pointerdown-eventcatcher" selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" $pointerdown=<<sidebar-resizer-pointerdown-actions>> $pointerup=<<sidebar-resizer-pointercancel-actions>>>
+
+<%if [{$:/state/sidebar}!match[no]] %>
+
+<$eventcatcher tag="div" class="tc-sidebar-resizer-pointermove-eventcatcher-wrapper" selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" $pointerup={{{ [[$:/state/sidebar/resizing]!is[missing]then<sidebar-resizer-pointercancel-actions>] }}}>
+
+<$eventcatcher tag="div" selector=".tc-sidebar-resizer-pointermove" matchSelector=".tc-sidebar-resizer-pointermove" class="tc-sidebar-resizer-pointermove-eventcatcher" $pointerup=<<sidebar-resizer-pointercancel-actions>> $pointerleave=<<sidebar-resizer-pointercancel-actions>> $pointerout=<<sidebar-resizer-pointercancel-actions>> $pointercancel=<<sidebar-resizer-pointercancel-actions>> $pointerdown=<<sidebar-resizer-pointercancel-actions>> $touchstart=<<sidebar-resizer-pointercancel-actions>> $pointermove=<<sidebar-resizer-pointermove-actions>> $contextmenu=<<sidebar-resizer-pointercancel-actions>>>
+
+<div class="tc-sidebar-resizer-pointermove"/>
+
+</$eventcatcher>
+
+<div class="tc-sidebar-resizer"/>
+
+</$eventcatcher>
+
+<% endif %>
+
+</$eventcatcher>
\ No newline at end of file
diff --git a/core/wiki/macros/sidebar-resizer.tid b/core/wiki/macros/sidebar-resizer.tid
index 6fd13fa4b..5ee7c20c9 100644
--- a/core/wiki/macros/sidebar-resizer.tid
+++ b/core/wiki/macros/sidebar-resizer.tid
@@ -2,7 +2,7 @@ title: $:/core/macros/sidebar-resizer
 
 \procedure sidebar-resizer-pointerdown-actions()
 <%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]then<modifier>match[normal]] %>
-	<$let dragDiff=<<event-fromselected-posx>> dragWidth=<<tv-selectednode-width>> rightDiff={{{ [<dragWidth>subtract<dragDiff>] }}} storyRiverWidth={{{ [<event-fromcatcher-posx>subtract<dragDiff>subtract[14]] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>subtract<dragDiff>subtract[14]] }}}>
+	<$let dragDiff=<<event-fromselected-posx>> dragWidth=<<tv-selectednode-width>> rightDiff={{{ [<dragWidth>subtract<dragDiff>] }}} storyRiverWidth={{{ [<event-fromcatcher-posx>subtract<dragDiff>subtract[14]] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>add<dragDiff>add[14]] }}}>
 		<%if  [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
 			<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" text={{{ [<storyRiverWidth>addsuffix[px]] }}}/>
 			<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" text={{{ [<event-fromcatcher-posx>add<rightDiff>add[6]addsuffix[px]] }}}/>
@@ -18,7 +18,7 @@ title: $:/core/macros/sidebar-resizer
 \end
 \procedure sidebar-resizer-pointermove-actions()
 <%if [[$:/state/sidebar/resizing]!is[missing]] %>
-	<$let storyRiverWidth={{{ [<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!drag-diff}subtract[14]] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!drag-diff}subtract[14]] }}}>
+	<$let storyRiverWidth={{{ [<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!drag-diff}subtract[14]] }}} sidebarWidth={{{ [<tv-widgetnode-width>subtract<event-fromcatcher-posx>add{$:/state/sidebar/resizing!!drag-diff}add[14]] }}}>
 		<%if  [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
 			<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" text={{{ [<storyRiverWidth>addsuffix[px]] }}}/>
 			<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" text={{{ [<event-fromcatcher-posx>add{$:/state/sidebar/resizing!!right-diff}add[6]addsuffix[px]] }}}/>
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index c13b69f9b..a8b2c19b9 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -1027,7 +1027,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	.tc-sidebar-scrollable {
 		position: fixed;
 		top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
-		left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
+		left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),{{$:/themes/tiddlywiki/vanilla/metrics/storyright}},calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}}));
 		bottom: 0;
 		right: 0;
 		overflow-y: auto;
@@ -1046,7 +1046,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 		position: relative;
 		left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
 		top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
-		width: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}};
+		width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
 		padding: 42px 42px 42px 42px;
 	}
 
@@ -1481,7 +1481,7 @@ html body.tc-body.tc-single-tiddler-window {
 		width: auto;
 		left: 0;
 		margin-left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
-		margin-right: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
+		margin-right: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},{{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}},calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}));
 	}
 
 	.tc-tiddler-frame {
@@ -1492,7 +1492,7 @@ html body.tc-body.tc-single-tiddler-window {
 		left: auto;
 		bottom: 0;
 		right: 0;
-		width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
+		width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},{{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}},calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}));
 	}
 
 	body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
diff --git a/themes/tiddlywiki/vanilla/metrics.multids b/themes/tiddlywiki/vanilla/metrics.multids
index 3607bd6c9..87a9021ef 100644
--- a/themes/tiddlywiki/vanilla/metrics.multids
+++ b/themes/tiddlywiki/vanilla/metrics.multids
@@ -4,10 +4,12 @@ bodyfontsize: 15px
 bodylineheight: 22px
 fontsize: 14px
 lineheight: 20px
+sidebarbreakpoint: 960px
+sidebarminwidth: 350px
+sidebarwidth: 350px
 storyleft: 0px
+storyminwidth: 350px
 storytop: 0px
 storyright: 770px
 storywidth: 770px
-tiddlerwidth: 686px
-sidebarbreakpoint: 960px
-sidebarwidth: 350px
+tiddlerwidth: 686px
\ No newline at end of file
diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer.tid b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
new file mode 100644
index 000000000..0baf61429
--- /dev/null
+++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
@@ -0,0 +1,136 @@
+title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
+tags: [[$:/tags/Stylesheet]]
+code-body: yes
+
+\function sidebarbreakpoint() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
+
+\function sidebarbreakpoint-minus-one() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional
+
+@media (min-width: <<sidebarbreakpoint>>) {
+
+	.tc-sidebar-resizer {
+		position: fixed;
+		top: 0;
+		height: 100%;
+		width: 22px;
+		z-index: 1;
+		transition: opacity 100ms;
+		opacity: 0.1;
+		cursor: ew-resize;
+		background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
+	}
+
+	.tc-sidebar-resizer:hover {
+		opacity: 0.6;
+	}
+
+	@media (pointer: coarse) {
+
+		.tc-sidebar-resizer {
+			background: <<colour muted-foreground>>;
+		}
+
+		.tc-sidebar-resizer:hover {
+			opacity: 0.1;
+		}
+	}
+	
+	.tc-sidebar-resizer-pointerdown-eventcatcher {
+		z-index: 0;
+	}
+
+	.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+
+	.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
+		width: 100%;
+		height: 100%;
+		min-height: 100%;
+		z-index: -1;
+	}
+
+	.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
+		z-index: -1;
+	}
+
+	.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
+		touch-action: none;
+		user-select: none;
+	}
+
+	<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
+
+		.tc-sidebar-resizer {
+			right: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyright}} + 6px);
+		}
+
+	<% endif %>
+
+	<%if [[$:/state/sidebar/resizing]!is[missing]] %>
+
+		.tc-sidebar-resizer-pointerdown-eventcatcher {
+			z-index: 800;
+		}
+
+		.tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
+			z-index: 801;
+		}
+
+		.tc-sidebar-resizer-pointermove-eventcatcher {
+			z-index: 802;
+		}
+
+		.tc-sidebar-resizer-pointermove {
+			z-index: 803;
+			cursor: ew-resize;
+		}
+
+		.tc-sidebar-resizer {
+			opacity: 0.6;
+		}
+
+		@media (pointer: coarse) {
+
+			.tc-sidebar-resizer {
+				opacity: 0.25;
+			}
+		}
+
+	<% endif %>
+
+	<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
+
+		.tc-sidebar-resizer {
+			left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 36px),calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} - 36px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - 36px));
+		}
+
+	<% else %>
+
+		.tc-sidebar-resizer {
+			left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + 14px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} + 14px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + 14px));
+		}
+
+	<% endif %>
+
+	<%if [{$:/state/sidebar}match[no]] %>
+
+		tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
+			display: none;
+		}
+
+	<% endif %>
+
+}
+
+@media (max-width: <<sidebarbreakpoint-minus-one>>) {
+
+	.tc-sidebar-resizer-pointermove-eventcatcher-wrapper, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
+		display: none;
+	}
+}
\ No newline at end of file