UX: fix some chat spacing issues (discourse#25)

diegowake · Dec 21, 2023 · fe3b319 · fe3b319
1 parent 60c3313
commit fe3b319
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/common/common.scss b/common/common.scss
@@ -44,7 +44,7 @@
 
 #main-outlet {
   box-sizing: border-box;
-  margin: 30px auto;
+  margin: 0 auto;
   background: var(--secondary);
   border-radius: 8px;
   width: 100%;
@@ -415,6 +415,10 @@ body.has-full-page-chat {
   }
 }
 
+.full-page-chat .c-navbar-container {
+  top: unset;
+}
+
 .chat-channel {
-  height: calc(100vh - (var(--header-offset) + 60px));
+  height: calc(100vh - (var(--header-offset) + 8em));
 }
diff --git a/desktop/desktop.scss b/desktop/desktop.scss
@@ -268,11 +268,11 @@ nav.post-controls {
 }
 
 #main-outlet-wrapper {
+  margin-top: 2em;
   .sidebar-wrapper {
-    margin: 30px 0;
     background-color: var(--secondary);
     border-radius: 8px;
-    top: calc(var(--header-offset) + 30px);
+    top: calc(var(--header-offset) + 2em);
     height: calc(100vh - (var(--header-offset) + 60px));
     @include box-shadow;
   }

diff --git a/mobile/mobile.scss b/mobile/mobile.scss
@@ -9,6 +9,7 @@ body {
 }
 
 #main-outlet {
+  margin: 1em auto;
   padding: 10px;
   width: 96%;
 }
@@ -203,5 +204,9 @@ div.cooked img:not(.thumbnail) {
 }
 
 .chat-channel {
-  height: calc(100dvh - (var(--header-offset) + 60px));
+  height: calc(100vh - (var(--header-offset) + 11em));
+}
+
+.chat-scroll-to-bottom__arrow {
+  width: 33px; // minor centering adjustment on iOS
 }