History View: Add scrollbar to Sidebar (#1689)

* feat: Add scrollbar to Sidebar

* cleanups

* fix: cleanup on main

* chore: style fix

* chore: last style fix

* chore: Move styles back to App.module.css

* chore: Adjust code

* fix: visual regression test

* fix: Reduce sidebar padding

* cache bust netlify

* chore: reduce sidebar width (revert pkg.json change)

* added changed snapshots

---------

Co-authored-by: Shane Osbourne <[email protected]>

Author: vkraucunas

special-pages/pages/history/app/components/App.module.css

@@ -36,6 +36,7 @@ body {
     height: 100vh;
     background-color: var(--history-background-color);
 }
+
 .header {
     grid-area: header;
     padding-left: var(--main-padding-left);
@@ -44,14 +45,19 @@ body {
     z-index: 1;
     background-color: var(--history-background-color);
 }
+
 .search {
     justify-self: flex-end;
 }
+
 .aside {
     grid-area: aside;
     padding: 10px 16px;
+    /* Nav child will handle this to accommodate a scrollbar */
+    padding-right: 0;
     border-right: 1px solid var(--history-surface-border-color);
 }
+
 .main {
     grid-area: main;
     overflow: auto;
@@ -60,6 +66,10 @@ body {
     padding-top: 24px;
 }
 
+/**
+  * The scrollbar is a custom scroller that is used in the main
+  * content area and the sidebar nav.
+ */
 .customScroller {
     overflow-y: scroll;
     padding-right: calc(var(--main-padding-right) - var(--scrollbar-width));
@@ -70,6 +80,7 @@ body {
  */
 [data-platform="windows"] {
     .customScroller {
+        overflow-y: auto;
         scrollbar-gutter: stable;
         scrollbar-width: var(--scrollbar-width);
         scrollbar-color: var(--history-scrollbar-controls-color) var(--history-background-color);
@@ -80,6 +91,7 @@ body {
  * macOS specific styling to handle dark mode - without this full
  * override you cannot change the track color :(
  */
+[data-platform="integration"],
 [data-platform="macos"] {
     .customScroller {
         --webkit-thumb-color: rgba(136, 136, 136, 0.8);
@@ -116,4 +128,4 @@ body {
 
 .paddedErrorRecovery {
     margin-top: 1rem;
-}
+}

special-pages/pages/history/app/components/Sidebar.js

@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import cn from 'classnames';
 import styles from './Sidebar.module.css';
+import AppStyles from './App.module.css';
 import { useComputed } from '@preact/signals';
 import { useTypedTranslation } from '../types.js';
 import { Trash } from '../icons/Trash.js';
@@ -77,7 +78,7 @@ export function Sidebar({ ranges }) {
     return (
         <div class={styles.stack}>
             <h1 class={styles.pageTitle}>{t('page_title')}</h1>
-            <nav class={styles.nav}>
+            <nav class={cn(styles.nav, AppStyles.customScroller)}>
                 {ranges.value.map((range) => {
                     return (
                         <Item key={range.id} onClick={onClick} onDelete={onDelete} current={current} range={range.id} count={range.count} />

special-pages/pages/history/app/components/Sidebar.module.css

@@ -1,30 +1,41 @@
 .stack {
     display: flex;
     flex-direction: column;
-    > * {
+    height: 100%;
+
+    >* {
         min-width: 0
     }
+
     gap: 24px;
 }
+
 .pageTitle {
     color: var(--history-text-normal);
     font-size: var(--title-font-size);
     font-weight: var(--title-font-weight);
     line-height: 24px;
     padding: 10px 6px 10px 10px;
 }
-.nav {}
+
+.nav {
+    padding-right: 0;
+}
+
 .item {
     position: relative;
     border-radius: 8px;
     display: flex;
 
-    &:hover, &:focus-visible {
+    &:hover,
+    &:focus-visible {
         background: var(--color-black-at-6);
     }
 
-    [data-theme="dark"] &  {
-        &:hover, &:focus-visible {
+    [data-theme="dark"] & {
+
+        &:hover,
+        &:focus-visible {
             background: var(--color-white-at-6);
         }
     }
@@ -37,12 +48,14 @@
 
 .active {
     background: var(--color-black-at-12);
+
     &:hover {
         background: var(--color-black-at-18);
     }
 
-    [data-theme="dark"] &  {
+    [data-theme="dark"] & {
         background: var(--color-white-at-9);
+
         &:hover {
             background: var(--color-white-at-12);
         }
@@ -88,7 +101,9 @@
     color: var(--history-text-normal);
 
     &:not([aria-disabled="true"]) {
-        &:hover, &:focus-visible {
+
+        &:hover,
+        &:focus-visible {
             background: var(--color-black-at-9);
             opacity: 1;
         }
@@ -102,6 +117,7 @@
         &:hover {
             background: var(--color-white-at-9);
         }
+
         &:active {
             background: var(--color-white-at-12);
         }
@@ -111,7 +127,7 @@
         opacity: 1;
     }
 
-    .link:focus-visible + & {
+    .link:focus-visible+& {
         opacity: 1;
     }
 

special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-dark-integration-darwin.png

@@ -67,4 +67,4 @@ body {
     --history-text-normal: var(--color-white-at-84);
     --history-text-invert: var(--color-black-at-84);
     --history-text-muted: var(--color-white-at-60);
-}
+}