diff --git a/core/ui/PageTemplate/story.tid b/core/ui/PageTemplate/story.tid
index 38e723835..584428d03 100644
--- a/core/ui/PageTemplate/story.tid
+++ b/core/ui/PageTemplate/story.tid
@@ -4,6 +4,18 @@ tags: $:/tags/PageTemplate
 \whitespace trim
 <section class="tc-story-river" role="main">
 
+<$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-pointerup-actions>>>
+
+<$eventcatcher tag="div" selector=".tc-sidebar-resizer-pointermove" matchSelector=".tc-sidebar-resizer-pointermove" class="tc-sidebar-resizer-pointermove-eventcatcher" $pointerup=<<sidebar-resizer-pointerup-actions>> $pointermove=<<sidebar-resizer-pointermove-actions>> $pointerleave=<<sidebar-resizer-pointerup-actions>> $pointerout=<<sidebar-resizer-pointerup-actions>>>
+
+<div class="tc-sidebar-resizer-pointermove"/>
+
+</$eventcatcher>
+
+<div class="tc-sidebar-resizer"/>
+
+</$eventcatcher>
+
 <section class="story-backdrop">
 
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/AboveStory]!has[draft.of]]">
diff --git a/core/wiki/macros/sidebar-resizer.tid b/core/wiki/macros/sidebar-resizer.tid
new file mode 100644
index 000000000..11cf95361
--- /dev/null
+++ b/core/wiki/macros/sidebar-resizer.tid
@@ -0,0 +1,32 @@
+title: $:/core/macros/sidebar-resizer
+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"
+			drag-width=<<tv-selectednode-width>>
+			drag-diff=<<dragDiff>>
+			drag-diff-percentage=<<dragDiffPercentage>>
+			drag-width-percentage=<<dragWidthPercentage>>
+			sidebar-offset-percentage=<<sidebarOffsetPercentage>>
+			story-river-percentage=<<storyRiverPercentage>>
+			sidebar-percentage=<<sidebarPercentage>>/>
+		<$action-setfield $tiddler="$:/state/sidebar/resizing" text="yes"/>
+	</$let>
+<% endif %>
+\end
+\procedure sidebar-resizer-pointerup-actions()
+<%if [[$:/state/sidebar/resizing]!is[missing]] %>
+	<$action-deletetiddler $tiddler="$:/state/sidebar/resizing"/>
+<% endif %>
+\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"
+			story-river-percentage=<<storyRiverPercentage>>
+			sidebar-percentage=<<sidebarPercentage>>/>
+	</$let>
+<% endif %>
+\end
\ No newline at end of file
diff --git a/themes/tiddlywiki/vanilla/metrics.multids b/themes/tiddlywiki/vanilla/metrics.multids
index 3607bd6c9..9579e8a63 100644
--- a/themes/tiddlywiki/vanilla/metrics.multids
+++ b/themes/tiddlywiki/vanilla/metrics.multids
@@ -5,9 +5,10 @@ bodylineheight: 22px
 fontsize: 14px
 lineheight: 20px
 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
index 6bec06639..391b6d3f5 100644
--- a/themes/tiddlywiki/vanilla/sidebar-resizer.tid
+++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
@@ -1 +1,123 @@
 title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
+tags: [[$:/tags/Stylesheet]]
+code-body: yes
+
+\define sidebarbreakpoint()
+<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
+\end
+
+\define sidebarbreakpoint-minus-one()
+<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
+\end
+
+@media (min-width: <<sidebarbreakpoint>>) {
+
+.tc-sidebar-scrollable {
+	padding-left: 20px;
+	width: calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px);
+	z-index: 1;
+}
+
+.tc-sidebar-resizer-pointerdown-eventcatcher {
+	position: absolute;
+	top: calc(0px - {{$:/themes/tiddlywiki/vanilla/metrics/storytop}});
+	left: 0;
+	right: calc(-{{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}});
+	height: 100%;
+	min-height: 100vh;
+	z-index: 0;
+}
+
+.tc-sidebar-resizer-pointermove-eventcatcher {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	min-height: 100vh;
+	z-index: -1;
+}
+
+.tc-sidebar-resizer-pointermove {
+	position: absolute;
+	top: 0;
+	left: calc(100% - 100vw);
+	right: 0;
+	width: 100vw;
+	height: 100%;
+	min-height: 100vh;
+	z-index: -1;
+}
+
+.tc-sidebar-resizer {
+	position: fixed;
+	top: 0;
+	right: calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px);
+	height: 100vh;
+	width: 22px;
+	z-index: 2;
+	transition: opacity 100ms;
+	opacity: 0;
+	cursor: ew-resize;
+	background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
+}
+
+.tc-sidebar-resizer:hover {
+	opacity: 0.8;
+}
+
+<%if [[$:/state/sidebar/resizing]!is[missing]] %>
+
+	.tc-sidebar-scrollable {
+		z-index: -1;
+	}
+
+	.tc-sidebar-resizer-pointerdown-eventcatcher {
+		z-index: 3;
+	}
+
+	.tc-sidebar-resizer-pointermove-eventcatcher {
+		z-index: 4;
+	}
+
+	.tc-sidebar-resizer-pointermove {
+		z-index: 5;
+		cursor: ew-resize;
+	}
+
+	.tc-sidebar-resizer {
+		opacity: 0.8;
+	}
+
+<% 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));
+	}
+
+	.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}}));
+	}
+
+	.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));
+	}
+
+<% endif %>
+
+}
+
+@media (max-width: <<sidebarbreakpoint-minus-one>>) {
+
+	.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer {
+		display: none;
+	}
+}
\ No newline at end of file