From 7982d60967c1508544535a5865df83fd94a009b7 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 19 May 2025 11:26:11 -0400
Subject: [PATCH] UX: add compatibility with the top contributors sidebar
 (#162)

Improves compatibility with
https://meta.discourse.org/t/top-contributors-sidebar/215110

Before:

![image](https://github.com/user-attachments/assets/08994458-0322-4725-a66b-0c91712e3a2a)


After:

![image](https://github.com/user-attachments/assets/de231b57-d6da-42c0-852e-2bf915ee929e)

---------

Co-authored-by: Jarek Radosz <jarek@cvx.dev>
---
 scss/misc.scss | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/scss/misc.scss b/scss/misc.scss
index bfb0a4c..5e05f69 100644
--- a/scss/misc.scss
+++ b/scss/misc.scss
@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .user-main .about.collapsed-info .details {
   background: var(--d-content-background);
 }
@@ -105,3 +107,35 @@ input[type="color"]:focus,
 .period-chooser-header {
   border-radius: 0;
 }
+
+// compatibility with the top contributors sidebar theme component
+// https://meta.discourse.org/t/top-contributors-sidebar/215110
+.list-container
+  #list-area
+  > .contents
+  > .topic-list:has(.discourse-top-contributors) {
+  grid-template-areas: "head head" "body sidebar";
+  grid-template-rows: auto 1fr;
+
+  @include viewport.until(lg) {
+    grid-template-areas: "head head" "body body";
+  }
+
+  tbody {
+    display: flex;
+  }
+
+  .discourse-top-contributors {
+    width: auto;
+    box-sizing: border-box;
+
+    @include viewport.until(lg) {
+      display: none;
+    }
+
+    .top-contributors-heading {
+      font-size: var(--font-up-2);
+      padding-bottom: 0.5em;
+    }
+  }
+}