UX: fix alignment on topic progress bar and remove some magic numbers

UX: fix alignment on topic progress bar and remove some magic numbers

diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index dd9fcb5..88c3c8e 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -23,28 +23,29 @@
   animation-name: button-jump-up;
   width: 145px;
   text-align: center;
-  position: relative;
   margin-bottom: 0px;
+  position: absolute;
+  right: 0;
+  top: -2em;
   .btn {
     margin: 0;
   }
 }
 
 #topic-progress-wrapper {
+  display: flex;
   .topic-admin-menu-button-container {
-    position: absolute;
-    bottom: 0px;
-    left: -38px;
-    width: 0px;
-    .widget-button {
-      height: 35px;
-      border-right: 1px solid dark-light-diff($primary, $secondary, 80%, -70%);
+    display: flex;
+    > span {
+      display: flex;
     }
   }
   .topic-admin-popup-menu.right-side {
-    position: relative;
-    right: 50px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
     left: auto;
+    transition: bottom 0.5s;
     transform: translateZ(
       0
     ); // iOS11 Rendering bug https://meta.discourse.org/t/wrench-menu-not-disappearing-on-ios/94297
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index ad07cfb..c1367e3 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -50,17 +50,12 @@
 
 #topic-progress-wrapper {
   position: fixed;
-  width: 0;
   right: 0;
   bottom: 0;
   z-index: z("timeline");
-  margin-right: 148px;
   &:not(.docked) {
     margin-bottom: env(safe-area-inset-bottom);
   }
-  .topic-admin-menu-button-container .toggle-admin-menu {
-    height: 43px;
-  }
 }
 
 #topic-progress-expanded {

GitHub sha: f7923958

1 Like