fix sizing of nav items on desktop

src/lib/components/nav-item.svelte

@@ -36,6 +36,7 @@
 
 <style lang="less">
   li {
+    box-sizing: border-box;
     font-weight: @weight-semibold;
     margin: 0;
     padding: @padding-md;
@@ -43,7 +44,7 @@
     transition: background-color 0.2s;
 
     @media screen and (min-width: @sizes[lg]) {
-      flex-grow: 1;
+      width: 50%;
 
       &.hiddenOnDesktop {
         display: none;
@@ -67,6 +68,10 @@
       @media screen and (min-width: @sizes[lg]) {
         border-bottom: unset;
         border-right: @separator;
+
+        &:nth-of-type(n + 2) {
+          border-right: unset;
+        }
       }
     }
   }

src/lib/components/nav-tree.svelte

@@ -16,7 +16,8 @@
 
 <style lang="less">
   ul {
-    border-bottom: 2px solid @color-dark;
+    @border: 2px solid @color-dark;
+    border-bottom: @border;
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -27,9 +28,11 @@
 
     @media screen and (min-width: @sizes[lg]) {
       align-items: center;
+      border-right: @border;
       display: flex !important;
       flex-direction: row;
       justify-content: space-evenly;
+      width: 50%;
     }
   }
 </style>

tests/desktop.test.ts

@@ -30,3 +30,14 @@ test('desktop page has equal width for both columns', async ({ page }) => {
   };
   expect(contentWidth).toEqual(previewWidth);
 });
+
+test('desktop page has equal width for nav items', async ({ page }) => {
+  await page.goto('/');
+  const visibleTabs = page.getByRole('tab').filter({ hasNotText: 'preview' });
+  const { width: firstTabWidth } = (await visibleTabs.first().boundingBox()) ?? {
+    width: -1,
+  };
+  for (let i = 1; i < (await visibleTabs.count()); i++) {
+    await expect((await visibleTabs.nth(i).boundingBox())?.width).toEqual(firstTabWidth);
+  }
+});