From e0cde16fe41296dd58b3583c5f035ad38d8c0e18 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 13 May 2026 16:34:57 +0000
Subject: [PATCH] ui: reorder product switcher dropdown with divider before
 Fern CLI/Dashboard

Co-Authored-By: Kapil Gowru <k.gowru@gmail.com>
---
 fern/assets/styles.css | 32 +++++++++++++++++++++++++++++++-
 fern/docs.yml          | 26 +++++++++++++-------------
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/fern/assets/styles.css b/fern/assets/styles.css
index ccd04d8d7..f6da4ec02 100644
--- a/fern/assets/styles.css
+++ b/fern/assets/styles.css
@@ -121,6 +121,7 @@ h1, h2, h3 {
     gap: 1.5rem;
     padding: 1.25rem;
     height: 248px;
+    position: relative;
     
     > a {
       max-width: 320px;
@@ -133,6 +134,20 @@ h1, h2, h3 {
 
     }
 
+    /* Divider between row 2 (Docs / CLI Generator) and row 3 (Fern CLI /
+       Dashboard), spanning the left two columns. The spec column on the
+       right stacks tightly via translateY, so we do not draw across it. */
+    &::after {
+      content: '';
+      position: absolute;
+      top: calc(1.25rem + (248px - 2.5rem - 3rem) * 2 / 3 + 2.25rem);
+      left: 1.25rem;
+      width: calc((100% - 2.5rem - 3rem) * 2 / 3 + 1.5rem);
+      height: 1px;
+      background-color: var(--grayscale-5, rgba(128, 128, 128, 0.15));
+      pointer-events: none;
+    }
+
     > a[href*="home"] {
       grid-column: 1;
       grid-row: 1;
@@ -148,7 +163,7 @@ h1, h2, h3 {
       grid-row: 2;
     }
 
-    > a[href*="dashboard"] {
+    > a[href*="cli-generator"] {
       grid-column: 2;
       grid-row: 2;
     }
@@ -158,6 +173,11 @@ h1, h2, h3 {
       grid-row: 3;
     }
 
+    > a[href*="dashboard"] {
+      grid-column: 2;
+      grid-row: 3;
+    }
+
     > a[href*="openapi"],
     > a[href*="asyncapi"],
     > a[href*="openrpc"],
@@ -242,6 +262,16 @@ h1, h2, h3 {
   }
 }
 
+/* Stacked layout (mobile and tablet, below desktop grid): mirror the desktop
+   divider by drawing a thin rule above the Fern CLI entry. */
+@media (max-width: 1023px) {
+  .fern-product-selector-radio-group > a[href*="cli-api-reference"] {
+    border-top: 1px solid var(--grayscale-5, rgba(128, 128, 128, 0.15));
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+  }
+}
+
 :is(.dark) .fern-product-selector-radio-group a[href*="home"] img {
   content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-home-dark.png") !important;
 }
diff --git a/fern/docs.yml b/fern/docs.yml
index 8f1c5360e..439673b6e 100644
--- a/fern/docs.yml
+++ b/fern/docs.yml
@@ -44,13 +44,6 @@ products:
     slug: sdks
     subtitle: Generate client libraries in multiple languages
 
-  - display-name: CLI Generator
-    path: ./products/cli-generator/cli-generator.yml
-    icon: fa-regular fa-rectangle-terminal
-    image: ./images/product-switcher/product-switcher-cli-generator-light.png
-    slug: cli-generator
-    subtitle: Generate a CLI from your API definition
-
   - display-name: Docs
     path: ./products/docs/docs.yml
     icon: fa-regular fa-browser
@@ -58,12 +51,12 @@ products:
     slug: docs
     subtitle: Generate beautiful, interactive documentation websites
 
-  - display-name: Dashboard
-    path: ./products/dashboard/dashboard.yml
-    icon: fa-regular fa-grid-2
-    image: ./images/product-switcher/product-switcher-dashboard-light.png
-    slug: dashboard
-    subtitle: Manage your Fern projects and settings
+  - display-name: CLI Generator
+    path: ./products/cli-generator/cli-generator.yml
+    icon: fa-regular fa-rectangle-terminal
+    image: ./images/product-switcher/product-switcher-cli-generator-light.png
+    slug: cli-generator
+    subtitle: Generate a CLI from your API definition
 
   - display-name: Fern CLI
     subtitle: Manage and configure your Fern projects
@@ -72,6 +65,13 @@ products:
     image: ./images/product-switcher/product-switcher-cliapi-light.png
     slug: cli-api-reference
 
+  - display-name: Dashboard
+    path: ./products/dashboard/dashboard.yml
+    icon: fa-regular fa-grid-2
+    image: ./images/product-switcher/product-switcher-dashboard-light.png
+    slug: dashboard
+    subtitle: Manage your Fern projects and settings
+
   - display-name: API Definitions
     path: ./products/api-def/api-def.yml
     icon: fa-regular fa-book