From b23c4764a2fe443445995677b2bba7dd29902deb Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Tue, 15 Apr 2025 13:46:20 +1000
Subject: [PATCH] DEV: Put full width styles into their own file (#132)

Followup f1d5b69293fe8251ff07a301d0443c54b9af78a8

We want to make it super clear that this is to be removed when we merge
full width into core, keeping it in desktop.scss together with other
styles will make that harder.
---
 desktop/desktop.scss            | 317 +-------------------------------
 scss/desktop-full-width.scss    | 255 +++++++++++++++++++++++++
 scss/desktop-horizon-fixes.scss |  65 +++++++
 3 files changed, 322 insertions(+), 315 deletions(-)
 create mode 100644 scss/desktop-full-width.scss
 create mode 100644 scss/desktop-horizon-fixes.scss

diff --git a/desktop/desktop.scss b/desktop/desktop.scss
index 59bc5fb..afb22ed 100644
--- a/desktop/desktop.scss
+++ b/desktop/desktop.scss
@@ -1,315 +1,2 @@
-// Full width layout
-
-$sidebar-width: 17em;
-
-.wrap {
-  max-width: unset; // undoing core default
-}
-
-.d-header #site-logo {
-  // constraining the logo to fit its grid container
-  // this prevents the logo from shifting header content
-  // when the sidebar is opened
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain; // contains logo without squishing/stretching
-}
-
-#main-outlet-wrapper {
-  padding: 0;
-
-  body.has-sidebar-page & {
-    .sidebar-wrapper {
-      width: var(--d-sidebar-width);
-    }
-  }
-
-  body.has-full-page-chat & {
-    gap: 0;
-  }
-
-  .sidebar-wrapper {
-    width: 100%; // safari has issues without this
-  }
-
-  #main-outlet {
-    margin: 0 auto;
-    max-width: var(--d-max-width);
-    width: 100%;
-
-    body.has-full-page-chat & {
-      max-width: unset;
-    }
-  }
-}
-
-.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
-  border: none;
-}
-
-#main-outlet > .regular {
-  max-width: var(--d-max-width);
-  margin: 0 auto;
-
-  body.has-sidebar-page & {
-    margin: 0 auto;
-  }
-}
-
-.d-header .title:not(.title--minimized) {
-  // allowing overflow here isn't always ideal
-  // but works well enough most of the time
-  overflow: visible;
-}
-
-.d-header {
-  > .wrap {
-    .contents {
-      display: grid;
-      grid-template-areas: "logo lspace extra-info rspace panel";
-      grid-template-columns:
-        minmax(auto, 1fr)
-        auto
-        minmax(0, calc(var(--d-max-width)))
-        auto
-        minmax(auto, 1fr);
-
-      .d-header-mode {
-        grid-area: extra-info;
-        white-space: nowrap;
-
-        @include breakpoint("tablet") {
-          display: none;
-        }
-      }
-
-      .d-header .title {
-        min-width: auto;
-      }
-
-      .has-sidebar-page & {
-        // at wide widths, when 1fr > 0
-        // we want the panel to be the same width as the sidebar
-        // this way we can get more accurate centering
-        grid-template-columns:
-          calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
-          1fr
-          minmax(0, calc(var(--d-max-width)))
-          1fr
-          minmax(0, calc(var(--d-sidebar-width) - 11px));
-        gap: 1em;
-
-        // at narrower widths, when 1fr = 0
-        // we can center without matching the sidebar's width
-        // which allows the title to take up the remaining width
-        @media screen and (max-width: 1400px) {
-          grid-template-columns:
-            calc(var(--d-sidebar-width) - 11px)
-            1fr
-            minmax(0, calc(var(--d-max-width)))
-            1fr
-            auto;
-        }
-
-        @media screen and (max-width: 1000px) {
-          gap: 0.5em;
-        }
-
-        .d-header-mode {
-          grid-area: extra-info;
-        }
-      }
-    }
-  }
-
-  .header-sidebar-toggle {
-    grid-area: logo;
-  }
-
-  .before-header-panel-outlet {
-    grid-area: extra-info;
-  }
-
-  .d-header-mode {
-    .bootstrap-mode {
-      margin: 0;
-    }
-  }
-
-  .home-logo-wrapper-outlet {
-    grid-area: logo;
-    margin-left: 3.7em; // 2.7em hamburger width + 1em for margin
-    margin-right: 0.725em;
-    display: flex;
-    overflow: visible;
-
-    .title {
-      flex: 1 0 auto;
-    }
-  }
-
-  .panel {
-    grid-area: panel;
-  }
-}
-
-.extra-info-wrapper {
-  grid-area: extra-info;
-  max-width: var(--d-max-width);
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.header-search--enabled .floating-search-input-wrapper {
-  grid-area: extra-info;
-
-  @include breakpoint(tablet) {
-    grid-area: rspace;
-  }
-
-  @include breakpoint(mobile-extra-large) {
-    display: none;
-  }
-}
-
-body.has-sidebar-page {
-  .wrap {
-    max-width: unset; // undoing core default
-  }
-
-  .d-header-mode,
-  .extra-info-wrapper {
-    padding: 0;
-  }
-
-  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
-    #reply-control.show-preview {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .sidebar-container {
-      height: auto;
-    }
-  }
-
-  @media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
-    #reply-control.show-preview:not(.fullscreen) {
-      margin-left: $sidebar-width;
-      width: auto;
-
-      // overruling new core composer changes
-      max-width: $reply-area-max-width;
-      transform: none;
-    }
-
-    .sidebar-container {
-      height: auto;
-    }
-  }
-
-  // overruling new core composer changes
-  @media screen and (min-width: $reply-area-max-width) {
-    #reply-control.show-preview:not(.fullscreen) {
-      max-width: $reply-area-max-width;
-      transform: none;
-    }
-  }
-}
-
-body.sidebar-animate {
-  #main-outlet-wrapper {
-    transition: none;
-  }
-
-  .d-header-wrap .wrap {
-    transition: none;
-  }
-}
-
-.d-header-icons {
-  display: flex;
-}
-
-.rtl {
-  .d-header .title {
-    margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
-    margin-left: 0.725em;
-  }
-}
-
-// provides some extra space for login buttons
-@media screen and (min-width: 1400px) {
-  .anon {
-    .d-header .panel {
-      grid-column-start: -4;
-    }
-  }
-}
-
-// Fixing bulk select (only needed for desktop)
-
-.bulk-select-enabled {
-  .topic-list-header .topic-list-data.default {
-    position: sticky;
-    top: 10em;
-  }
-  .topic-author-avatar-data {
-    display: none;
-  }
-
-  .bulk-select.topic-list-data {
-    grid-area: bulk-select;
-    margin-left: -0.5em;
-
-    @media screen and (max-width: 576px) {
-      margin-top: 0;
-      label {
-        padding-block: 0.345em;
-      }
-    }
-
-    input {
-      transform: scale(1.5);
-    }
-  }
-}
-
-.topic-list-header {
-  tr {
-    border: none;
-  }
-
-  .topic-list-data {
-    padding: 0;
-
-    &:not(.default) {
-      display: none;
-    }
-
-    &.default {
-      position: absolute;
-      right: 0;
-      .bulk-select,
-      span:not(.bulk-select-topics, .d-button-label) {
-        display: none;
-      }
-    }
-  }
-
-  .bulk-select-topics {
-    position: absolute;
-    right: -1em;
-    @media screen and (max-width: 1048px) {
-      right: 0;
-    }
-
-    background: var(--secondary);
-    border-radius: 0 0 0 var(--d-border-radius);
-    padding: 1em;
-    button {
-      white-space: nowrap;
-    }
-  }
-}
+@import "desktop-horizon-fixes";
+@import "desktop-full-width";
diff --git a/scss/desktop-full-width.scss b/scss/desktop-full-width.scss
new file mode 100644
index 0000000..a581c15
--- /dev/null
+++ b/scss/desktop-full-width.scss
@@ -0,0 +1,255 @@
+// Full width layout. Ported from the Discourse Full Width theme component here
+// https://meta.discourse.org/t/discourse-full-width-component/292496, which we
+// intend to move into core over time.
+//
+// We are copying this here so we can continue to iterate on Horizon with full
+// width without having to include the theme component as a dependency, we
+// need to remove this once full width is in core.
+
+$sidebar-width: 17em;
+
+.wrap {
+  max-width: unset; // undoing core default
+}
+
+.d-header #site-logo {
+  // constraining the logo to fit its grid container
+  // this prevents the logo from shifting header content
+  // when the sidebar is opened
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain; // contains logo without squishing/stretching
+}
+
+#main-outlet-wrapper {
+  padding: 0;
+
+  body.has-sidebar-page & {
+    .sidebar-wrapper {
+      width: var(--d-sidebar-width);
+    }
+  }
+
+  body.has-full-page-chat & {
+    gap: 0;
+  }
+
+  .sidebar-wrapper {
+    width: 100%; // safari has issues without this
+  }
+
+  #main-outlet {
+    margin: 0 auto;
+    max-width: var(--d-max-width);
+    width: 100%;
+
+    body.has-full-page-chat & {
+      max-width: unset;
+    }
+  }
+}
+
+.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
+  border: none;
+}
+
+#main-outlet > .regular {
+  max-width: var(--d-max-width);
+  margin: 0 auto;
+
+  body.has-sidebar-page & {
+    margin: 0 auto;
+  }
+}
+
+.d-header .title:not(.title--minimized) {
+  // allowing overflow here isn't always ideal
+  // but works well enough most of the time
+  overflow: visible;
+}
+
+.d-header {
+  > .wrap {
+    .contents {
+      display: grid;
+      grid-template-areas: "logo lspace extra-info rspace panel";
+      grid-template-columns:
+        minmax(auto, 1fr)
+        auto
+        minmax(0, calc(var(--d-max-width)))
+        auto
+        minmax(auto, 1fr);
+
+      .d-header-mode {
+        grid-area: extra-info;
+        white-space: nowrap;
+
+        @include breakpoint("tablet") {
+          display: none;
+        }
+      }
+
+      .d-header .title {
+        min-width: auto;
+      }
+
+      .has-sidebar-page & {
+        // at wide widths, when 1fr > 0
+        // we want the panel to be the same width as the sidebar
+        // this way we can get more accurate centering
+        grid-template-columns:
+          calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
+          1fr
+          minmax(0, calc(var(--d-max-width)))
+          1fr
+          minmax(0, calc(var(--d-sidebar-width) - 11px));
+        gap: 1em;
+
+        // at narrower widths, when 1fr = 0
+        // we can center without matching the sidebar's width
+        // which allows the title to take up the remaining width
+        @media screen and (max-width: 1400px) {
+          grid-template-columns:
+            calc(var(--d-sidebar-width) - 11px)
+            1fr
+            minmax(0, calc(var(--d-max-width)))
+            1fr
+            auto;
+        }
+
+        @media screen and (max-width: 1000px) {
+          gap: 0.5em;
+        }
+
+        .d-header-mode {
+          grid-area: extra-info;
+        }
+      }
+    }
+  }
+
+  .header-sidebar-toggle {
+    grid-area: logo;
+  }
+
+  .before-header-panel-outlet {
+    grid-area: extra-info;
+  }
+
+  .d-header-mode {
+    .bootstrap-mode {
+      margin: 0;
+    }
+  }
+
+  .home-logo-wrapper-outlet {
+    grid-area: logo;
+    margin-left: 3.7em; // 2.7em hamburger width + 1em for margin
+    margin-right: 0.725em;
+    display: flex;
+    overflow: visible;
+
+    .title {
+      flex: 1 0 auto;
+    }
+  }
+
+  .panel {
+    grid-area: panel;
+  }
+}
+
+.extra-info-wrapper {
+  grid-area: extra-info;
+  max-width: var(--d-max-width);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.header-search--enabled .floating-search-input-wrapper {
+  grid-area: extra-info;
+
+  @include breakpoint(tablet) {
+    grid-area: rspace;
+  }
+
+  @include breakpoint(mobile-extra-large) {
+    display: none;
+  }
+}
+
+body.has-sidebar-page {
+  .wrap {
+    max-width: unset; // undoing core default
+  }
+
+  .d-header-mode,
+  .extra-info-wrapper {
+    padding: 0;
+  }
+
+  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
+    #reply-control.show-preview {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .sidebar-container {
+      height: auto;
+    }
+  }
+
+  @media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
+    #reply-control.show-preview:not(.fullscreen) {
+      margin-left: $sidebar-width;
+      width: auto;
+
+      // overruling new core composer changes
+      max-width: $reply-area-max-width;
+      transform: none;
+    }
+
+    .sidebar-container {
+      height: auto;
+    }
+  }
+
+  // overruling new core composer changes
+  @media screen and (min-width: $reply-area-max-width) {
+    #reply-control.show-preview:not(.fullscreen) {
+      max-width: $reply-area-max-width;
+      transform: none;
+    }
+  }
+}
+
+body.sidebar-animate {
+  #main-outlet-wrapper {
+    transition: none;
+  }
+
+  .d-header-wrap .wrap {
+    transition: none;
+  }
+}
+
+.d-header-icons {
+  display: flex;
+}
+
+.rtl {
+  .d-header .title {
+    margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
+    margin-left: 0.725em;
+  }
+}
+
+// provides some extra space for login buttons
+@media screen and (min-width: 1400px) {
+  .anon {
+    .d-header .panel {
+      grid-column-start: -4;
+    }
+  }
+}
diff --git a/scss/desktop-horizon-fixes.scss b/scss/desktop-horizon-fixes.scss
new file mode 100644
index 0000000..a8ab039
--- /dev/null
+++ b/scss/desktop-horizon-fixes.scss
@@ -0,0 +1,65 @@
+// Fixing bulk select (only needed for desktop)
+
+.bulk-select-enabled {
+  .topic-list-header .topic-list-data.default {
+    position: sticky;
+    top: 10em;
+  }
+  .topic-author-avatar-data {
+    display: none;
+  }
+
+  .bulk-select.topic-list-data {
+    grid-area: bulk-select;
+    margin-left: -0.5em;
+
+    @media screen and (max-width: 576px) {
+      margin-top: 0;
+      label {
+        padding-block: 0.345em;
+      }
+    }
+
+    input {
+      transform: scale(1.5);
+    }
+  }
+}
+
+.topic-list-header {
+  tr {
+    border: none;
+  }
+
+  .topic-list-data {
+    padding: 0;
+
+    &:not(.default) {
+      display: none;
+    }
+
+    &.default {
+      position: absolute;
+      right: 0;
+      .bulk-select,
+      span:not(.bulk-select-topics, .d-button-label) {
+        display: none;
+      }
+    }
+  }
+
+  .bulk-select-topics {
+    position: absolute;
+    right: -1em;
+    @media screen and (max-width: 1048px) {
+      right: 0;
+    }
+
+    background: var(--secondary);
+    border-radius: 0 0 0 var(--d-border-radius);
+    padding: 1em;
+    button {
+      white-space: nowrap;
+    }
+  }
+}