Use shared `Panel` component

src/sidebar/components/LaunchErrorPanel.js

-import Panel from './Panel';
+import { Panel } from '@hypothesis/frontend-shared';
 
 /**
  * @typedef LaunchErrorPanelProps
@@ -16,9 +16,7 @@ import Panel from './Panel';
 export default function LaunchErrorPanel({ error }) {
   return (
     <div className="LaunchErrorPanel">
-      <Panel title="Unable to start Hypothesis">
-        <p>{error.message}</p>
-      </Panel>
+      <Panel title="Unable to start Hypothesis">{error.message}</Panel>
     </div>
   );
 }

src/sidebar/components/NotebookView.js

-import { IconButton } from '@hypothesis/frontend-shared';
+import { IconButton, Panel } from '@hypothesis/frontend-shared';
 import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import scrollIntoView from 'scroll-into-view';
 
@@ -8,7 +8,6 @@ import { useStoreProxy } from '../store/use-store';
 
 import NotebookFilters from './NotebookFilters';
 import NotebookResultCount from './NotebookResultCount';
-import Panel from './Panel';
 import PaginatedThreadList from './PaginatedThreadList';
 import useRootThread from './hooks/use-root-thread';
 

src/sidebar/components/SidebarContentError.js

-import { LabeledButton } from '@hypothesis/frontend-shared';
+import { LabeledButton, Panel } from '@hypothesis/frontend-shared';
 
 import { useStoreProxy } from '../store/use-store';
 
-import Panel from './Panel';
-
 /**
  * @typedef SidebarContentErrorProps
  * @prop {'annotation'|'group'} errorType
@@ -42,23 +40,25 @@ export default function SidebarContentError({
   })();
 
   return (
-    <Panel icon="restricted" title={errorTitle}>
-      <p>{errorMessage}</p>
-      <div className="u-layout-row--justify-right u-horizontal-rhythm">
-        {showClearSelection && (
-          <LabeledButton
-            variant={isLoggedIn ? 'primary' : undefined}
-            onClick={() => store.clearSelection()}
-          >
-            Show all annotations
-          </LabeledButton>
-        )}
-        {!isLoggedIn && (
-          <LabeledButton variant="primary" onClick={onLoginRequest}>
-            Log in
-          </LabeledButton>
-        )}
-      </div>
-    </Panel>
+    <div className="u-sidebar-container">
+      <Panel icon="restricted" title={errorTitle}>
+        <p>{errorMessage}</p>
+        <div className="u-layout-row--justify-right u-horizontal-rhythm">
+          {showClearSelection && (
+            <LabeledButton
+              variant={isLoggedIn ? 'primary' : undefined}
+              onClick={() => store.clearSelection()}
+            >
+              Show all annotations
+            </LabeledButton>
+          )}
+          {!isLoggedIn && (
+            <LabeledButton variant="primary" onClick={onLoginRequest}>
+              Log in
+            </LabeledButton>
+          )}
+        </div>
+      </Panel>
+    </div>
   );
 }

src/sidebar/components/SidebarPanel.js

+import { Panel } from '@hypothesis/frontend-shared';
 import { useCallback, useEffect, useRef } from 'preact/hooks';
 import scrollIntoView from 'scroll-into-view';
 
 import { useStoreProxy } from '../store/use-store';
 
-import Panel from './Panel';
 import Slider from './Slider';
 
 /**
@@ -60,7 +60,7 @@ export default function SidebarPanel({
 
   return (
     <Slider visible={panelIsActive}>
-      <div ref={panelElement}>
+      <div ref={panelElement} className="u-sidebar-container">
         <Panel title={title} icon={icon} onClose={closePanel}>
           {children}
         </Panel>

src/styles/sidebar/components/LaunchErrorPanel.scss

 .LaunchErrorPanel {
   // Top margin ensures that the error notice appears below the Notebook's
   // "Close" button.
-  margin-top: 50px;
-
-  margin-left: 5px;
-  margin-right: 5px;
+  margin: 0.5rem;
+  margin-top: 3rem;
 }