Fixed TimelineQueueButtonHeader center position

• Added:
- New classes to position center fixed element

• Removed:
- Unused classes from TimelineQueueButtonHeader component

app/javascript/gabsocial/components/timeline_queue_button_header.js

@@ -27,35 +27,34 @@ export default class TimelineQueueButtonHeader extends PureComponent {
 
     const classes = cx({
       default: 1,
-      posFixed: 1,
       displayNone: !hasItems,
-      top80PX: 1,
+      mtNeg26PX: 1,
-      z4: 1,
-      center160PX: 1,
     })
 
     return (
-      <div className={classes}>
+      <div className={[_s.default, _s.pb5, _s.posSticky, _s.top120PX, _s.alignItemsCenter, _s.z4].join(' ')}>
-        <Button
+        <div className={classes}>
-          isNarrow
+          <Button
-          color='white'
+            isNarrow
-          backgroundColor='brand'
+            color='white'
-          onClick={onClick}
+            backgroundColor='brand'
-        >
+            onClick={onClick}
-          {
+          >
-            hasItems &&
+            {
-            <Text color='inherit' size='small'>
+              hasItems &&
-              <FormattedMessage
+              <Text color='inherit' size='small'>
-                id='timeline_queue.label'
+                <FormattedMessage
-                defaultMessage='{count} new {type}'
+                  id='timeline_queue.label'
-                values={{
+                  defaultMessage='{count} new {type}'
-                  count: shortNumberFormat(count),
+                  values={{
-                  type: count === 1 ? itemType : `${itemType}s`,
+                    count: shortNumberFormat(count),
-                }}
+                    type: count === 1 ? itemType : `${itemType}s`,
-              />
+                  }}
-            </Text>
+                />
-          }
+              </Text>
-        </Button>
+            }
+          </Button>
+        </div>
       </div>
     )
   }

app/javascript/styles/global.css

@@ -420,7 +420,7 @@ body {
 
 .topNeg80PX { top: -80px; }
 .top0 { top: 0; }
-.top80PX { top: 80px; }
+.top120PX { top: 120px; }
 .top60PC { top: 60%; }
 .top50PC { top: 50%; }
 
@@ -449,10 +449,6 @@ body {
 
 .resizeVertical { resize: vertical; }
 
-.center160PX {
-  left: calc(100vw / 2 - 80px);
-}
-
 .heightMax100VH { max-height: 100vh; }
 .heightMax100PC { max-height: 100%; }
 .heightMax80VH { max-height: 80vh; }
@@ -508,7 +504,6 @@ body {
 .width330PX { width: 330px; }
 .width250PX { width: 240px; }
 .width240PX { width: 240px; }
-.width160PX { width: 160px; }
 .width84PX { width: 84px; }
 .width72PX { width: 72px; }
 .width60PX { width: 60px; }
@@ -722,6 +717,7 @@ body {
 .mt5 { margin-top: 5px; }
 .mt2 { margin-top: 2px; }
 .mtAuto { margin-top: auto; }
+.mtNeg26PX { margin-top: -26px; }
 .mtNeg32PX { margin-top: -32px; }
 .mtNeg50PX { margin-top: -50px; }
 .mtNeg75PX { margin-top: -75px; }