Put the highlight menu in a container

packages/web/components/patterns/ArticleNotes.tsx

@@ -182,7 +182,6 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
       css={{
         width: '100%',
         ...RcEditorStyles(isDark, true),
-        pr: '25px',
       }}
       onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.code.toLowerCase() === 'escape') {

packages/web/components/patterns/HighlightView.tsx

@@ -15,12 +15,22 @@ import { HighlightViewNote } from './HighlightNotes'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { isDarkTheme } from '../../lib/themeUpdater'
+import { HighlightsMenu } from '../templates/homeFeed/HighlightItem'
+import { ReadableItem } from '../../lib/networking/queries/useGetLibraryItemsQuery'
+import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
 
 type HighlightViewProps = {
+  item: ReadableItem
+  viewer: UserBasicData
   highlight: Highlight
   author?: string
   title?: string
   updateHighlight: (highlight: Highlight) => void
+
+  viewInReader: (highlightId: string) => void
+
+  setLabelsTarget: (target: Highlight) => void
+  setShowConfirmDeleteHighlightId: (set: string) => void
 }
 
 const StyledQuote = styled(Blockquote, {
@@ -38,13 +48,14 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
   const [noteMode, setNoteMode] = useState<'preview' | 'edit'>('preview')
 
   return (
-    <HStack
+    <VStack
       css={{
-        p: '5px',
+        p: '0px',
         width: '100%',
         alignItems: 'stretch',
         bg: isDark ? '#3D3D3D' : '$thBackground',
         borderRadius: '6px',
+        border: '1px solid $thBorderSubtle',
         boxShadow: '0px 4px 4px rgba(33, 33, 33, 0.1)',
         '@mdDown': {
           p: '0px',
@@ -52,6 +63,27 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
       }}
     >
       <VStack
+        css={{
+          borderBottom: '1px solid $thBorderSubtle',
+          width: '100%',
+          height: '40px',
+          paddingRight: '10px',
+        }}
+        distribution="end"
+        alignment="end"
+      >
+        <HighlightsMenu
+          item={props.item}
+          viewer={props.viewer}
+          highlight={props.highlight}
+          viewInReader={props.viewInReader}
+          setLabelsTarget={props.setLabelsTarget}
+          setShowConfirmDeleteHighlightId={
+            props.setShowConfirmDeleteHighlightId
+          }
+        />
+      </VStack>
+      {/* <VStack
         css={{
           minHeight: '100%',
           width: '10px',
@@ -63,7 +95,6 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
           },
         }}
       >
-        {/* <CaretDown size={12} color="#898989" weight="fill" /> */}
         <Box
           css={{
             width: '2px',
@@ -75,7 +106,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
             marginBottom: '25px',
           }}
         />
-      </VStack>
+      </VStack> */}
 
       <VStack
         css={{
@@ -140,6 +171,6 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
           />
         </HStack>
       </VStack>
-    </HStack>
+    </VStack>
   )
 }

packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx

@@ -130,6 +130,8 @@ export function LibraryHighlightGridCard(
                 <SpanBox key={`hv-${highlight.id}`}>
                   <HighlightView
                     key={highlight.id}
+                    viewer={props.viewer}
+                    item={props.item}
                     highlight={highlight}
                     updateHighlight={(highlight) => {
                       console.log('updated highlight: ', highlight)

packages/web/components/templates/article/HighlightViewItem.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
-import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { HighlightView } from '../../patterns/HighlightView'
 import { HighlightsMenu } from '../homeFeed/HighlightItem'
 
@@ -35,19 +35,18 @@ export function HighlightViewItem(props: HighlightViewItemProps): JSX.Element {
     >
       <VStack css={{ width: '100%', height: '100%' }}>
         <HighlightView
+          viewer={props.viewer}
+          item={props.item}
           highlight={props.highlight}
           updateHighlight={props.updateHighlight}
+          viewInReader={props.viewInReader}
+          setLabelsTarget={props.setSetLabelsTarget}
+          setShowConfirmDeleteHighlightId={
+            props.setShowConfirmDeleteHighlightId
+          }
         />
         <SpanBox css={{ mb: '15px' }} />
       </VStack>
-      <HighlightsMenu
-        item={props.item}
-        viewer={props.viewer}
-        highlight={props.highlight}
-        viewInReader={props.viewInReader}
-        setLabelsTarget={props.setSetLabelsTarget}
-        setShowConfirmDeleteHighlightId={props.setShowConfirmDeleteHighlightId}
-      />
     </HStack>
   )
 }

packages/web/components/templates/article/Notebook.tsx

@@ -367,7 +367,10 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
         <SetHighlightLabelsModalPresenter
           highlight={labelsTarget}
           highlightId={labelsTarget.id}
-          onOpenChange={() => setLabelsTarget(undefined)}
+          onOpenChange={() => {
+            mutate()
+            setLabelsTarget(undefined)
+          }}
         />
       )}
       {props.showConfirmDeleteNote && (

packages/web/components/templates/homeFeed/HighlightItem.tsx

@@ -66,6 +66,7 @@ export function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
         triggerElement={
           <Box
             css={{
+              marginLeft: 'auto',
               display: 'flex',
               height: '20px',
               width: '20px',