Improve drawer controls.

src/scss/drawer-inject.scss

@@ -1,34 +1,43 @@
 :host {
-    // Drawer width sizes to contents.
-    width: unset;
-};
-
-#d, #fs {
-    // Override width/height to be 100% instead of 100v[wh].
-    height: 100%;
-
-    // Position absolutely.
-    position: absolute;
-}
-
-:host([location=right]) #d {
-    // Position to the right.
-    left: unset;
-    right: 0;
-    transform: translateX(100%);
-};
-
-:host([location=right][open]) #d  {
-    transform: none;
-    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.5);
+  // Drawer width sizes to contents.
+  width: unset;
 }
 
 #fs {
-    width: 100%;
-    inset: 0;
+  // Hide the freespace screen.
+  display: none;
+  width: 100%;
+  inset: 0;
+}
+
+#d,
+#fs {
+  // Override width/height to be 100% instead of 100v[wh].
+  height: 100%;
+
+  // Position absolutely.
+  position: absolute;
+}
+
+#d {
+  // Adding for control, may not need this?
+  overflow: visible;
+  visibility: visible;
+}
+
+:host([location='right']) #d {
+  // Position to the right.
+  left: unset;
+  right: 0;
+  transform: translateX(100%);
+}
+
+:host([location='right'][open]) #d {
+  transform: none;
+  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.5);
 }
 
 #ifs {
-    // Override width/height to be 100% instead of 100v[wh].
-    height: 100%;
-};
+  // Override width/height to be 100% instead of 100v[wh].
+  height: 100%;
+}

src/scss/drawer.scss

@@ -1,3 +1,49 @@
+$drawer-icon-size: 20px;
+$drawer-padding-extend: 20px;
+
 side-drawer {
-    background-color: var(--card-background-color);
+  background-color: var(--card-background-color);
+}
+
+div.control-surround {
+  position: absolute;
+  bottom: 50%;
+  z-index: 0;
+  padding-top: $drawer-padding-extend;
+  padding-bottom: $drawer-padding-extend;
+}
+:host([location='left']) div.control-surround {
+  @if $drawer-icon-size < 32 {
+    // Ensure the clickable area is at least 32px wide.
+    padding-right: calc(32px - $drawer-icon-size);
+  }
+  left: 100%;
+}
+:host([location='right']) div.control-surround {
+  @if $drawer-icon-size < 32 {
+    // See note above.
+    padding-left: calc(32px - $drawer-icon-size);
+  }
+  right: 100%;
+}
+
+ha-icon.control {
+  color: var(--secondary-color, white);
+  background-color: rgba(0, 0, 0, 0.6);
+  opacity: 0.6;
+  pointer-events: all;
+
+  --mdc-icon-size: #{$drawer-icon-size};
+  padding-top: $drawer-padding-extend;
+  padding-bottom: $drawer-padding-extend;
+}
+
+:host([location='left']) ha-icon.control {
+  border-top-right-radius: $drawer-icon-size;
+  border-bottom-right-radius: $drawer-icon-size;
+}
+
+:host([location='right']) ha-icon.control {
+  border-top-left-radius: $drawer-icon-size;
+  border-bottom-left-radius: $drawer-icon-size;
 }

src/scss/timeline.scss

@@ -1,4 +1,5 @@
 @use 'vis-timeline/dist/vis-timeline-graph2d.css';
+@use 'drawer';
 
 :host {
   width: 100%;
@@ -14,6 +15,14 @@
 div.timeline {
   height: 100%;
 }
+div.timeline.left-margin {
+  // Clearance for the drawer button.
+  margin-left: drawer.$drawer-icon-size;
+}
+div.timeline.right-margin {
+  // Clearance for the drawer button.
+  margin-right: drawer.$drawer-icon-size;
+}
 
 .vis-text {
   color: var(--primary-text-color) !important;