Fix position when screen is too smal

PostHog · Oct 27, 2023 · 796a73d · 796a73d
1 parent b95b7a6
commit 796a73d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
@@ -7,13 +7,27 @@
     width: 3rem;
     display: flex;
     background: var(--accent-3000);
-    max-width: 60%;
 
     .LemonButton {
         min-height: 2.25rem !important; // Reduce minimum height
     }
 
     &--open {
+        position: relative;
+        max-width: 60%;
+
+        @media (max-width: 1200px) {
+            position: fixed;
+            top: 0;
+            right: 0;
+            max-width: calc(100vw - 3rem);
+            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
+
+            [theme='dark'] & {
+                box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.1);
+            }
+        }
+
         // TODO: This should be the default, but controllable in the UI
         width: 50rem;
     }

diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
@@ -21,6 +21,7 @@ export function SidePanel(): JSX.Element {
         containerRef: ref,
         persistentKey: '',
         closeThreshold: 450,
+        placement: 'left',
         onToggleClosed: (shouldBeClosed) => {
             shouldBeClosed ? closeSidePanel() : selectedTab ? openSidePanel(selectedTab) : undefined
         },

diff --git a/frontend/src/lib/components/Resizer/resizerLogic.ts b/frontend/src/lib/components/Resizer/resizerLogic.ts
@@ -13,6 +13,8 @@ export type ResizerEvent = {
 export type ResizerLogicProps = {
     /** Specifying a persistence key, will store the desired resize values in localstorage */
     persistentKey?: string
+    /** Where the resizer is placed - the width increases as the mouse moves {placement}   */
+    placement: 'left' | 'right'
     containerRef: React.RefObject<HTMLDivElement>
     onResize?: (event: ResizerEvent) => void
     /** At what width, should this rather be considered a "close" event */
@@ -80,7 +82,6 @@ export const resizerLogic = kea<resizerLogicType>([
 
             let isClosed = props.closeThreshold ? originContainerBounds.width < props.closeThreshold : false
 
-            const direction = startX < originContainerBounds.left + originContainerBounds.width * 0.5 ? 'left' : 'right'
             removeAllListeners(cache)
             cache.originX = startX
 
@@ -89,7 +90,7 @@ export const resizerLogic = kea<resizerLogicType>([
                 // The resizer could be on the left or the right, so we need to account for this
 
                 const desiredWidth =
-                    direction === 'left'
+                    props.placement === 'left'
                         ? originContainerBounds.width - (e.pageX - cache.originX)
                         : originContainerBounds.width + (e.pageX - cache.originX)