UX: stop presence indicator hop, space consistency (#12797)

app/assets/javascripts/discourse/app/templates/topic.hbs

@@ -293,7 +293,7 @@
                 </div>
               {{/if}}
 
-              {{slow-mode-info topic=model user=currentUser}}
+              {{slow-mode-info topic=model user=currentUser tagName=""}}
 
               {{topic-timer-info
                   topicClosed=model.closed

app/assets/stylesheets/common/base/topic-post.scss

@@ -1137,7 +1137,8 @@ a.mention-group {
 }
 
 #topic-footer-buttons {
-  padding: 1.5em 0 0.75em 0;
+  margin: var(--below-topic-margin) 0;
+  padding: 0;
 
   .topic-footer-main-buttons {
     display: flex;

app/assets/stylesheets/common/base/topic.scss

@@ -16,10 +16,15 @@
   }
 }
 
+[class*="archetype-"] {
+  --below-topic-margin: 0.75em;
+}
+
 .container.posts {
   display: grid;
   grid-template-areas: "posts timeline";
   grid-template-columns: auto auto;
+  margin-bottom: var(--below-topic-margin);
   > .row {
     grid-area: posts;
     max-width: calc(

app/assets/stylesheets/desktop/topic-post.scss

@@ -455,8 +455,8 @@ pre.copy-codeblocks:hover .copy-cmd {
 }
 
 .suggested-topics {
-  clear: left;
-  padding: 20px 0 15px 0;
+  margin: 4.5em 0 1em;
+
   table {
     margin-top: 10px;
   }

app/assets/stylesheets/desktop/topic.scss

@@ -59,9 +59,10 @@
   }
 }
 
+.topic-status-info,
 .topic-timer-info {
   border-top: 1px solid var(--primary-low);
-  padding: 10px 0;
+  margin: 0;
   &:empty {
     padding: 0;
   }
@@ -70,14 +71,14 @@
   .slow-mode-heading {
     display: flex;
     align-items: center;
-    margin: 0px;
+    margin: 0;
+    padding: var(--below-topic-margin) 0;
   }
+  .slow-mode-remove,
   .topic-timer-modify {
     margin-left: auto;
   }
-  .topic-timer-remove,
-  .slow-mode-remove,
-  .topic-timer-edit {
+  button {
     font-size: $font-down-2;
     background: transparent;
   }

plugins/discourse-presence/assets/stylesheets/presence.scss

@@ -1,3 +1,8 @@
+.topic-above-footer-buttons-outlet.presence {
+  min-height: 1.8em; // height of the avatars, prevents layout shift
+  margin: var(--below-topic-margin) 0;
+}
+
 .presence-users {
   background-color: var(--secondary, $secondary);
   color: var(--primary-medium, $primary-medium);