Put a scrollbar on the controls and shortcuts sheet

The gesture book runs to several screens inside a card that otherwise
looks complete. Same wrapping as the develop column. The bar is drawn
over the list's right edge, so it overlaps the last few pixels of each
"See it" button.

ui/dr-ui/ui/gestures.slint

@@ -22,7 +22,7 @@
 // about what a gesture is.
 
 import { Theme } from "theme.slint";
-import { Button, Caption } from "widgets.slint";
+import { Button, Caption, ScrollBar } from "widgets.slint";
 
 // One line of the sheet: a section heading, or a gesture and its routes.
 //
@@ -117,8 +117,11 @@ export component GestureSheet inherits Rectangle {
 
             // The list scrolls; the title and the button do not, so a long
             // vocabulary never pushes the way out off the bottom of the card.
-            Flickable {
+            Rectangle {
                     vertical-stretch: 1;
+                book-flick := Flickable {
+                    width: parent.width;
+                    height: parent.height;
                     viewport-width: self.width;
                     viewport-height: list.preferred-height;
 
@@ -192,6 +195,17 @@ export component GestureSheet inherits Rectangle {
                     }
                 }
 
+                // A bar for a pointer: the book runs to several screens, and the bar is
+                // what says so on a card that otherwise looks complete.
+                ScrollBar {
+                    x: parent.width - self.width;
+                    y: 0px;
+                    viewport-y <=> book-flick.viewport-y;
+                    viewport-height: book-flick.viewport-height;
+                    visible-height: book-flick.height;
+                }
+            }
+
             HorizontalLayout {
                 alignment: end;
                 spacing: Theme.gap;