Misc mobile fixes (#83)

scss/main.scss

@@ -4,10 +4,17 @@
 
 html:not(:has(.has-full-page-chat)) {
   background-color: var(--background-color);
+
+  @include breakpoint("mobile-extra-large") {
+    background-color: var(--d-content-background);
+  }
 }
 
 body {
   -webkit-font-smoothing: antialiased;
+  @include breakpoint("mobile-extra-large") {
+    background-color: var(--d-content-background);
+  }
 }
 #main-outlet-wrapper {
   gap: var(--main-grid-gap);

scss/mobile-stuff.scss

@@ -2,7 +2,7 @@
 @include breakpoint(medium) {
   html,
   .d-header {
-    background-color: var(--secondary);
+    background-color: var(--d-content-background);
   }
 }
 #main-outlet-wrapper {
@@ -89,7 +89,7 @@
 
   #topic-title {
     @include breakpoint(mobile-extra-large) {
-      padding-inline: var(--spacing-inline-m) !important;
+      padding-inline: var(--spacing-inline-s) !important;
 
       .title-wrapper {
         gap: var(--spacing-block-s);
@@ -119,6 +119,12 @@
           oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
         );
       }
+      .discourse-tags {
+        gap: var(--spacing-inline-xs);
+        &__tag-separator {
+          display: none;
+        }
+      }
       .discourse-tag {
         font-size: var(--font-down-2-rem);
         padding: var(--spacing-inline-xs) var(--spacing-inline-s);

scss/topic.scss

@@ -18,36 +18,52 @@
   min-width: unset; // why we have this?
   .timeline-scrollarea {
     border-left: 1px solid var(--accent-color);
-  }
-  .timeline-scroller {
-    padding: 0.25em;
-    border: 1px solid var(--accent-color);
-    border-radius: 0.75em;
-    padding-left: 0.5em;
-    margin-left: calc(-0.5em - 2.5px);
-    background: var(--d-content-background);
-    height: 40px !important; // height is coming from element style have no other choice
-  }
-  .timelime-scroller-content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25em;
-  }
-  .timeline-replies,
-  .timeline-ago {
-    line-height: 1;
-  }
-  .timeline-ago {
-    // font-size: var(--font-down-1);
-  }
-  .timeline-handle {
-    background-color: var(--accent-color);
-    width: 3px;
-    border-radius: 2px;
-    height: calc(100% - 6px);
+
+    .timeline-scroller {
+      @include breakpoint("medium", $rule: min-width) {
+        padding: 0.25em;
+        border: 1px solid var(--accent-color);
+        border-radius: 0.75em;
+        padding-left: 0.5em;
+        margin-left: calc(-0.5em - 2.5px);
+        background: var(--d-content-background);
+        height: 40px !important; // height is coming from element style have no other choice
+      }
+
+      .timeline-scroller-content {
+        // display: flex;
+        // flex-direction: column;
+        // gap: 0.25em;
+      }
+      .timeline-replies,
+      .timeline-ago {
+        line-height: 1;
+      }
+    }
+    .timeline-handle {
+      background-color: var(--accent-color);
+      @include breakpoint("medium", $rule: min-width) {
+        width: 3px;
+        border-radius: 2px;
+        height: calc(100% - 6px);
+      }
+    }
   }
 }
 
+//should probably get rid of this extra specificity class in core?
+.timeline-container.timeline-fullscreen {
+  @include breakpoint("medium", $rule: max-width) {
+    .topic-timeline .timeline-scrollarea-wrapper {
+    }
+    .topic-timeline
+      .timeline-scrollarea
+      .timeline-scroller
+      .timeline-scroller-content {
+      padding-right: 0.5em;
+    }
+  }
+}
 .container.posts,
 #topic-footer-buttons {
   padding: 0 24px;