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

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