UX: allow sidebar to appear inline down to 768px (#20271)

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

* test fix

* fix typos

app/assets/javascripts/discourse/app/lib/narrow-desktop.js

@@ -10,7 +10,7 @@ const NarrowDesktop = {
   },
 
   isNarrowDesktopView(width) {
-    return width < 1000;
+    return width < 768;
   },
 };
 

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"),

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;

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
 // --------------------------------------------------

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;
   }
 }

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 {