Add padding on bottom of notebooks, add cancel button to note editor

packages/web/components/patterns/HighlightNotes.tsx

@@ -232,6 +232,16 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
                 marginLeft: 'auto',
               }}
             >
+              <Button
+                css={{ marginRight: '10px' }}
+                style="ctaOutlineYellow"
+                onClick={(event) => {
+                  props.setEditMode('preview')
+                  event.preventDefault()
+                }}
+              >
+                Cancel
+              </Button>
               <Button
                 style="ctaDarkYellow"
                 onClick={(event) => {

packages/web/components/patterns/HighlightView.tsx

@@ -74,12 +74,6 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
 
   const { getReferenceProps, getFloatingProps } = useInteractions([hover])
 
-  console.log(
-    'ref={refs.setFloating, style={floatingStyles}',
-    refs.setFloating,
-    floatingStyles
-  )
-
   return (
     <VStack
       ref={refs.setReference}

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

@@ -290,9 +290,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
           ) : null}
         </HStack>
       </>
-      {/* )} */}
 
-      {/* {tabSelected == 'highlights' && ( */}
       <VStack css={{ mt: '20px', gap: '30px' }}>
         {sortedHighlights.map((highlight) => (
           <HighlightViewItem
@@ -327,8 +325,13 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
             You have not added any highlights to this document.
           </Box>
         )}
+        <Box
+          css={{
+            width: '100%',
+            height: '320px',
+          }}
+        ></Box>
       </VStack>
-      {/* )} */}
 
       {showConfirmDeleteHighlightId && (
         <ConfirmationModal