Add slide-in animation for pending updates notification

src/sidebar/components/NotebookView.tsx

 import { Link, Panel } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
 import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import scrollIntoView from 'scroll-into-view';
 
@@ -133,8 +134,15 @@ function NotebookView({ loadAnnotationsService, streamer }: NotebookViewProps) {
           {groupName}
         </h1>
       </header>
-      <div className="absolute w-full z-5 left-0 top-7">
-        <div className="container flex flex-row-reverse">
+      <div className="absolute w-full z-5 left-0 lg:top-8 top-5">
+        <div
+          className={classnames(
+            'container flex flex-row-reverse relative',
+            // Compensate for container's right padding, which is defined in
+            // tailwind.config.mjs
+            'right-[4rem]',
+          )}
+        >
           {pendingUpdatesNotification && <PendingUpdatesNotification />}
         </div>
       </div>

src/sidebar/components/PendingUpdatesNotification.tsx

@@ -55,7 +55,10 @@ function PendingUpdatesNotification({
   }
 
   return (
-    <div role="status" className="animate-fade-in">
+    <div
+      role="status"
+      className="absolute right-0 animate-updates-notification-slide-in"
+    >
       <Button
         onClick={applyPendingUpdates}
         unstyled
@@ -70,7 +73,7 @@ function PendingUpdatesNotification({
       >
         <RefreshIcon />
         {!collapsed && (
-          <span data-testid="full-notification">
+          <span data-testid="full-notification" className="whitespace-nowrap">
             Load <span className="font-bold">{pendingUpdateCount}</span> updates{' '}
             <span className="sr-only">by pressing l</span>
           </span>

tailwind.config.mjs

@@ -23,6 +23,7 @@ export default {
         'fade-out': 'fade-out 0.3s forwards',
         'pulse-fade-out': 'pulse-fade-out 5s ease-in-out forwards',
         'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out',
+        'updates-notification-slide-in': 'updates-notification-slide-in 0.3s ease-in'
       },
       boxShadow: {
         // A more prominent shadow than the one used by tailwind, intended for
@@ -175,6 +176,16 @@ export default {
             opacity: '1',
           },
         },
+        'updates-notification-slide-in': {
+          '0%': {
+            opacity: '0',
+            right: '-15px',
+          },
+          '100%': {
+            opacity: '1',
+            right: '0',
+          },
+        },
       },
       screens: {
         touch: { raw: '(pointer: coarse)' },