Rejig the page layout to use the scrollable widget

This is the start of some refactoring of the main layout CSS intended
to give us more flexibility and control.

core/ui/PageTemplate/alerts.tid

@@ -0,0 +1,8 @@
+title: $:/core/ui/PageTemplate/alerts
+tags: $:/tags/PageTemplate
+
+<div class="tw-alerts">
+
+<$list filter="[is[shadow]!has[draft.of]tag[$:/tags/Alert]] [!is[shadow]!has[draft.of]tag[$:/tags/Alert]] +[sort[modified]]" template="$:/core/ui/AlertTemplate" storyview="pop"/>
+
+</div>

core/ui/PageTemplate/sidebar.tid

@@ -1,6 +1,10 @@
 title: $:/core/ui/PageTemplate/sidebar
 tags: $:/tags/PageTemplate
 
+<div class="tw-sidebar-scrollable-backdrop"/>
+
+<$scrollable fallthrough="no" class="tw-sidebar-scrollable">
+
 <header class="sidebar-header">
 
 <div class="titlebar">{{$:/SiteTitle}}</div>
@@ -15,3 +19,5 @@ tags: $:/tags/PageTemplate
 {{$:/core/ui/SideBarLists}}
 
 </header>
+
+</$scrollable>

core/ui/PageTemplate/story.tid

@@ -1,17 +1,12 @@
 title: $:/core/ui/PageTemplate/story
 tags: $:/tags/PageTemplate
 
+<$scrollable class="tw-story-scrollable">
+
 <section class="story-river">
 
-<!-- Alerts -->
-<div class="tw-alerts">
-
-<$list filter="[is[shadow]!has[draft.of]tag[$:/tags/Alert]] [!is[shadow]!has[draft.of]tag[$:/tags/Alert]] +[sort[modified]]" template="$:/core/ui/AlertTemplate" storyview="pop"/>
-
-</div>
-
-<!-- The main story -->
 <$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/ViewTemplate" editTemplate="$:/core/ui/EditTemplate" storyview={{$:/view}} />
 
-<!-- End of story river -->
 </section>
+
+</$scrollable>