Use tailwind "container" instead of custom `SidebarContent` component

Update container configuration to use the `9px` precise horizontal
padding to ensure annotation-card alignment.

src/sidebar/components/HypothesisApp.js

@@ -16,7 +16,6 @@ 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';
 
@@ -169,7 +168,7 @@ function HypothesisApp({ auth, frameSync, settings, session, toastMessenger }) {
         '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',
+        'lg:pb-16 bg-grey-2',
         'js-thread-list-scroll-root',
         {
           'theme-clean': isThemeClean,
@@ -191,7 +190,7 @@ function HypothesisApp({ auth, frameSync, settings, session, toastMessenger }) {
           isSidebar={isSidebar}
         />
       )}
-      <SidebarContent>
+      <div className="container">
         <ToastMessages />
         <HelpPanel auth={authState.status === 'logged-in' ? authState : {}} />
         <ShareAnnotationsPanel />
@@ -206,7 +205,7 @@ function HypothesisApp({ auth, frameSync, settings, session, toastMessenger }) {
             )}
           </main>
         )}
-      </SidebarContent>
+      </div>
     </div>
   );
 }

src/sidebar/components/SidebarContent.js

-import { makePresentationalComponent } from '../../shared/presentational-component';
-
-/**
- * Render sidebar "page" content. This is used in the narrow sidebar frame
- * as well as wider interfaces like the Notebook and single-annotation view.
- */
-const SidebarContent = makePresentationalComponent(
-  'SidebarContent',
-  // Center this content (auto margins). For larger viewports, set a
-  // maximum width (768px) and add some horizontal padding.
-  'mx-auto lg:px-16 lg:max-w-3xl'
-);
-
-export default SidebarContent;

src/sidebar/components/TopBar.js

@@ -9,7 +9,6 @@ import { useSidebarStore } from '../store';
 
 import GroupList from './GroupList';
 import SearchInput from './SearchInput';
-import SidebarContent from './SidebarContent';
 import SortMenu from './SortMenu';
 import StreamSearchInput from './StreamSearchInput';
 import UserMenu from './UserMenu';
@@ -89,12 +88,9 @@ function TopBar({
       )}
       data-testid="top-bar"
     >
-      <SidebarContent
-        classes={classnames(
-          'flex items-center h-full',
-          // This precise horizontal padding makes the edges of its contents
-          // align accurately with the edges of annotation cards in the sidebar
-          'px-[9px]',
+      <div
+        className={classnames(
+          'container flex items-center h-full',
           // Text sizing will size icons in buttons correctly
           'text-xl'
         )}
@@ -170,7 +166,7 @@ function TopBar({
             </div>
           )}
         </div>
-      </SidebarContent>
+      </div>
     </div>
   );
 }

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

@@ -35,10 +35,6 @@ describe('TopBar', () => {
 
     $imports.$mock(mockImportedComponents());
 
-    // SidebarContent is a presentational-only component without its own tests
-    $imports.$restore({
-      './SidebarContent': true,
-    });
     $imports.$mock({
       '../store': { useSidebarStore: () => fakeStore },
       '../helpers/is-third-party-service': {

tailwind.config.mjs

@@ -50,11 +50,13 @@ export default {
       },
       // Content in the sidebar should never exceed a max-width of `768px`, and
       // that content should be auto-centered
+      // See https://tailwindcss.com/docs/container
       container: {
         center: true,
         // Horizontal padding is larger for wider screens
         padding: {
-          DEFAULT: '0.5rem',
+          // Precise horizontal padding for annotation-card alignment
+          DEFAULT: '9px',
           lg: '4rem',
         },
         // By default, tailwind will provide appropriately-sized containers at