Fixed profile left column

src/components/Discours/ProfileSettingsNavigation.module.scss

@@ -1,8 +1,7 @@
 .navigationHeader {
   @include font-size(1.8rem);
-
   font-weight: bold;
-  margin-top: 1.1em !important;
+  margin-top: 1.1em;
 }
 
 .navigation {

src/components/Views/Author.module.scss

@@ -1,7 +1,7 @@
 .ratingContainer {
   @include font-size(1.5rem);
 
-  display: inline-block;
+  display: inline-flex;
   vertical-align: top;
 }
 

src/components/Views/Feed.tsx

@@ -84,7 +84,7 @@ export const FeedView = () => {
     <>
       <div class="wide-container feed">
         <div class="row">
-          <div class={clsx('left-col col-md-5 col-xl-4', styles.feedNavigation)}>
+          <div class={clsx('col-md-5 col-xl-4', styles.feedNavigation)}>
             <FeedSidebar authors={sortedAuthors()} />
           </div>
 

src/pages/profile/Settings.module.scss

@@ -114,6 +114,10 @@ h5 {
 
 .leftNavigation {
   top: 9rem !important;
+
+  h4:first-child {
+    margin-top: 0;
+  }
 }
 
 .passwordToggleControl {

src/pages/profile/profileSecurity.page.tsx

@@ -8,13 +8,14 @@ export const ProfileSecurityPage = () => {
   return (
     <PageLayout>
       <div class="wide-container">
-        <div class="offset-md-5">
-          <div class="left-col">
+        <div class="row">
+          <div class="col-md-5">
             <div class={clsx('left-navigation', styles.leftNavigation)}>
               <ProfileSettingsNavigation />
             </div>
           </div>
 
+          <div class="col-md-19">
             <div class="row">
               <div class="col-md-20 col-lg-18 col-xl-16">
                 <h1>Вход и&nbsp;безопасность</h1>
@@ -126,6 +127,7 @@ export const ProfileSecurityPage = () => {
             </div>
           </div>
         </div>
+      </div>
     </PageLayout>
   )
 }

src/pages/profile/profileSettings.page.tsx

@@ -84,12 +84,13 @@ export const ProfileSettingsPage = () => {
     <PageLayout>
       <Show when={form}>
         <div class="wide-container">
-          <div class="offset-md-5">
-            <div class="left-col">
+          <div class="row">
+            <div class="col-md-5">
               <div class={clsx('left-navigation', styles.leftNavigation)}>
                 <ProfileSettingsNavigation />
               </div>
             </div>
+            <div class="col-md-19">
               <div class="row">
                 <div class="col-md-20 col-lg-18 col-xl-16">
                   <h1>{t('Profile settings')}</h1>
@@ -227,6 +228,7 @@ export const ProfileSettingsPage = () => {
               </div>
             </div>
           </div>
+        </div>
       </Show>
     </PageLayout>
   )

src/pages/profile/profileSubscriptions.page.tsx

@@ -9,13 +9,14 @@ export const ProfileSubscriptionsPage = () => {
   return (
     <PageLayout>
       <div class="wide-container">
-        <div class="offset-md-5">
-          <div class="left-col">
+        <div class="row">
+          <div class="col-md-5">
             <div class={clsx('left-navigation', styles.leftNavigation)}>
               <ProfileSettingsNavigation />
             </div>
           </div>
 
+          <div class="col-md-19">
             <div class="row">
               <div class="col-md-20 col-lg-18 col-xl-16">
                 <h1>Подписки</h1>
@@ -128,6 +129,7 @@ export const ProfileSubscriptionsPage = () => {
             </div>
           </div>
         </div>
+      </div>
     </PageLayout>
   )
 }

src/styles/app.scss

@@ -691,22 +691,6 @@ figcaption {
     margin-left: 235px;
   }
 
-  .left-col {
-    height: 100%;
-    padding-right: 2rem;
-    right: 100%;
-    top: 0;
-
-    @include media-breakpoint-up(md) {
-      position: absolute;
-      width: 161px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      width: 235px;
-    }
-  }
-
   .left-navigation {
     position: sticky;
     top: 0;