From 5c72cea3deecc3bee80f83e1d94be38bc2da1b74 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Wed, 13 Mar 2024 23:37:16 -0500
Subject: [PATCH] Website: Handbook style fixes (#17610)

Closes: https://github.com/fleetdm/confidential/issues/5750

Changes:
- Updated the handbook stylesheet:
- Breadcrumbs from having linebreaks and overflowing outside the page's
container
- Added a max width to mermaid diagrams to prevent them from overflowing
outside the page's container
- Updated the size of `<h1>` text on smaller screens to prevent the
page's title from overflowing outside of the page's container
---
 .../styles/pages/handbook/basic-handbook.less | 17 ++++++++++++++
 .../views/pages/handbook/basic-handbook.ejs   | 22 ++++++++-----------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/website/assets/styles/pages/handbook/basic-handbook.less b/website/assets/styles/pages/handbook/basic-handbook.less
index 9cec13dc60..0cd2959a2d 100644
--- a/website/assets/styles/pages/handbook/basic-handbook.less
+++ b/website/assets/styles/pages/handbook/basic-handbook.less
@@ -102,12 +102,22 @@
   }
 
   [purpose='breadcrumbs'] {
+    [purpose='page-breadcrumbs'] {
+      max-width: 100%;
+      overflow: hidden;
+    }
+
     padding-bottom: 16px;
     padding-top: 16px;
     p, a, strong {
       font-size: 12px;
       line-height: 18px;
     }
+    [purpose='current-page-breadcrumb'] {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
     a {
       text-decoration: none;
       &.active {
@@ -323,6 +333,7 @@
       font-family: @code-font;
       display: inline-block;
       svg {
+        max-width: 100%;
         max-height: 600px;
       }
     }
@@ -628,6 +639,12 @@
     [purpose='handbook-template'] {
       padding: 0px 24px;
     }
+    [purpose='content'] {
+      h1 {
+        font-size: 28px;
+        line-height: 120%;
+      }
+    }
   }
 
 
diff --git a/website/views/pages/handbook/basic-handbook.ejs b/website/views/pages/handbook/basic-handbook.ejs
index afcbdc8676..9e0dab8c6e 100644
--- a/website/views/pages/handbook/basic-handbook.ejs
+++ b/website/views/pages/handbook/basic-handbook.ejs
@@ -24,22 +24,18 @@
       <div class="d-flex flex-column handbook-content">
 
         <div purpose="breadcrumbs" class="d-flex m-0 align-items-center breadcrumbs">
-          <div class="d-flex flex-row align-items-center" v-if="breadcrumbs.length > 1">
+          <div purpose="page-breadcrumbs" class="d-flex flex-row align-items-center" v-if="breadcrumbs.length > 1">
             <a :href="'/' + breadcrumbs[0]" class="pr-3">
               {{breadcrumbs[0] === 'handbook' ? 'Introduction' : breadcrumbs[0]}}
             </a>
-            <div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length === 3">
-              <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png" />
-              <a :href="'/' + breadcrumbs[0] + '/' + breadcrumbs[1]" class="px-3">
-                {{_getTitleFromUrl(breadcrumbs[1])}}
-              </a>
-            </div>
-            <div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length > 1">
-              <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/>
-              <p class="px-3 m-0">
-                {{thisPage.title}}
-              </p>
-            </div>
+            <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png" / v-if="breadcrumbs.length === 3">
+            <a :href="'/' + breadcrumbs[0] + '/' + breadcrumbs[1]" class="px-3" v-if="breadcrumbs.length === 3">
+              {{_getTitleFromUrl(breadcrumbs[1])}}
+            </a>
+            <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/ v-if="breadcrumbs.length > 1">
+            <p purpose="current-page-breadcrumb" class="pl-3 m-0" v-if="breadcrumbs.length > 1">
+              {{thisPage.title}}
+            </p>
           </div>
           <div v-else>
             <strong>Introduction</strong>