Increase max width

FlowFuse · Jun 25, 2024 · f0cd7c8 · f0cd7c8
1 parent a535756
commit f0cd7c8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -169,7 +169,7 @@ eleventyComputed:
             {% include "../components/events-banner.njk" %}
             <!-- Navigation Header -->
             <header id="ff-header" class="ff-header">
-                <nav class="relative w-full flex items-center justify-between mx-auto container md:max-w-screen-xl">
+                <nav class="relative w-full flex items-center justify-between mx-auto container lg:max-w-screen-xl 2xl:max-w-[1920px]">
                     <a class="flex md:hidden lg:flex no-underline hover:no-underline font-bold h-8 w-40 flex-row"  href="/" style="font-family:'Baloo 2', sans-serif">
                         {% include "components/flowfuse-wordmark.njk" %}
                     </a>

diff --git a/src/_includes/layouts/handbook.njk b/src/_includes/layouts/handbook.njk
@@ -19,12 +19,12 @@ date: git Last Modified
     }
 </script>
 <div class="w-full bg-white/50">
-<div class="handbook ff-prose text-left pb-24 md:max-w-screen-xl m-auto">
+<div class="handbook ff-prose text-left pb-24 m-auto">
     {% include "./left-nav.njk" %}
 
-    <div class="max-w-screen-lg mx-auto px-10 pt-8">
+    <div class="px-10 pt-8 content-column">
         <!-- Breadcrumbs - Desktop -->
-        <div class="hidden w-full mx-auto md:block">
+        <div class="hidden w-full md:block">
             <div class="font-medium border-b pb-1">
                 {% if version %}
                 v{{ version }}
@@ -35,16 +35,16 @@ date: git Last Modified
         <div class="w-full m-auto md:pt-6">
             <div id="algolia-search" class="border rounded"></div>
         </div>
-        <div class="w-full mx-auto flex flex-col md:flex-row">
+        <div class="w-full">
             <!-- Main Content -->
-            <div class="flex-grow order-last md:order-first">
+            <div class="order-last md:order-first">
                 <div class="mt-6 mb-4 prose prose-blue main-content">
                     {{ content | rewriteHandbookLinks(page) | safe }}
                 </div>
             </div>
         </div>
     </div>
-    <div class="border-l">
+    <div class="border-l right-nav">
         <!-- Breadcrumbs - Mobile -->
         <div class="block px-8 pt-4 w-full mx-auto md:hidden">
             <div class="font-medium border-b pb-1">

diff --git a/src/css/style.handbook.css b/src/css/style.handbook.css
@@ -3,9 +3,9 @@
 
 @layer components {
     .handbook {
-        grid-template-columns: 220px 1fr auto;
+        grid-template-columns: 220px auto 260px;
         margin-top: -3rem;
-        @apply flex flex-col-reverse md:grid;
+        @apply flex flex-col-reverse lg:grid lg:max-w-screen-xl 2xl:max-w-[1920px] ;
     }
 
     .handbook-nav {
@@ -18,8 +18,9 @@
         background-color: transparent;
         padding-top: 0.25rem;
         max-height: calc(100vh - 1.5rem);
+        max-width: 300px;
         overflow-y: auto;
-        @apply sticky top-12 pl-2 sm:pl-6 xl:pl-0;
+        @apply sticky top-12 pl-6;
     }
 
     .handbook-nav-nested {
@@ -121,6 +122,16 @@
         text-align: center;
     }
 
+    .handbook .table-wrapper {
+        overflow-x: auto;
+        max-width: 100%;
+        @apply lg:max-w-[calc(100vw-590px)];
+    }
+
+    .handbook pre {
+        max-width: max-content;
+    }
+
     /* Define animation transitions for all child UL elements */
     .handbook-nav ul {
         max-height: 0;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -36,7 +36,7 @@ module.exports = {
                         strong: {
                             color: theme('colors.gray.500'),
                         },
-                        maxWidth: '80ch',
+                        maxWidth: 'none',
                     },
                 },
             }),