styling

scss/main.scss

@@ -8,26 +8,39 @@ body:not(.archetype-regular, .has-full-page-chat)
   #main-outlet {
   overflow: scroll;
   border-radius: var(--d-border-radius-large);
+  @media screen and (max-width: 600px) {
+    border-radius: 0;
+  }
 }
 
 #main-outlet-wrapper {
   margin-top: 1.5rem;
-  gap: 2em !important;
+  gap: 2em;
   height: calc(100vh - var(--header-offset) - 4rem);
   box-sizing: border-box;
-  > * {
-    height: inherit;
-    box-sizing: border-box;
+  @media screen and (max-width: 600px) {
+    gap: 0;
+    margin-top: 0;
+    height: 100%;
   }
   #main-outlet {
-    width: 100%;
+    width: calc(100% - 48px);
     height: inherit;
     overflow: scroll;
+    padding: 12px 24px;
+    @media screen and (max-width: 600px) {
+      border-radius: 0px;
+    }
+    @media screen and (max-width: 480px) {
+      padding: 12px 0;
+      width: 100%;
+    }
     &:has(.list-controls) {
       padding-top: 0;
     }
     &:has(#topic-title) {
       padding-top: 0;
+      max-width: 1000px;
     }
     > *:not(.full-page-chat) {
       max-width: 1000px;
@@ -35,7 +48,8 @@ body:not(.archetype-regular, .has-full-page-chat)
     }
     border-radius: var(--d-border-radius-large);
     border-radius: 1.25rem;
-    .navigation-topics & {
+    .navigation-topics &,
+    .navigation-category & {
       background: radial-gradient(
           100.59% 70.87% at 41.19% 73.28%,
           rgba(188, 241, 238, 0.2) 0%,
@@ -52,22 +66,3 @@ body:not(.archetype-regular, .has-full-page-chat)
     background-color: light-dark(#ffffff, #000000);
   }
 }
-
-#topic-title {
-  z-index: 999;
-  margin-bottom: 1em;
-  padding: 1.5rem 2rem 0.5em;
-  position: sticky;
-  top: 0;
-  background: var(--secondary);
-}
-
-.container.posts,
-.more-topics__container,
-#topic-footer-buttons {
-  padding: 0 24px;
-}
-
-.container.posts .topic-navigation {
-  top: calc(var(--header-offset, 60px) + 4em);
-}