Transition `HypothesisApp` to Tailwind

- Use `SidebarContent` component
- Remove unused CSS

src/sidebar/components/HypothesisApp.js

@@ -16,6 +16,7 @@ import StreamView from './StreamView';
 import HelpPanel from './HelpPanel';
 import NotebookView from './NotebookView';
 import ShareAnnotationsPanel from './ShareAnnotationsPanel';
+import SidebarContent from './SidebarContent';
 import ToastMessages from './ToastMessages';
 import TopBar from './TopBar';
 
@@ -164,10 +165,21 @@ function HypothesisApp({ auth, frameSync, settings, session, toastMessenger }) {
 
   return (
     <div
-      className={classnames('HypothesisApp', 'js-thread-list-scroll-root', {
-        'theme-clean': isThemeClean,
-        'HypothesisApp--notebook': route === 'notebook',
-      })}
+      className={classnames(
+        'h-full min-h-full overflow-scroll',
+        // Precise padding to align with annotation cards in content
+        // Larger padding on bottom for wide screens
+        'p-[9px] lg:pb-16 bg-grey-2',
+        'js-thread-list-scroll-root',
+        {
+          'theme-clean': isThemeClean,
+          // Make room at top for the TopBar (40px) plus custom padding (9px)
+          // but not in the Notebook, which doesn't use the TopBar
+          'pt-[49px]': route !== 'notebook',
+          'p-4 lg:p-12': route === 'notebook',
+        }
+      )}
+      data-testid="hypothesis-app"
       style={backgroundStyle}
     >
       {route !== 'notebook' && (
@@ -179,7 +191,7 @@ function HypothesisApp({ auth, frameSync, settings, session, toastMessenger }) {
           isSidebar={isSidebar}
         />
       )}
-      <div className="HypothesisApp__content">
+      <SidebarContent>
         <ToastMessages />
         <HelpPanel auth={authState.status === 'logged-in' ? authState : {}} />
         <ShareAnnotationsPanel />
@@ -194,7 +206,7 @@ function HypothesisApp({ auth, frameSync, settings, session, toastMessenger }) {
             )}
           </main>
         )}
-      </div>
+      </SidebarContent>
     </div>
   );
 }

src/sidebar/components/test/HypothesisApp-test.js

@@ -428,33 +428,34 @@ describe('HypothesisApp', () => {
   });
 
   describe('theming', () => {
+    const appSelector = '[data-testid="hypothesis-app"]';
     it('applies theme config', () => {
       const style = { backgroundColor: 'red' };
       fakeApplyTheme.returns({ backgroundColor: 'red' });
 
       const wrapper = createComponent();
-      const background = wrapper.find('.HypothesisApp');
+      const background = wrapper.find(appSelector);
 
       assert.calledWith(fakeApplyTheme, ['appBackgroundColor'], fakeSettings);
       assert.deepEqual(background.prop('style'), style);
     });
-  });
 
-  it('applies a clean-theme style when config sets theme to "clean"', () => {
-    fakeSettings.theme = 'clean';
+    it('applies a clean-theme style when config sets theme to "clean"', () => {
+      fakeSettings.theme = 'clean';
 
-    const wrapper = createComponent();
-    const container = wrapper.find('.HypothesisApp');
+      const wrapper = createComponent();
+      const container = wrapper.find(appSelector);
 
-    assert.isTrue(container.hasClass('theme-clean'));
-  });
+      assert.isTrue(container.hasClass('theme-clean'));
+    });
 
-  it('does not apply clean-theme style when config does not assert `clean` theme', () => {
-    fakeSettings.theme = '';
+    it('does not apply clean-theme style when config does not assert `clean` theme', () => {
+      fakeSettings.theme = '';
 
-    const wrapper = createComponent();
-    const container = wrapper.find('.HypothesisApp');
+      const wrapper = createComponent();
+      const container = wrapper.find(appSelector);
 
-    assert.isFalse(container.hasClass('HypothesisApp--theme-clean'));
+      assert.isFalse(container.hasClass('theme-clean'));
+    });
   });
 });

src/styles/sidebar/components/HypothesisApp.scss

-@use '../../variables' as var;
-@use '../mixins/layout';
-@use '../mixins/responsive';
-
-.HypothesisApp {
-  $sidebar-h-padding: 9px;
-
-  background: var.$grey-2;
-  min-height: 100%;
-  height: 100%;
-  overflow: scroll;
-  -webkit-overflow-scrolling: touch;
-  padding: $sidebar-h-padding;
-  padding-top: $sidebar-h-padding + var.$top-bar-height;
-
-  @include responsive.respond-to(tablets desktops) {
-    padding-bottom: 4rem;
-  }
-
-  &__content {
-    @include layout.sidebar-content;
-  }
-
-  // FIXME: Temporary affordance for the Notebook view to override some
-  // layout spacing that assumes the presence of the top bar
-  &--notebook {
-    padding: var.$layout-space;
-    @include responsive.respond-to(tablets desktops) {
-      padding: var.$layout-space--xlarge;
-    }
-  }
-}
-
-// Disable scroll anchoring as it interferes with `ThreadList` and
-// `visible-threads` calculations and can cause a render loop
-.js-thread-list-scroll-root {
-  overflow-anchor: none;
-}

src/styles/sidebar/components/_index.scss

@@ -14,7 +14,6 @@
 @use './FilterStatus';
 @use './GroupList';
 @use './GroupListItem';
-@use './HypothesisApp';
 @use './LaunchErrorPanel';
 @use './Menu';
 @use './MenuItem';
@@ -31,10 +30,11 @@
 @use './ToastMessages';
 @use './VersionInfo';
 
-// TODO: Put these in @layer components after shared component styles have
-// been converted to Tailwind (and are contained in the components layer
-// themselves). They need to come after shared-component styles in the
-// output stylesheet.
+// TODO: Evaluate all classes below after components have been converted to
+// Tailwind. If retaining, put them in @layer components after `frontend-shared`
+//  component styles have been converted to Tailwind (and are contained in the
+// components layer themselves). They need to come after shared-component
+// styles in the output stylesheet.
 
 // Applies to <Link>
 .p-muted-link {
@@ -45,3 +45,9 @@
 .p-redacted-text {
   @apply line-through grayscale contrast-50 text-color-text-light;
 }
+
+// Disable scroll anchoring as it interferes with `ThreadList` and
+// `visible-threads` calculations and can cause a render loop
+.js-thread-list-scroll-root {
+  overflow-anchor: none;
+}