#434

frontend/src/components/layout/SidebarComponent.tsx

@@ -15,6 +15,7 @@ type Props = {
     children:      ReactNode
     className?:    string
     maxWidth?:     number
+    maxWidthRatio?: number
     onWidthChange?: (width: number) => void
     sidebarKey:    string
     side?:         SidebarSide }
@@ -67,6 +68,7 @@ const SidebarComponent: FC<Props> = ({
     children,
     className,
     maxWidth,
+    maxWidthRatio,
     onWidthChange,
     sidebarKey,
     side = 'left',
@@ -80,6 +82,7 @@ const SidebarComponent: FC<Props> = ({
   )
   const rootRef = useRef<HTMLDivElement | null> (null)
   const maxWidthRef = useRef (maxWidth)
+  const maxWidthRatioRef = useRef (maxWidthRatio)
   const getContainerWidth = useCallback (() => {
     const containerWidth = rootRef.current
 	?.closest ('[data-sidebar-container]')
@@ -93,12 +96,14 @@ const SidebarComponent: FC<Props> = ({
     const viewportWidth =
 	typeof window === 'undefined' ? containerWidth : window.innerWidth
     const viewportMaxWidth = Math.floor (viewportWidth * MAX_VIEWPORT_WIDTH_RATIO)
-    const maxAllowedWidth =
-	maxWidthRef.current == null
+    const ratioMaxWidth = maxWidthRatioRef.current == null
+	? Infinity : Math.floor (containerWidth * maxWidthRatioRef.current)
+    const configuredMaxWidth = maxWidthRef.current == null
 	? getSidebarMaxWidth (containerWidth)
-	: Math.max (
-	    MIN_SIDEBAR_WIDTH,
+	: Math.max (MIN_SIDEBAR_WIDTH,
 	    Math.min (viewportMaxWidth, maxWidthRef.current))
+    const maxAllowedWidth = Math.max (MIN_SIDEBAR_WIDTH,
+	Math.min (ratioMaxWidth, configuredMaxWidth))
 
     return Math.min (maxAllowedWidth, Math.max (MIN_SIDEBAR_WIDTH, nextWidth))
   }, [])
@@ -171,10 +176,11 @@ const SidebarComponent: FC<Props> = ({
 
   useEffect (() => {
     maxWidthRef.current = maxWidth
+    maxWidthRatioRef.current = maxWidthRatio
     const containerWidth = getContainerWidth ()
     const nextWidth = getClampedWidth (widthRef.current, containerWidth)
     applyWidth (nextWidth)
-  }, [applyWidth, getClampedWidth, getContainerWidth, maxWidth])
+  }, [applyWidth, getClampedWidth, getContainerWidth, maxWidth, maxWidthRatio])
 
   const updateWidth = useCallback ((clientX: number) => {
     const state = resizeRef.current