diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss index 075468f6883..2d796d0a5ef 100644 --- a/app/assets/stylesheets/common/topic-timeline.scss +++ b/app/assets/stylesheets/common/topic-timeline.scss @@ -5,13 +5,8 @@ .timeline-container { box-sizing: border-box; z-index: z("timeline"); - transform: translateZ(0); &.timeline-docked-bottom { - margin-bottom: -4em; - @media screen and (prefers-reduced-motion: no-preference) { - transition: margin-bottom 0.5s ease-in; - } .timeline-footer-controls { opacity: 0; pointer-events: none; @@ -184,6 +179,7 @@ .topic-timeline { transition: opacity 0.2s ease-in; touch-action: none; + min-width: 6em; .timeline-controls { margin-bottom: 1em; @@ -195,17 +191,17 @@ } .timeline-footer-controls { - margin-top: 1.5em; + // this is absolutely positioned to avoid + // adding extra height below short topics + // above the topic-footer-controls + position: absolute; + margin-top: 1em; @media (prefers-reduced-motion: no-preference) { transition: opacity 0.2s ease-in; } display: flex; + gap: 0.5em; flex-wrap: wrap; - max-width: 9em; - - .reply-to-post { - margin-right: 0.5em; - } button:last-child { margin-right: 0;