@brillout/docpress 0.15.13-commit-ffe283f → 0.15.13-commit-03246ec

package/Layout.tsx

@@ -255,11 +255,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 
   const navHeadSecondary = (
     <div
-      className={cls([
-        'nav-head-secondary',
-        isNavLeft && 'show-on-nav-hover add-transition',
-        !!navMaxWidth && 'has-max-width',
-      ])}
+      className={cls(['nav-head-secondary', isNavLeft && 'show-on-nav-hover add-transition'])}
       style={{
         padding: 0,
         display: 'flex',
@@ -289,7 +285,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 
   return (
     <div
-      className={cls(['nav-head', isNavLeft && 'is-nav-left', 'link-hover-animation'])}
+      className={cls(['nav-head link-hover-animation', isNavLeft && 'is-nav-left', !!navMaxWidth && 'has-max-width'])}
       style={{
         display: 'flex',
         justifyContent: isNavLeft ? 'flex-end' : 'center',
@@ -394,7 +390,7 @@ function getStyleNav() {
     }
     &.has-max-width {
       .desktop-grow {
-        display: block;
+        display: block !important;
       }
       .desktop-grow,
       .nav-head-secondary {

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -23,7 +23,16 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
     window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true })
   })
   const navItemsByColumnLayouts = getNavItemsByColumnLayouts(navItemsWithComputed, viewportWidth)
+  const columnWidthBase = navLeftWidthMax + 20
   const maxColumns = Math.max(...navItemsByColumnLayouts.map((layout) => layout.columns.length), 1)
+  const widthMax = maxColumns * columnWidthBase
+  const getColumnsWrapperStyle = (columnLayout: NavItemsByColumnLayout) => {
+    const widthColumn = columnLayout.columns.length * columnWidthBase
+    return {
+      width: Math.max(700, widthColumn),
+      maxWidth: `min(100%, ${widthMax}px)`,
+    }
+  }
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -41,7 +50,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
           >
             {columnLayout.isFullWidthCategory ? (
               <div style={{ marginTop: 0 }}>
-                <ColumnsWrapper numberOfColumns={maxColumns}>
+                <ColumnsWrapper style={getColumnsWrapperStyle(columnLayout)}>
                   <Collapsible
                     head={(onClick) => <NavItemComponent navItem={columnLayout.navItemLevel1} onClick={onClick} />}
                     disabled={maxColumns > 1}
@@ -62,7 +71,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
                 </ColumnsWrapper>
               </div>
             ) : (
-              <ColumnsWrapper numberOfColumns={maxColumns}>
+              <ColumnsWrapper style={getColumnsWrapperStyle(columnLayout)}>
                 <ColumnsLayout>
                   {columnLayout.columns.map((column, j) => (
                     <Column key={j}>
@@ -166,14 +175,14 @@ function Column({ children }: { children: React.ReactNode }) {
     </div>
   )
 }
-function ColumnsWrapper({ children, numberOfColumns }: { children: React.ReactNode; numberOfColumns: number }) {
+function ColumnsWrapper({ children, style }: { children: React.ReactNode; style: React.CSSProperties }) {
   return (
     <div
+      className="columns-wrapper"
       style={{
-        width: numberOfColumns * (navLeftWidthMax + 20),
-        maxWidth: '100%',
         paddingLeft: 3,
         margin: 'auto',
+        ...style,
       }}
     >
       {children}

package/MenuModal.tsx

@@ -132,6 +132,9 @@ function getStyle() {
   .show-only-on-desktop {
     display: none !important;
   }
+  .columns-wrapper {
+    width: 100% !important;
+  }
 }
 
 ${/* Hide same-page headings navigation */ ''}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.13-commit-ffe283f",
+  "version": "0.15.13-commit-03246ec",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",