Added resize functionality to notebooks

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

@@ -32,6 +32,7 @@ import { NotebookContent } from './Notebook'
 import { NotebookHeader } from './NotebookHeader'
 import useGetWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
 import { ConfirmationModal } from '../../patterns/ConfirmationModal'
+import { Resizable } from 're-resizable'
 
 type HighlightsLayerProps = {
   viewer: UserBasicData
@@ -850,7 +851,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
       <SlidingPane
         className="sliding-pane-class"
         isOpen={props.showHighlightsModal}
-        width={windowDimensions.width < 600 ? '100%' : '420px'}
+        width="fit-content"
         hideHeader={true}
         from="right"
         overlayClassName="slide-panel-overlay"
@@ -858,7 +859,31 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
           props.setShowHighlightsModal(false)
         }}
       >
-        <>
+        <Resizable
+          onResize={(_e, _direction, ref) => {
+            if (parseInt(ref.style.width) < 210) {
+              props.setShowHighlightsModal(false)
+            }
+          }}
+          defaultSize={{
+            width: windowDimensions.width < 600 ? '100%' : '420px',
+            height: '100%',
+          }}
+          enable={
+            windowDimensions.width < 600
+              ? false
+              : {
+                  top: false,
+                  right: false,
+                  bottom: false,
+                  left: true,
+                  topRight: false,
+                  bottomRight: false,
+                  bottomLeft: false,
+                  topLeft: false,
+                }
+          }
+        >
           <NotebookHeader
             viewer={props.viewer}
             item={props.item}
@@ -887,7 +912,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
               )
             }}
           />
-        </>
+        </Resizable>
       </SlidingPane>
     </>
   )

packages/web/package.json

@@ -49,6 +49,7 @@
     "phosphor-react": "^1.4.0",
     "posthog-js": "^1.78.2",
     "pspdfkit": "^2023.4.6",
+    "re-resizable": "^6.9.11",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.5.1",