fix: AbortController not found, resize text in Box

src/components/HeaderBarebone/index.tsx

@@ -44,14 +44,14 @@ const StickyBoxedTitle: React.FC<IBoxedTitleProps> = (props) => {
     <SC.StickyBox>
       {props.above}
 
-      <SC.Title
+      <SC.StickyTitle
         className={cx({
           "has-content-above": props.above,
           "has-content-below": props.content,
         })}
       >
         {props.children}
-      </SC.Title>
+      </SC.StickyTitle>
 
       {props.content}
     </SC.StickyBox>
@@ -83,7 +83,6 @@ export class HeaderBarebone extends Component<IHeaderBareboneProps, HeaderBarebo
   constructor(props) {
     super(props)
     this.tick = this.tick.bind(this)
-    this.controller = new AbortController()
   }
 
   tick() {
@@ -95,6 +94,7 @@ export class HeaderBarebone extends Component<IHeaderBareboneProps, HeaderBarebo
   }
 
   componentDidMount() {
+    this.controller = new AbortController()
     document.addEventListener('scroll', debounce(this.tick), { passive: true, signal: this.controller.signal })
     this.tick()
   }

src/components/HeaderBarebone/styles.tsx

@@ -133,11 +133,12 @@ export const StickyBox = styled.div`
   display: inline-flex;
   flex-direction: column;
   position: absolute;
-  bottom: 0;
+  top: 0;
   background: ${(props) => transparentize(0.3, props.theme.main.background)};
-  padding: 16px;
+  padding: 0px 0px 16px 30px;
   backdrop-filter: blur(14px);
   width: 100%;
+  font-size: 16px
 
   @media screen and (max-width: 1200px) {
     max-width: 100%;
@@ -183,6 +184,15 @@ export const Title = styled.h1`
   }
 `
 
+export const StickyTitle = styled.h1`
+  ${title};
+  font-size: 20px;
+
+  &.has-content-below {
+    margin-bottom: 16px;
+  px;
+`
+
 export const SingleTitle = styled(Title)`
   ${title};
   color: #fff;