fix: general fixes to the handbook and aztec handbook (#109)

Fix issues with aztec handbook sidebar

Author: oxlumi

packages/common-config/src/components/CategoryCards/styles.module.css

@@ -7,20 +7,22 @@
   margin-top: 1.5rem;
   padding: 0 0;
   margin-bottom: 2rem;
-  max-width: 66rem;
+  max-width: 80rem;
   justify-items: center;
 }
 
 .categoryCard {
   background: rgba(255, 255, 255, 0.08);
   height: 7.5rem;
-  width: 15.6rem;
+  width: 100%;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
+  padding: 0 1rem; /* provide breathing room so long titles don't clip */
+  box-sizing: border-box;
   transition: all 0.3s ease;
   text-decoration: none !important;
   position: relative;
@@ -84,7 +86,7 @@
     -apple-system,
     sans-serif;
   font-weight: 500;
-  font-size: 1rem;
+  font-size: 0.9rem;
   line-height: 1.2;
   padding-top: 0.15em;
   color: var(--wonderland-gray-100);
@@ -95,6 +97,7 @@
   position: relative;
   z-index: 1;
   text-decoration: none !important;
+  white-space: nowrap;
 }
 
 .categoryTitle::after {
@@ -116,7 +119,7 @@
   }
 
   .categoryTitle {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
   }
   .categoryIcon {
     width: 30px;
@@ -143,7 +146,7 @@
   }
 
   .categoryTitle {
-    font-size: 1rem;
+    font-size: 0.75rem; /* keep smaller on narrower screens to prevent overflow */
   }
   .categoryIcon {
     width: 40px;

sites/aztec/docs/block-production/fallback-mechanisms.md

@@ -65,6 +65,56 @@ const sidebars: SidebarsConfig = {
       'stack/wrapping-up'
     ],
     },
+    {
+      type: 'category',
+      label: 'Contracts',
+      collapsible: false,
+      collapsed: false,
+      link: {
+        type: 'doc',
+        id: 'contracts/overview',
+      },
+      items: [
+        {
+          type: 'category',
+          label: 'Account Contracts',
+          items: [
+            'contracts/account-contracts/overview',
+            'contracts/account-contracts/account-contracts',
+            'contracts/account-contracts/authwit'
+          ],
+        },
+        {
+          type: 'category',
+          label: 'Dumb Contracts',
+          items: [
+            'contracts/dumb-contracts/overview',
+            'contracts/dumb-contracts/design',
+            'contracts/dumb-contracts/state',
+          ],
+        },
+        {
+          type: 'doc',
+          label: 'Wrapping Up',
+          id: 'contracts/wrapping-up',
+        },
+      ],
+    },
+    // {
+    //   type: 'category',
+    //   label: 'Block Production',
+    //   collapsible: false,
+    //   collapsed: false,
+    //   link: {
+    //     type: 'doc',
+    //     id: 'block-production/overview',
+    //   },
+    //   items: [
+    //     'block-production/sequencing',
+    //     'block-production/proving',
+    //     'block-production/fallback-mechanisms',
+    //   ],
+    // },
     {
       type: 'category',
       label: 'Block Production',
@@ -76,8 +126,6 @@ const sidebars: SidebarsConfig = {
       },
       items: [
         'block-production/sequencing',
-        'block-production/proving',
-        'block-production/fallback-mechanisms',
       ],
     },
   ],

sites/aztec/docs/block-production/proving.md

@@ -21,7 +21,19 @@
 
 .menu__list-item-collapsible .menu__link[href^="/docs/stack"]::before {
   content: "";
-  background-image: url("/img/icons/stack-icon-filled.svg");
+  background-image: url("/img/icons/stack-icon.svg");
+  background-size: 1rem 1rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
+.menu__list-item-collapsible .menu__link[href^="/docs/block-production"]::before {
+  content: "";
+  background-image: url("/img/icons/processes-icon.svg");
   background-size: 1rem 1rem;
   background-repeat: no-repeat;
   background-position: center;
@@ -96,6 +108,9 @@
 .theme-doc-sidebar-item-category
   .menu__list-item-collapsible
   .menu__link[href^="/docs/privacy"],
+.theme-doc-sidebar-item-category
+  .menu__list-item-collapsible
+  .menu__link[href^="/docs/block-production"],
 .theme-doc-sidebar-item-category
   .menu__list-item-collapsible
   .menu__link[href^="/docs/contracts"] {