From af0182c5ed85348d96d3639ec1b64c5ca140d487 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 21 May 2026 16:32:17 +0200
Subject: [PATCH] Iterate on initial annotations UI

Graph/tooltip:
- Change from 1 to 2 visible notes on hover
- Add label to note indicating `Personal note`, or `[Author name]` for site-wide notes
- Improve button styles
- Add edit button to note on hover
- Add click handler to note on touch devices for editing
- Remove pin, delete and edit buttons from note on click
- Disable editing notes from other authors

Modals:
- Change date format in title
- Add textarea field to `form-elements.tsx` and use it in annotation modals
- Add visible character limit and character counter to note field
- Add `Delete note` button to edit modal
---
 assets/css/app.css                            |   4 +
 .../annotations/annotations-modals.tsx        |  67 +++++-
 .../js/dashboard/annotations/annotations.ts   |  14 ++
 .../routeless-annotations-modals.tsx          |   3 +
 assets/js/dashboard/components/button.tsx     |   5 +-
 .../js/dashboard/components/form-elements.tsx | 143 ++++++++++--
 assets/js/dashboard/components/icons.tsx      |  17 ++
 .../js/dashboard/stats/graph/main-graph.tsx   | 203 ++++++++----------
 8 files changed, 311 insertions(+), 145 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 33a1f4faa076..4e3cc348a851 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -63,6 +63,10 @@
       disabled:cursor-not-allowed;
   }
 
+  .btn-xs {
+    @apply px-2 py-1;
+  }
+
   .btn-sm {
     @apply px-3 py-2;
   }
diff --git a/assets/js/dashboard/annotations/annotations-modals.tsx b/assets/js/dashboard/annotations/annotations-modals.tsx
index 90e02c240e1b..b358941be2f5 100644
--- a/assets/js/dashboard/annotations/annotations-modals.tsx
+++ b/assets/js/dashboard/annotations/annotations-modals.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode, useState } from 'react'
 import {
   Annotation,
   ANNOTATION_TYPE_LABELS,
+  AnnotationGranularity,
   AnnotationPayload,
   AnnotationType
 } from './annotations'
@@ -14,14 +15,38 @@ import {
   SaveButton
 } from '../components/modal-layout'
 import {
-  LabeledTextInput,
+  LabeledTextarea,
   TypeSelector,
   TypeDisabledMessage,
   getOptionDisabledMessage,
+  isOverMaxLength,
   OptionDisabledMessageType
 } from '../components/form-elements'
 import { Button } from '../components/button'
 import { Role, UserContextValue } from '../user-context'
+import {
+  formatDay,
+  formatTime,
+  is12HourClock,
+  parseUTCDate
+} from '../util/date'
+
+const formatAnnotationDatetime = (
+  datetime: string,
+  granularity: AnnotationGranularity
+): string => {
+  const date = parseUTCDate(datetime)
+  if (granularity === AnnotationGranularity.minute) {
+    const time = formatTime(date, {
+      use12HourClock: is12HourClock(),
+      includeMinutes: true
+    })
+    return `${formatDay(date)} at ${time}`
+  }
+  return formatDay(date)
+}
+
+const NOTE_RECOMMENDED_MAX_LENGTH = 250
 
 interface ApiRequestProps {
   status: MutationStatus
@@ -68,14 +93,20 @@ export const CreateAnnotationModal = ({
       ? getAnnotationTypeDisabledMessage({ siteAnnotationsAvailable, user })
       : null
 
+  const overLimit = isOverMaxLength(note, NOTE_RECOMMENDED_MAX_LENGTH)
+
   return (
-    <ModalLayout title={`Add note for ${datetime}`} onClose={onClose}>
-      <LabeledTextInput
+    <ModalLayout
+      title={`Add note for ${formatAnnotationDatetime(datetime, granularity)}`}
+      onClose={onClose}
+    >
+      <LabeledTextarea
         label="Note"
         id="note"
         value={note}
         onChange={setNote}
         placeholder={notePlaceholder}
+        recommendedMaxLength={NOTE_RECOMMENDED_MAX_LENGTH}
       />
       <AnnotationTypeSelector
         value={type}
@@ -87,7 +118,9 @@ export const CreateAnnotationModal = ({
           Cancel
         </Button>
         <SaveButton
-          disabled={status === 'pending' || disabledMessage !== null}
+          disabled={
+            status === 'pending' || overLimit || disabledMessage !== null
+          }
           onSave={() => {
             const trimmedNote = note.trim()
             const saveableNote = trimmedNote.length
@@ -259,6 +292,7 @@ export const DeleteAnnotationModal = ({
 export const UpdateAnnotationModal = ({
   onClose,
   onSave,
+  onDelete,
   annotation,
   siteAnnotationsAvailable,
   user,
@@ -269,6 +303,7 @@ export const UpdateAnnotationModal = ({
 }: AnnotationModalProps &
   ApiRequestProps & {
     onSave: (input: Pick<Annotation, 'id' | 'note' | 'type'>) => void
+    onDelete?: (annotation: Annotation) => void
     annotation: Annotation
   }) => {
   const [note, setNote] = useState(annotation.note)
@@ -279,14 +314,20 @@ export const UpdateAnnotationModal = ({
       ? getAnnotationTypeDisabledMessage({ siteAnnotationsAvailable, user })
       : null
 
+  const overLimit = isOverMaxLength(note, NOTE_RECOMMENDED_MAX_LENGTH)
+
   return (
-    <ModalLayout title="Update note" onClose={onClose}>
-      <LabeledTextInput
+    <ModalLayout
+      title={`Update note for ${formatAnnotationDatetime(annotation.datetime, annotation.granularity)}`}
+      onClose={onClose}
+    >
+      <LabeledTextarea
         label="Note"
         id="note"
         value={note}
         onChange={setNote}
         placeholder={notePlaceholder}
+        recommendedMaxLength={NOTE_RECOMMENDED_MAX_LENGTH}
       />
       <AnnotationTypeSelector
         value={type}
@@ -294,11 +335,23 @@ export const UpdateAnnotationModal = ({
         optionDisabledMessage={disabledMessage}
       />
       <ModalFooter>
+        {typeof onDelete === 'function' && (
+          <Button
+            theme="danger"
+            size="sm"
+            className="mr-auto"
+            onClick={() => onDelete(annotation)}
+          >
+            Delete note
+          </Button>
+        )}
         <Button theme="secondary" size="sm" onClick={onClose}>
           Cancel
         </Button>
         <SaveButton
-          disabled={status === 'pending' || disabledMessage !== null}
+          disabled={
+            status === 'pending' || overLimit || disabledMessage !== null
+          }
           onSave={() => {
             const trimmedNote = note.trim()
             const saveableNote = trimmedNote.length
diff --git a/assets/js/dashboard/annotations/annotations.ts b/assets/js/dashboard/annotations/annotations.ts
index f65ecef59dcf..eccb4c43137c 100644
--- a/assets/js/dashboard/annotations/annotations.ts
+++ b/assets/js/dashboard/annotations/annotations.ts
@@ -51,6 +51,20 @@ export const ANNOTATION_TYPE_LABELS = {
   [AnnotationType.site]: 'Site-wide note'
 }
 
+export const getAnnotationAttribution = (
+  annotation: Pick<Annotation, 'type' | 'owner_name'>
+): string => {
+  if (annotation.type === AnnotationType.site && annotation.owner_name) {
+    return annotation.owner_name
+  }
+  return ANNOTATION_TYPE_LABELS[annotation.type]
+}
+
+export const canEditAnnotation = (
+  annotation: Pick<Annotation, 'owner_id'>,
+  userId: number | null
+): boolean => userId !== null && annotation.owner_id === userId
+
 export const getAnnotationTimeLabel = (
   annotation: Pick<Annotation, 'datetime' | 'granularity'>,
   interval: Interval
diff --git a/assets/js/dashboard/annotations/routeless-annotations-modals.tsx b/assets/js/dashboard/annotations/routeless-annotations-modals.tsx
index edf88ceb660e..eafd94293f69 100644
--- a/assets/js/dashboard/annotations/routeless-annotations-modals.tsx
+++ b/assets/js/dashboard/annotations/routeless-annotations-modals.tsx
@@ -131,6 +131,9 @@ export const RoutelessAnnotationModals = () => {
               type
             })
           }
+          onDelete={(annotation) =>
+            setModal({ type: 'delete-annotation', annotation })
+          }
           status={patchAnnotation.status}
           error={patchAnnotation.error}
           reset={patchAnnotation.reset}
diff --git a/assets/js/dashboard/components/button.tsx b/assets/js/dashboard/components/button.tsx
index a4d746c69f9f..56d9fb7add5a 100644
--- a/assets/js/dashboard/components/button.tsx
+++ b/assets/js/dashboard/components/button.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames'
 /**
  * Themes and sizes are kept in sync with the Phoenix `button` component in
  * `lib/plausible_web/components/generic.ex`. The actual Tailwind classes live
- * in `assets/css/app.css` (.btn-base, .btn-{sm,md}, .btn-theme-*).
+ * in `assets/css/app.css` (.btn-base, .btn-{xs,sm,md}, .btn-theme-*).
  */
 
 export type ButtonTheme =
@@ -15,11 +15,12 @@ export type ButtonTheme =
   | 'ghost'
   | 'icon'
 
-export type ButtonSize = 'sm' | 'md'
+export type ButtonSize = 'xs' | 'sm' | 'md'
 
 const buttonBaseClass = 'btn-base'
 
 const buttonSizes: Record<ButtonSize, string> = {
+  xs: 'btn-xs',
   sm: 'btn-sm',
   md: 'btn-md'
 }
diff --git a/assets/js/dashboard/components/form-elements.tsx b/assets/js/dashboard/components/form-elements.tsx
index b916f26750d4..7942dc0b6410 100644
--- a/assets/js/dashboard/components/form-elements.tsx
+++ b/assets/js/dashboard/components/form-elements.tsx
@@ -1,36 +1,139 @@
 import React, { ReactNode } from 'react'
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+import classNames from 'classnames'
+
+export const getCharacterCount = (value: string): number => [...value].length
+
+export const isOverMaxLength = (value: string, maxLength: number): boolean =>
+  getCharacterCount(value) > maxLength
+
+const fieldClassName =
+  'block px-3.5 py-2.5 w-full text-sm dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-750 dark:bg-gray-750 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500'
+
+interface LabeledFieldProps {
+  label: string
+  id: string
+  value: string
+  onChange: (value: string) => void
+  placeholder: string
+  recommendedMaxLength?: number
+}
+
+const LabeledField = ({
+  label,
+  id,
+  value,
+  recommendedMaxLength,
+  children
+}: Pick<
+  LabeledFieldProps,
+  'label' | 'id' | 'value' | 'recommendedMaxLength'
+> & {
+  children: ReactNode
+}) => (
+  <div className="flex flex-col">
+    <label
+      htmlFor={id}
+      className="block mb-1.5 text-sm font-medium dark:text-gray-100 text-gray-700 dark:text-gray-300"
+    >
+      {label}
+    </label>
+    {children}
+    {recommendedMaxLength !== undefined && (
+      <CharacterCounter
+        id={`${id}-counter`}
+        length={getCharacterCount(value)}
+        recommendedMaxLength={recommendedMaxLength}
+      />
+    )}
+  </div>
+)
 
 export const LabeledTextInput = ({
   label,
   id,
   value,
   onChange,
-  placeholder
+  placeholder,
+  recommendedMaxLength
+}: LabeledFieldProps) => (
+  <LabeledField
+    label={label}
+    id={id}
+    value={value}
+    recommendedMaxLength={recommendedMaxLength}
+  >
+    <input
+      autoComplete="off"
+      id={id}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      aria-describedby={
+        recommendedMaxLength !== undefined ? `${id}-counter` : undefined
+      }
+      className={fieldClassName}
+    />
+  </LabeledField>
+)
+
+export const LabeledTextarea = ({
+  label,
+  id,
+  value,
+  onChange,
+  placeholder,
+  recommendedMaxLength,
+  rows = 3
+}: LabeledFieldProps & {
+  rows?: number
+}) => (
+  <LabeledField
+    label={label}
+    id={id}
+    value={value}
+    recommendedMaxLength={recommendedMaxLength}
+  >
+    <textarea
+      autoComplete="off"
+      id={id}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      rows={rows}
+      aria-describedby={
+        recommendedMaxLength !== undefined ? `${id}-counter` : undefined
+      }
+      className={classNames(fieldClassName, 'resize-y leading-5')}
+    />
+  </LabeledField>
+)
+
+const CharacterCounter = ({
+  id,
+  length,
+  recommendedMaxLength
 }: {
-  label: string
   id: string
-  value: string
-  onChange: (value: string) => void
-  placeholder: string
+  length: number
+  recommendedMaxLength: number
 }) => {
+  const overLimit = length > recommendedMaxLength
   return (
-    <div className="flex flex-col">
-      <label
-        htmlFor={id}
-        className="block mb-1.5 text-sm font-medium dark:text-gray-100 text-gray-700 dark:text-gray-300"
+    <p
+      id={id}
+      className="mt-1.5 text-xs text-gray-500 dark:text-gray-400"
+      aria-live="polite"
+    >
+      {`Recommended: ${recommendedMaxLength} characters. You've used `}
+      <span
+        className={classNames('font-semibold', {
+          'text-red-500 dark:text-red-400': overLimit
+        })}
       >
-        {label}
-      </label>
-      <input
-        autoComplete="off"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        id={id}
-        className="block px-3.5 py-2.5 w-full text-sm dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-750 dark:bg-gray-750 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500"
-      />
-    </div>
+        {length}
+      </span>
+    </p>
   )
 }
 
diff --git a/assets/js/dashboard/components/icons.tsx b/assets/js/dashboard/components/icons.tsx
index 5047e2b780c3..0d3be9a13051 100644
--- a/assets/js/dashboard/components/icons.tsx
+++ b/assets/js/dashboard/components/icons.tsx
@@ -79,6 +79,23 @@ export const RefreshIcon = ({ className }: { className?: string }) => (
   </svg>
 )
 
+export const PencilIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 18"
+    fill="none"
+    className={className}
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="m10.547 4.422 3.031 3.031M2.75 15.25s3.599-.568 4.546-1.515l7.327-7.327a2.142 2.142 0 1 0-3.03-3.03l-7.327 7.327c-.947.947-1.515 4.546-1.515 4.546h0Z"
+    />
+  </svg>
+)
+
 export const CursorIcon = ({
   className,
   title
diff --git a/assets/js/dashboard/stats/graph/main-graph.tsx b/assets/js/dashboard/stats/graph/main-graph.tsx
index db3b38b6649d..c3b25769d94a 100644
--- a/assets/js/dashboard/stats/graph/main-graph.tsx
+++ b/assets/js/dashboard/stats/graph/main-graph.tsx
@@ -48,11 +48,15 @@ import {
   AnnotationType,
   AnnotationWithPinState,
   PinPosition,
+  canEditAnnotation,
   enrichAnnotationsWithPinState,
+  getAnnotationAttribution,
   getAnnotationGranularity,
   groupAnnotationsByTimeLabel
 } from '../../annotations/annotations'
+import { useUserContext } from '../../user-context'
 import { Button } from '../../components/button'
+import { PencilIcon } from '../../components/icons'
 
 const height = 368
 const marginTop = 16
@@ -113,7 +117,7 @@ export const MainGraph = ({
   useEffect(() => {
     setTooltip(initialTooltipState)
   }, [width])
-  
+
   useEffect(() => {
     setPinnedAnnotationIds({})
   }, [width, data])
@@ -561,19 +565,24 @@ export const MainGraph = ({
                       }))
                     }
                     annotations={annotationsByTimeLabel[annotationDatetime]}
+                    isTouchDevice={!!isTouchDevice}
                   />
                 )}
-              {!!annotationDatetime && (
-                <AddAnnotationButton
-                  interval={interval}
-                  timelabel={annotationDatetime}
-                />
-              )}
-              {!!zoomDate && (
-                <Button
-                  onClick={() => zoomToPeriod(zoomDate)}
-                >{`View ${interval}`}</Button>
-              )}
+              <div className="flex flex-row gap-x-2 mt-2">
+                {!!annotationDatetime && (
+                  <AddAnnotationButton
+                    interval={interval}
+                    timelabel={annotationDatetime}
+                  />
+                )}
+                {!!zoomDate && (
+                  <Button
+                    size="xs"
+                    className="flex-1 bg-gray-600/70 border-gray-600/70 hover:bg-gray-600 hover:border-gray-600"
+                    onClick={() => zoomToPeriod(zoomDate)}
+                  >{`View ${interval}`}</Button>
+                )}
+              </div>
             </>
           )}
           {!tooltip.persistent && (
@@ -582,31 +591,31 @@ export const MainGraph = ({
                 !!annotationsByTimeLabel[annotationDatetime] && (
                   <>
                     <AnnotationsList
-                      expandedIndex={null}
                       annotations={annotationsByTimeLabel[
                         annotationDatetime
-                      ].slice(0, 1)}
-                      onAnnotationClick={() => {}}
+                      ].slice(0, 2)}
                     />
-                    {annotationsByTimeLabel[annotationDatetime].length == 2 &&
+                    {annotationsByTimeLabel[annotationDatetime].length == 3 &&
                       `and 1 more note`}
-                    {annotationsByTimeLabel[annotationDatetime].length > 2 &&
-                      `and ${annotationsByTimeLabel[annotationDatetime].length - 1} more notes`}
+                    {annotationsByTimeLabel[annotationDatetime].length > 3 &&
+                      `and ${annotationsByTimeLabel[annotationDatetime].length - 2} more notes`}
                   </>
                 )}
               {(!!zoomDate || !!annotationDatetime) && (
                 <hr className="border-gray-600 dark:border-gray-800 my-1" />
               )}
-              {!!zoomDate && (
-                <div className="text-gray-300 dark:text-gray-400 text-xs">
-                  {`Click to view ${interval}`}
-                </div>
-              )}
-              {!!annotationDatetime && (
-                <div className="text-gray-300 dark:text-gray-400 text-xs">
-                  Right click for more actions
-                </div>
-              )}
+              <div className="flex flex-col gap-y-0.5">
+                {!!zoomDate && (
+                  <div className="text-gray-300 dark:text-gray-400 text-xs">
+                    {`Click to view ${interval}`}
+                  </div>
+                )}
+                {!!annotationDatetime && (
+                  <div className="text-gray-300 dark:text-gray-400 text-xs">
+                    Right click for more actions
+                  </div>
+                )}
+              </div>
             </>
           )}
         </MainGraphTooltip>
@@ -617,117 +626,78 @@ export const MainGraph = ({
 
 const InteractiveAnnotationsList = ({
   annotations,
-  onPin
+  isTouchDevice,
+  onPin: _onPin
 }: {
   onPin: (annotation: Annotation) => void
   annotations: AnnotationWithPinState[]
+  isTouchDevice: boolean
 }) => {
-  const [expanded, setExpanded] = useState<number | null>(null)
-  useEffect(() => {
-    setExpanded(null)
-  }, [annotations])
   const { setModal } = useRoutelessModalsContext()
+  const user = useUserContext()
 
   return (
     <AnnotationsList
       annotations={annotations}
-      expandedIndex={expanded}
-      onAnnotationClick={(index: number) =>
-        setExpanded((current) => (current === index ? null : index))
-      }
       onEdit={(annotation) =>
         setModal({ type: 'update-annotation', annotation })
       }
-      onDelete={(annotation) =>
-        setModal({ type: 'delete-annotation', annotation })
-      }
-      onPin={onPin}
+      canEdit={(annotation) => canEditAnnotation(annotation, user.id)}
+      isTouchDevice={isTouchDevice}
     />
   )
 }
 
 const AnnotationsList = ({
   annotations,
-  expandedIndex,
-  onAnnotationClick,
   onEdit,
-  onPin,
-  onDelete
+  canEdit,
+  isTouchDevice
 }: {
   annotations: AnnotationWithPinState[]
   onEdit?: (annotation: Annotation) => void
-  onPin?: (annotation: Annotation) => void
-  onDelete?: (annotation: Annotation) => void
-  expandedIndex: number | null
-  onAnnotationClick?: (index: number) => void
+  canEdit?: (annotation: Annotation) => boolean
+  isTouchDevice?: boolean
 }) => {
   return (
-    <div className="text-sm font-normal text-gray-100 flex flex-col gap-1.5">
-      {annotations.map((annotation, index) => {
+    <div className="text-sm font-normal text-gray-100 flex flex-col gap-2">
+      {annotations.map((annotation) => {
         const { id, note } = annotation
+        const attribution = getAnnotationAttribution(annotation)
+        const interactive =
+          typeof onEdit === 'function' && (!canEdit || canEdit(annotation))
+        const content = (
+          <>
+            <div className="text-xs text-gray-300 pr-8">{attribution}</div>
+            <div className="text-left whitespace-pre-wrap [overflow-wrap:anywhere] [word-break:normal]">
+              {note}
+            </div>
+            {interactive && !isTouchDevice && (
+              <button
+                aria-label="Edit note"
+                className="absolute top-px right-0 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-gray-300 hover:text-gray-100 focus:outline-none"
+                onClick={() => onEdit!(annotation)}
+              >
+                <PencilIcon className="size-4" />
+              </button>
+            )}
+          </>
+        )
         return (
-          <div className="flex flex-row gap-x-2" key={id}>
+          <div className="group flex flex-row gap-x-2" key={id}>
             <div className="rounded-xs w-[3px] bg-green-500 shrink-0" />
-            <div className="flex flex-col gap-y-1 w-64">
-              {typeof onAnnotationClick === 'function' ? (
-                <button
-                  className="flex flex-row"
-                  onClick={() => onAnnotationClick(index)}
-                >
-                  <div className="text-left break-all">{note}</div>
-                </button>
-              ) : (
-                <div className="text-left break-all">{note}</div>
-              )}
-              {expandedIndex === index && (
-                <div className="flex flex-row">
-                  {typeof onEdit === 'function' && (
-                    <Button
-                      className="not-dark:text-gray-100 not-dark:hover:text-gray-800"
-                      theme="ghost"
-                      size="sm"
-                      onClick={() => onEdit(annotation)}
-                    >
-                      {/* <PencilIcon className="w-4 h-4 block" /> */}
-                      Edit
-                    </Button>
-                  )}
-                  {typeof onPin === 'function' &&
-                    (annotation.isPinned ? (
-                      <Button
-                        className="not-dark:text-gray-100 not-dark:hover:text-gray-800"
-                        theme="ghost"
-                        size="sm"
-                        onClick={() => onPin(annotation)}
-                      >
-                        {/* <BookmarkSlashIcon className="w-4 h-4 block" /> */}
-                        Unpin
-                      </Button>
-                    ) : (
-                      <Button
-                        className="not-dark:text-gray-100 not-dark:hover:text-gray-800"
-                        theme="ghost"
-                        size="sm"
-                        onClick={() => onPin(annotation)}
-                      >
-                        {/* <BookmarkIcon className="w-4 h-4 block" /> */}
-                        Pin
-                      </Button>
-                    ))}
-                  {typeof onDelete === 'function' && (
-                    <Button
-                      className="not-dark:text-gray-100 not-dark:hover:text-gray-800"
-                      theme="ghost"
-                      size="sm"
-                      onClick={() => onDelete(annotation)}
-                    >
-                      {/* <TrashIcon className="w-4 h-4 block" /> */}
-                      Delete
-                    </Button>
-                  )}
-                </div>
-              )}
-            </div>
+            {interactive && isTouchDevice ? (
+              <button
+                className="relative flex flex-col gap-y-px w-full max-w-64 text-left focus:outline-none"
+                onClick={() => onEdit!(annotation)}
+              >
+                {content}
+              </button>
+            ) : (
+              <div className="relative flex flex-col gap-y-px w-full max-w-64">
+                {content}
+              </div>
+            )}
           </div>
         )
       })}
@@ -746,12 +716,13 @@ const AddAnnotationButton = ({
 
   return (
     <Button
-      size="sm"
+      size="xs"
+      className="flex-1 bg-gray-600/70 border-gray-600/70 hover:bg-gray-600 hover:border-gray-600"
       onClick={() =>
         setModal({
           type: 'create-annotation',
           annotation: {
-            note: `Note on ${timelabel}`,
+            note: `E.g. 'Campaign started' or 'Feature released'`,
             type: AnnotationType.personal,
             datetime: timelabel,
             granularity: getAnnotationGranularity(interval)
@@ -827,7 +798,7 @@ const MainGraphTooltip = ({
         'pointer-events-none': !persistent
       })}
     >
-      <aside className="text-sm font-normal text-gray-100 flex flex-col gap-1.5">
+      <aside className="text-sm font-normal text-gray-100 flex flex-col gap-2">
         <div className="flex justify-between items-center rounded-sm">
           <div className="font-semibold mr-4 text-xs uppercase whitespace-nowrap">
             {metricLabel}
@@ -923,7 +894,7 @@ const PinnedAnnotationsTooltip = ({
           onClick()
         }}
       >
-        <AnnotationsList annotations={annotations} expandedIndex={null} />
+        <AnnotationsList annotations={annotations} />
       </div>
     </GraphTooltipWrapper>
   )