From 910bc855c154938021c56b67d20ca53906284aa8 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Fri, 28 Mar 2025 05:41:20 +0800
Subject: [PATCH 1/5] Composer styling on desktop (#84)

---
 scss/composer.scss | 50 ++++++++++++++++++++++++++++++++++++++++++++++
 scss/misc.scss     |  4 ----
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/scss/composer.scss b/scss/composer.scss
index d00c8bb..7e35612 100644
--- a/scss/composer.scss
+++ b/scss/composer.scss
@@ -9,6 +9,56 @@
     }
   }
 }
+
+#reply-control.hide-preview {
+  @include breakpoint("mobile-extra-large", $rule: min-width) {
+    background: var(--d-content-background);
+
+    border-top-right-radius: var(--d-border-radius);
+    border-top-left-radius: var(--d-border-radius);
+    overflow: hidden;
+
+    .grippie {
+      background: var(--tertiary-low);
+    }
+
+    .title-and-category {
+      padding: 0 var(--spacing-inline-m);
+      width: calc(100% - var(--spacing-inline-m) * 2);
+    }
+
+    .d-editor-button-bar {
+      padding: 3px var(--spacing-inline-m);
+      border: none;
+    }
+
+    .d-editor-input {
+      padding: var(--spacing-inline-m);
+    }
+
+    &:has(.in-focus) .grippie {
+      background: var(--tertiary);
+    }
+
+    .reply-area {
+      padding-inline: 0;
+    }
+    .reply-to,
+    .submit-panel {
+      padding-inline: var(--spacing-inline-sm);
+    }
+
+    .d-editor-textarea-wrapper {
+      border: 0;
+      border-bottom: 1px solid var(--primary-low);
+      border-radius: 0;
+
+      &.in-focus {
+        outline: 0;
+      }
+    }
+  }
+}
 .d-editor-button-bar {
   .btn:hover,
   .toolbar-popup-menu-options.is-expanded {
diff --git a/scss/misc.scss b/scss/misc.scss
index f6dfb8d..01aabac 100644
--- a/scss/misc.scss
+++ b/scss/misc.scss
@@ -40,10 +40,6 @@
   border-radius: 0;
 }
 
-.d-editor-button-bar {
-  padding: 3px;
-}
-
 .open .grippie {
   background-color: var(--accent-color);
 }

From 0a416d317e6f76687559b7b4e5688a083287d8e1 Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Fri, 28 Mar 2025 12:39:49 +1000
Subject: [PATCH 2/5] FIX: Messed up CSS grid on messages list (#88)

This needs a better follow-up, but the messages topic list
is currently busted. Removing the overridden topic-list-item
grid for messages helps.
---
 scss/topic-cards.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index 0ad754b..d0f0e1f 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -436,9 +436,6 @@ body.user-messages-page .topic-list-item {
   td.topic-status-data {
     display: none;
   }
-  grid-template-areas:
-    "activity activity activity activity activity activity activity"
-    ". . . . likes-replies likes-replies likes-replies";
   &.excerpt-expanded {
     grid-template-columns: 20px repeat(6, 1fr) auto;
     grid-template-rows: 20px auto auto 30px;

From f70524a44b279ff7c8c221bf0efe35744f138df7 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Fri, 28 Mar 2025 21:17:45 +0800
Subject: [PATCH 3/5] UX: fix minimised draft bg colour for composer (#89)

Followup fix for #84
---
 scss/composer.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/composer.scss b/scss/composer.scss
index 7e35612..feae67c 100644
--- a/scss/composer.scss
+++ b/scss/composer.scss
@@ -10,7 +10,7 @@
   }
 }
 
-#reply-control.hide-preview {
+#reply-control.hide-preview:not(.draft) {
   @include breakpoint("mobile-extra-large", $rule: min-width) {
     background: var(--d-content-background);
 

From 9945f1d899070dac851b251b2bef48465c14075e Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Fri, 28 Mar 2025 21:27:36 +0800
Subject: [PATCH 4/5] FIX: remove overflow prop (#91)

---
 scss/composer.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scss/composer.scss b/scss/composer.scss
index feae67c..57cd32f 100644
--- a/scss/composer.scss
+++ b/scss/composer.scss
@@ -16,7 +16,6 @@
 
     border-top-right-radius: var(--d-border-radius);
     border-top-left-radius: var(--d-border-radius);
-    overflow: hidden;
 
     .grippie {
       background: var(--tertiary-low);

From 2046f525d49b5233cdd5c15593c76d35feac0f7b Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Fri, 28 Mar 2025 10:49:28 -0500
Subject: [PATCH 5/5] UX: More logic for title columns (#87)

---
 .../initializers/topic-list-columns.gjs       | 11 +--
 scss/topic-cards.scss                         | 68 +++++++++++--------
 2 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/javascripts/discourse/initializers/topic-list-columns.gjs b/javascripts/discourse/initializers/topic-list-columns.gjs
index c4d7088..fb82c8d 100644
--- a/javascripts/discourse/initializers/topic-list-columns.gjs
+++ b/javascripts/discourse/initializers/topic-list-columns.gjs
@@ -65,11 +65,12 @@ export default {
       api.registerValueTransformer(
         "topic-list-item-class",
         ({ value: classes, context }) => {
-          if (context.topic.pinned || context.topic.pinned_globally) {
-            classes.push("--pinned");
-          }
-          if (context.topic.is_hot) {
-            classes.push("--hot");
+          if (
+            context.topic.is_hot ||
+            context.topic.pinned ||
+            context.topic.pinned_globally
+          ) {
+            classes.push("--has-status-card");
           }
           return classes;
         }
diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index d0f0e1f..3209c82 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -37,19 +37,31 @@
   grid-column-gap: 12px;
   grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
+  td.main-link .link-top-line {
+    grid-row: 1/2;
+    grid-column: 1/-1;
+    font-weight: 500;
+  }
+  &.--has-status-card td.main-link .link-top-line {
+    grid-column: 1/-2;
+  }
   @include breakpoint(extra-large) {
-    grid-template-columns: 20px repeat(6, 1fr);
     grid-template-areas:
       ". . . . . . status"
       "activity activity activity activity activity likes-replies category";
   }
   @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-row: 2/3;
+      grid-column: 1/-1;
+    }
     grid-template-columns: 25px repeat(7, 1fr);
     grid-template-rows: auto auto auto;
     grid-template-areas:
-      ". . . . . . . status"
-      "activity activity activity activity activity activity activity activity"
-      "category category category category category category category likes-replies";
+      "category category category category category category category status"
+      ". . . . . . . ."
+      "activity activity activity activity activity activity activity likes-replies";
     border: none;
     border-bottom: 1px solid var(--primary-200);
     box-shadow: none;
@@ -57,26 +69,24 @@
   }
   &.excerpt-expanded {
     grid-template-columns: 20px auto repeat(5, 1fr) auto;
-    grid-template-rows: auto auto auto 30px;
+    grid-template-rows: auto auto auto;
     grid-template-areas:
       ". . . . . . . status"
       "activity activity activity activity activity activity activity activity"
-      "excerpt excerpt excerpt excerpt excerpt excerpt . ."
       "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies category";
     @include breakpoint(extra-large) {
       grid-template-areas:
         ". . . . . . . status"
         "activity activity activity activity activity activity activity activity"
-        "excerpt excerpt excerpt excerpt excerpt excerpt excerpt likes-replies"
-        "excerpt excerpt excerpt excerpt excerpt excerpt excerpt category";
+        "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies category";
     }
     @include breakpoint(mobile-extra-large) {
       grid-template-columns: 25px auto repeat(6, 1fr);
       grid-template-rows: auto auto auto;
       grid-template-areas:
-        ". . . . . . . status"
-        "activity activity activity activity activity activity activity activity"
-        "category . . . . . . likes-replies";
+        "category category category category category category category status"
+        ". . . . . . . ."
+        "activity activity activity activity activity activity activity likes-replies";
       .topic-excerpt {
         display: none;
       }
@@ -104,6 +114,8 @@
     display: flex;
     gap: 0.25em;
     font-size: var(--font-down-1);
+    height: 100%;
+    align-items: center;
   }
 
   .topic-activity__user {
@@ -166,15 +178,6 @@
     --status-color: #e45735;
   }
 
-  // title
-  td.main-link .link-top-line {
-    font-size: var(--font-0);
-    grid-row: 1/2;
-    grid-column: 1/-2;
-    font-weight: 500;
-    display: flex;
-  }
-
   .link-top-line .event-date {
     margin-left: 0.5em;
     font-size: var(--font-down-3);
@@ -206,7 +209,8 @@
 
   // excerpt
   .topic-excerpt {
-    grid-area: excerpt;
+    grid-row: 3 / -1;
+    grid-column: 1 / -2;
     margin: 0;
     font-size: var(--font-down-2);
   }
@@ -248,6 +252,7 @@
 
     @include breakpoint(tablet) {
       padding: 2px 6px;
+      font-size: var(--font-down-2);
     }
 
     .badge-category__name {
@@ -436,28 +441,35 @@ body.user-messages-page .topic-list-item {
   td.topic-status-data {
     display: none;
   }
+  td.main-link .link-top-line {
+    grid-row: 1 / 2;
+    grid-column: 1 / -1;
+  }
+  grid-template-areas:
+    ". . . . . . ."
+    "activity activity activity activity activity likes-replies likes-replies";
   &.excerpt-expanded {
     grid-template-columns: 20px repeat(6, 1fr) auto;
     grid-template-rows: 20px auto auto 30px;
     grid-template-areas:
-      "activity activity activity activity activity activity activity activity"
       ". . . . . . . ."
+      "activity activity activity activity activity activity activity activity"
       "excerpt excerpt excerpt excerpt excerpt excerpt . ."
       "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
     @include breakpoint(extra-large) {
       grid-template-areas:
-        "avatar author status status . . . activity"
-        "avatar . . . . . . ."
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies";
+        ". . . . . . . ."
+        "activity activity activity activity activity activity activity activity"
+        "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies"
+        "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies";
     }
   }
   @include breakpoint(mobile-extra-large) {
     grid-template-columns: 25px auto repeat(6, 1fr);
     grid-template-rows: auto auto;
     grid-template-areas:
-      "activity activity activity activity activity activity activity activity"
-      ". . . . . . . .";
+      ". . . . . . . ."
+      "activity activity activity activity activity activity activity activity";
     .topic-excerpt {
       display: none;
     }