From 1c64b2dd954fe2a1a2ed764bcd68f0171469979a Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 13 Feb 2023 17:51:42 -0500
Subject: [PATCH] UX: allow sidebar to appear inline down to 768px (#20271)

* UX: allow sidebar to appear inline down to 768px

* test fix

* fix typos
---
 .../discourse/app/lib/narrow-desktop.js       |  2 +-
 .../acceptance/sidebar-narrow-desktop-test.js |  6 ++--
 .../stylesheets/common/base/sidebar.scss      |  3 ++
 .../common/foundation/variables.scss          |  1 +
 app/assets/stylesheets/desktop/discourse.scss |  3 ++
 .../stylesheets/desktop/topic-list.scss       | 28 ++++++++++++-------
 6 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/lib/narrow-desktop.js b/app/assets/javascripts/discourse/app/lib/narrow-desktop.js
index 5d2a89b98c0..595b6d5b6b5 100644
--- a/app/assets/javascripts/discourse/app/lib/narrow-desktop.js
+++ b/app/assets/javascripts/discourse/app/lib/narrow-desktop.js
@@ -10,7 +10,7 @@ const NarrowDesktop = {
   },
 
   isNarrowDesktopView(width) {
-    return width < 1000;
+    return width < 768;
   },
 };
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js
index 7ac9ef275fb..f344cdf6f7e 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js
@@ -18,14 +18,14 @@ acceptance("Sidebar - Narrow Desktop", function (needs) {
 
     await click(".header-sidebar-toggle .btn");
 
-    assert.ok(!exists("#d-sidebar"), "widge sidebar is collapsed");
+    assert.ok(!exists("#d-sidebar"), "wide sidebar is collapsed");
 
     await click(".header-sidebar-toggle .btn");
 
     assert.ok(exists("#d-sidebar"), "wide sidebar is displayed");
 
     const bodyElement = document.querySelector("body");
-    bodyElement.style.width = "990px";
+    bodyElement.style.width = "767px";
 
     await waitUntil(
       () => document.querySelector(".btn-sidebar-toggle.narrow-desktop"),
@@ -60,7 +60,7 @@ acceptance("Sidebar - Narrow Desktop", function (needs) {
     await settled();
 
     const bodyElement = document.querySelector("body");
-    bodyElement.style.width = "990px";
+    bodyElement.style.width = "767px";
 
     await waitUntil(
       () => document.querySelector(".btn-sidebar-toggle.narrow-desktop"),
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index a2957d35ddb..84162701e43 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -1,5 +1,8 @@
 :root {
   --d-sidebar-width: #{$d-sidebar-width};
+  @include breakpoint(large) {
+    --d-sidebar-width: #{$d-sidebar-narrow-width};
+  }
   --d-sidebar-animation-time: 0.25s;
   --d-sidebar-animation-ease: ease-in-out;
   --d-sidebar-row-height: 30px;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index d6ef33e6203..6befd666194 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -18,6 +18,7 @@ $topic-avatar-width: 45px;
 $reply-area-max-width: 1475px !default;
 
 $d-sidebar-width: 16em !default;
+$d-sidebar-narrow-width: 14em !default;
 
 // Brand color variables
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index d4ea40297f8..d2bff7998d2 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -205,6 +205,9 @@ body.has-sidebar-page {
   #main-outlet-wrapper {
     grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
     gap: 0 2em;
+    @include breakpoint(large) {
+      gap: 0 1em;
+    }
     padding-left: 0;
   }
 }
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index ba540f199d6..1ccceece616 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -202,10 +202,10 @@
     }
     // reduce width for more title space
     .posts {
-      width: 50px;
+      width: 3em;
     }
     .posters {
-      width: 30px;
+      width: 2em;
       text-align: center;
     }
     // show only the first poster
@@ -227,26 +227,34 @@
   }
 }
 
+@include breakpoint(large, $sidebar: true) {
+  .topic-list {
+    .topic-list-item .topic-list-data:first-of-type {
+      padding: 0.8em 0.33em;
+    }
+    .topic-list-data {
+      padding: 0.33em;
+    }
+  }
+}
+
 @include breakpoint(medium) {
-  // slightly smaller font, tighten spacing on nav pills
   .nav-pills {
     > li > a {
       font-size: var(--font-0);
-      padding: 7px 10px;
+      padding: 0.45em 0.67em;
     }
   }
 
   .topic-list {
-    // tighter table header spacing
-    .topic-list-item .topic-list-data:first-of-type {
-      padding: 12px 5px;
-    }
-    // smaller table cell spacing
     .topic-list-data {
-      padding: 10px;
       font-size: var(--font-0);
     }
   }
+
+  .topic-list-header {
+    font-size: var(--font-down-1);
+  }
 }
 
 .container.list-container {