Style fixes

src/components/Views/StaticPage.tsx

@@ -18,7 +18,7 @@ export const StaticPage = (props: Props) => {
     <PageLayout title={props.title} desc={props.desc} key={props.title.toLowerCase()}>
       <article class="wide-container container--static-page" id="articleBody" ref={(el) => (bodyEl = el)}>
         <div class="row">
-          <div class="col-md-12 col-xl-14 offset-md-5 order-md-first mt-5">
+          <div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
             <h1>{props.title}</h1>
             {props.children}
           </div>

src/components/_shared/PageLayout.tsx

@@ -82,7 +82,7 @@ export const PageLayout = (props: PageLayoutProps) => {
         })}
         classList={{ 'main-content--no-padding': !isHeaderFixed }}
       >
-        <div class={clsx([props.class, 'wide-container'])}>{props.children}</div>
+        {props.children}
       </main>
       <Show when={props.hideFooter !== true}>
         <FooterView />

src/components/_shared/TableOfContents/TableOfContents.tsx

@@ -85,7 +85,7 @@ export const TableOfContents = (props: Props) => {
           [styles.TableOfContentsFixedWrapperLefted]: props.variant === 'editor'
         })}
       >
-        <div class={styles.TableOfContentsContainer}>
+        <div class={styles.TableOfContentsContainer} data-custom-scroll="on">
           <Show when={isVisible()}>
             <div class={styles.TableOfContentsContainerInner}>
               <div class={styles.TableOfContentsHeader}>

src/styles/app.scss

@@ -848,7 +848,7 @@ figure {
 
 .main-content {
   @include media-breakpoint-up(lg) {
-    // padding-top: 130px;
+     padding-top: 130px;
   }
 
   flex: 1 100%;
@@ -1031,25 +1031,25 @@ details {
   Not supports in Firefox and IE */
 
   /* total width */
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     background-color: #fff;
     width: 16px;
   }
 
   /* background of the scrollbar except button or resizer */
-  ::-webkit-scrollbar-track {
+  &::-webkit-scrollbar-track {
     background-color: #fff;
   }
 
   /* scrollbar itself */
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     background-color: #babac0;
     border-radius: 16px;
     border: 4px solid #fff;
   }
 
   /* set button(top and bottom of the scrollbar) */
-  ::-webkit-scrollbar-button {
+  &::-webkit-scrollbar-button {
     display: none;
   }
 }