From f73456cea53a5567ed43fb6bd809b36c4623fc1f Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 24 Mar 2023 01:05:23 +0300
Subject: [PATCH] Fixed profile left column

---
 .../ProfileSettingsNavigation.module.scss     |   3 +-
 src/components/Views/Author.module.scss       |   2 +-
 src/components/Views/Feed.tsx                 |   2 +-
 src/pages/profile/Settings.module.scss        |   4 +
 src/pages/profile/profileSecurity.page.tsx    | 204 +++++++-------
 src/pages/profile/profileSettings.page.tsx    | 264 +++++++++---------
 .../profile/profileSubscriptions.page.tsx     | 196 ++++++-------
 src/styles/app.scss                           |  16 --
 8 files changed, 342 insertions(+), 349 deletions(-)

diff --git a/src/components/Discours/ProfileSettingsNavigation.module.scss b/src/components/Discours/ProfileSettingsNavigation.module.scss
index 24cb0762..2bafc554 100644
--- a/src/components/Discours/ProfileSettingsNavigation.module.scss
+++ b/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 {
diff --git a/src/components/Views/Author.module.scss b/src/components/Views/Author.module.scss
index f1b8caeb..9b1bdb81 100644
--- a/src/components/Views/Author.module.scss
+++ b/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;
 }
 
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx
index 016405c6..2cd936ff 100644
--- a/src/components/Views/Feed.tsx
+++ b/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>
 
diff --git a/src/pages/profile/Settings.module.scss b/src/pages/profile/Settings.module.scss
index 056ae465..eed12635 100644
--- a/src/pages/profile/Settings.module.scss
+++ b/src/pages/profile/Settings.module.scss
@@ -114,6 +114,10 @@ h5 {
 
 .leftNavigation {
   top: 9rem !important;
+
+  h4:first-child {
+    margin-top: 0;
+  }
 }
 
 .passwordToggleControl {
diff --git a/src/pages/profile/profileSecurity.page.tsx b/src/pages/profile/profileSecurity.page.tsx
index e53076d2..a32e13ce 100644
--- a/src/pages/profile/profileSecurity.page.tsx
+++ b/src/pages/profile/profileSecurity.page.tsx
@@ -8,120 +8,122 @@ 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="row">
-            <div class="col-md-20 col-lg-18 col-xl-16">
-              <h1>Вход и&nbsp;безопасность</h1>
-              <p class="description">Настройки аккаунта, почты, пароля и&nbsp;способов входа.</p>
+          <div class="col-md-19">
+            <div class="row">
+              <div class="col-md-20 col-lg-18 col-xl-16">
+                <h1>Вход и&nbsp;безопасность</h1>
+                <p class="description">Настройки аккаунта, почты, пароля и&nbsp;способов входа.</p>
 
-              <form>
-                <h4>Почта</h4>
-                <div class="pretty-form__item">
-                  <input type="text" name="email" id="email" placeholder="Почта" />
-                  <label for="email">Почта</label>
-                </div>
+                <form>
+                  <h4>Почта</h4>
+                  <div class="pretty-form__item">
+                    <input type="text" name="email" id="email" placeholder="Почта" />
+                    <label for="email">Почта</label>
+                  </div>
 
-                <h4>Изменить пароль</h4>
-                <h5>Текущий пароль</h5>
-                <div class="pretty-form__item">
-                  <input
-                    type="text"
-                    name="password-current"
-                    id="password-current"
-                    class={clsx(styles.passwordInput, 'nolabel')}
-                  />
-                  <button type="button" class={styles.passwordToggleControl}>
-                    <Icon name="password-hide" />
-                  </button>
-                </div>
+                  <h4>Изменить пароль</h4>
+                  <h5>Текущий пароль</h5>
+                  <div class="pretty-form__item">
+                    <input
+                      type="text"
+                      name="password-current"
+                      id="password-current"
+                      class={clsx(styles.passwordInput, 'nolabel')}
+                    />
+                    <button type="button" class={styles.passwordToggleControl}>
+                      <Icon name="password-hide" />
+                    </button>
+                  </div>
 
-                <h5>Новый пароль</h5>
-                <div class="pretty-form__item">
-                  <input
-                    type="password"
-                    name="password-new"
-                    id="password-new"
-                    class={clsx(styles.passwordInput, 'nolabel')}
-                  />
-                  <button type="button" class={styles.passwordToggleControl}>
-                    <Icon name="password-open" />
-                  </button>
-                </div>
+                  <h5>Новый пароль</h5>
+                  <div class="pretty-form__item">
+                    <input
+                      type="password"
+                      name="password-new"
+                      id="password-new"
+                      class={clsx(styles.passwordInput, 'nolabel')}
+                    />
+                    <button type="button" class={styles.passwordToggleControl}>
+                      <Icon name="password-open" />
+                    </button>
+                  </div>
 
-                <h5>Подтвердите новый пароль</h5>
-                <div class="pretty-form__item">
-                  <input
-                    type="password"
-                    name="password-new-confirm"
-                    id="password-new-confirm"
-                    class={clsx(styles.passwordInput, 'nolabel')}
-                  />
-                  <button type="button" class={styles.passwordToggleControl}>
-                    <Icon name="password-open" />
-                  </button>
-                </div>
+                  <h5>Подтвердите новый пароль</h5>
+                  <div class="pretty-form__item">
+                    <input
+                      type="password"
+                      name="password-new-confirm"
+                      id="password-new-confirm"
+                      class={clsx(styles.passwordInput, 'nolabel')}
+                    />
+                    <button type="button" class={styles.passwordToggleControl}>
+                      <Icon name="password-open" />
+                    </button>
+                  </div>
 
-                <h4>Социальные сети</h4>
-                <h5>Google</h5>
-                <div class="pretty-form__item">
+                  <h4>Социальные сети</h4>
+                  <h5>Google</h5>
+                  <div class="pretty-form__item">
+                    <p>
+                      <button class={clsx('button', 'button--light', styles.socialButton)} type="button">
+                        <Icon name="google" class={styles.icon} />
+                        Привязать
+                      </button>
+                    </p>
+                  </div>
+
+                  <h5>VK</h5>
+                  <div class="pretty-form__item">
+                    <p>
+                      <button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
+                        <Icon name="vk" class={styles.icon} />
+                        Привязать
+                      </button>
+                    </p>
+                  </div>
+
+                  <h5>Facebook</h5>
+                  <div class="pretty-form__item">
+                    <p>
+                      <button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
+                        <Icon name="facebook" class={styles.icon} />
+                        Привязать
+                      </button>
+                    </p>
+                  </div>
+
+                  <h5>Apple</h5>
+                  <div class="pretty-form__item">
+                    <p>
+                      <button
+                        class={clsx(
+                          styles.socialButton,
+                          styles.socialButtonApple,
+                          'button' + ' button--light'
+                        )}
+                        type="button"
+                      >
+                        <Icon name="apple" class={styles.icon} />
+                        Привязать
+                      </button>
+                    </p>
+                  </div>
+
+                  <br />
                   <p>
-                    <button class={clsx('button', 'button--light', styles.socialButton)} type="button">
-                      <Icon name="google" class={styles.icon} />
-                      Привязать
+                    <button class="button button--submit" type="submit">
+                      Сохранить настройки
                     </button>
                   </p>
-                </div>
-
-                <h5>VK</h5>
-                <div class="pretty-form__item">
-                  <p>
-                    <button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
-                      <Icon name="vk" class={styles.icon} />
-                      Привязать
-                    </button>
-                  </p>
-                </div>
-
-                <h5>Facebook</h5>
-                <div class="pretty-form__item">
-                  <p>
-                    <button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
-                      <Icon name="facebook" class={styles.icon} />
-                      Привязать
-                    </button>
-                  </p>
-                </div>
-
-                <h5>Apple</h5>
-                <div class="pretty-form__item">
-                  <p>
-                    <button
-                      class={clsx(
-                        styles.socialButton,
-                        styles.socialButtonApple,
-                        'button' + ' button--light'
-                      )}
-                      type="button"
-                    >
-                      <Icon name="apple" class={styles.icon} />
-                      Привязать
-                    </button>
-                  </p>
-                </div>
-
-                <br />
-                <p>
-                  <button class="button button--submit" type="submit">
-                    Сохранить настройки
-                  </button>
-                </p>
-              </form>
+                </form>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/pages/profile/profileSettings.page.tsx b/src/pages/profile/profileSettings.page.tsx
index b9f11fcf..de006dcf 100644
--- a/src/pages/profile/profileSettings.page.tsx
+++ b/src/pages/profile/profileSettings.page.tsx
@@ -84,145 +84,147 @@ 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="row">
-              <div class="col-md-20 col-lg-18 col-xl-16">
-                <h1>{t('Profile settings')}</h1>
-                <p class="description">{t('Here you can customize your profile the way you want.')}</p>
-                <form onSubmit={handleSubmit} enctype="multipart/form-data">
-                  <h4>{t('Userpic')}</h4>
-                  <div class="pretty-form__item">
-                    <div class={styles.avatarContainer}>
-                      <Show when={!isUserpicUpdating()} fallback={<Loading />}>
-                        <img
-                          class={styles.avatar}
-                          src={form.userpic}
-                          alt={form.name}
-                          onClick={handleAvatarClick}
-                        />
-                      </Show>
-                    </div>
-                  </div>
-                  <h4>{t('Name')}</h4>
-                  <p class="description">
-                    {t(
-                      'Your name will appear on your profile page and as your signature in publications, comments and responses.'
-                    )}
-                  </p>
-                  <div class="pretty-form__item">
-                    <input
-                      type="text"
-                      name="username"
-                      id="username"
-                      placeholder={t('Name')}
-                      onChange={(event) => updateFormField('name', event.currentTarget.value)}
-                      value={form.name}
-                    />
-                    <label for="username">{t('Name')}</label>
-                  </div>
-
-                  <h4>{t('Address on Discourse')}</h4>
-                  <div class="pretty-form__item">
-                    <div class={styles.discoursName}>
-                      <label for="user-address">https://{hostname()}/author/</label>
-                      <div class={styles.discoursNameField}>
-                        <input
-                          type="text"
-                          name="user-address"
-                          id="user-address"
-                          onChange={(event) => updateFormField('slug', event.currentTarget.value)}
-                          value={form.slug}
-                          class="nolabel"
-                        />
-                        <Show when={slugError()}>
-                          <p class="form-message form-message--error">{t(`${slugError()}`)}</p>
+            <div class="col-md-19">
+              <div class="row">
+                <div class="col-md-20 col-lg-18 col-xl-16">
+                  <h1>{t('Profile settings')}</h1>
+                  <p class="description">{t('Here you can customize your profile the way you want.')}</p>
+                  <form onSubmit={handleSubmit} enctype="multipart/form-data">
+                    <h4>{t('Userpic')}</h4>
+                    <div class="pretty-form__item">
+                      <div class={styles.avatarContainer}>
+                        <Show when={!isUserpicUpdating()} fallback={<Loading />}>
+                          <img
+                            class={styles.avatar}
+                            src={form.userpic}
+                            alt={form.name}
+                            onClick={handleAvatarClick}
+                          />
                         </Show>
                       </div>
                     </div>
-                  </div>
-
-                  <h4>{t('Introduce')}</h4>
-                  <div class="pretty-form__item">
-                    <textarea name="presentation" id="presentation" placeholder={t('Introduce')}>
-                      {form.bio}
-                    </textarea>
-                    <label for="presentation">{t('Introduce')}</label>
-                  </div>
-
-                  <h4>{t('About myself')}</h4>
-                  <div class="pretty-form__item">
-                    <textarea
-                      name="about"
-                      id="about"
-                      placeholder={t('About myself')}
-                      value={form.about}
-                      onChange={(event) => updateFormField('about', event.currentTarget.value)}
-                    />
-                    <label for="about">{t('About myself')}</label>
-                  </div>
-
-                  {/*Нет реализации полей на бэке*/}
-                  {/*<h4>{t('How can I help/skills')}</h4>*/}
-                  {/*<div class="pretty-form__item">*/}
-                  {/*  <input type="text" name="skills" id="skills" />*/}
-                  {/*</div>*/}
-                  {/*<h4>{t('Where')}</h4>*/}
-                  {/*<div class="pretty-form__item">*/}
-                  {/*  <input type="text" name="location" id="location" placeholder="Откуда" />*/}
-                  {/*  <label for="location">{t('Where')}</label>*/}
-                  {/*</div>*/}
-
-                  {/*<h4>{t('Date of Birth')}</h4>*/}
-                  {/*<div class="pretty-form__item">*/}
-                  {/*  <input*/}
-                  {/*    type="date"*/}
-                  {/*    name="birthdate"*/}
-                  {/*    id="birthdate"*/}
-                  {/*    placeholder="Дата рождения"*/}
-                  {/*    class="nolabel"*/}
-                  {/*  />*/}
-                  {/*</div>*/}
-
-                  <div class={clsx(styles.multipleControls, 'pretty-form__item')}>
-                    <div class={styles.multipleControlsHeader}>
-                      <h4>{t('Social networks')}</h4>
-                      <button type="button" class="button" onClick={() => setAddLinkForm(!addLinkForm())}>
-                        +
-                      </button>
-                    </div>
-                    <Show when={addLinkForm()}>
-                      <div class={styles.multipleControlsItem}>
-                        <input
-                          autofocus={true}
-                          type="text"
-                          name="link"
-                          class="nolabel"
-                          onChange={(event) => handleChangeSocial(event.currentTarget.value)}
-                        />
-                      </div>
-                      <Show when={incorrectUrl()}>
-                        <p class="form-message form-message--error">{t('It does not look like url')}</p>
-                      </Show>
-                    </Show>
-                    <For each={form.links}>
-                      {(link) => (
-                        <div class={styles.multipleControlsItem}>
-                          <input type="text" value={link} readonly={true} name="link" class="nolabel" />
-                          <button type="button" onClick={() => updateFormField('links', link, true)}>
-                            <Icon name="remove" class={styles.icon} />
-                          </button>
-                        </div>
+                    <h4>{t('Name')}</h4>
+                    <p class="description">
+                      {t(
+                        'Your name will appear on your profile page and as your signature in publications, comments and responses.'
                       )}
-                    </For>
-                  </div>
-                  <br />
-                  <Button type="submit" size="L" value={t('Save settings')} loading={isSubmitting()} />
-                </form>
+                    </p>
+                    <div class="pretty-form__item">
+                      <input
+                        type="text"
+                        name="username"
+                        id="username"
+                        placeholder={t('Name')}
+                        onChange={(event) => updateFormField('name', event.currentTarget.value)}
+                        value={form.name}
+                      />
+                      <label for="username">{t('Name')}</label>
+                    </div>
+
+                    <h4>{t('Address on Discourse')}</h4>
+                    <div class="pretty-form__item">
+                      <div class={styles.discoursName}>
+                        <label for="user-address">https://{hostname()}/author/</label>
+                        <div class={styles.discoursNameField}>
+                          <input
+                            type="text"
+                            name="user-address"
+                            id="user-address"
+                            onChange={(event) => updateFormField('slug', event.currentTarget.value)}
+                            value={form.slug}
+                            class="nolabel"
+                          />
+                          <Show when={slugError()}>
+                            <p class="form-message form-message--error">{t(`${slugError()}`)}</p>
+                          </Show>
+                        </div>
+                      </div>
+                    </div>
+
+                    <h4>{t('Introduce')}</h4>
+                    <div class="pretty-form__item">
+                      <textarea name="presentation" id="presentation" placeholder={t('Introduce')}>
+                        {form.bio}
+                      </textarea>
+                      <label for="presentation">{t('Introduce')}</label>
+                    </div>
+
+                    <h4>{t('About myself')}</h4>
+                    <div class="pretty-form__item">
+                      <textarea
+                        name="about"
+                        id="about"
+                        placeholder={t('About myself')}
+                        value={form.about}
+                        onChange={(event) => updateFormField('about', event.currentTarget.value)}
+                      />
+                      <label for="about">{t('About myself')}</label>
+                    </div>
+
+                    {/*Нет реализации полей на бэке*/}
+                    {/*<h4>{t('How can I help/skills')}</h4>*/}
+                    {/*<div class="pretty-form__item">*/}
+                    {/*  <input type="text" name="skills" id="skills" />*/}
+                    {/*</div>*/}
+                    {/*<h4>{t('Where')}</h4>*/}
+                    {/*<div class="pretty-form__item">*/}
+                    {/*  <input type="text" name="location" id="location" placeholder="Откуда" />*/}
+                    {/*  <label for="location">{t('Where')}</label>*/}
+                    {/*</div>*/}
+
+                    {/*<h4>{t('Date of Birth')}</h4>*/}
+                    {/*<div class="pretty-form__item">*/}
+                    {/*  <input*/}
+                    {/*    type="date"*/}
+                    {/*    name="birthdate"*/}
+                    {/*    id="birthdate"*/}
+                    {/*    placeholder="Дата рождения"*/}
+                    {/*    class="nolabel"*/}
+                    {/*  />*/}
+                    {/*</div>*/}
+
+                    <div class={clsx(styles.multipleControls, 'pretty-form__item')}>
+                      <div class={styles.multipleControlsHeader}>
+                        <h4>{t('Social networks')}</h4>
+                        <button type="button" class="button" onClick={() => setAddLinkForm(!addLinkForm())}>
+                          +
+                        </button>
+                      </div>
+                      <Show when={addLinkForm()}>
+                        <div class={styles.multipleControlsItem}>
+                          <input
+                            autofocus={true}
+                            type="text"
+                            name="link"
+                            class="nolabel"
+                            onChange={(event) => handleChangeSocial(event.currentTarget.value)}
+                          />
+                        </div>
+                        <Show when={incorrectUrl()}>
+                          <p class="form-message form-message--error">{t('It does not look like url')}</p>
+                        </Show>
+                      </Show>
+                      <For each={form.links}>
+                        {(link) => (
+                          <div class={styles.multipleControlsItem}>
+                            <input type="text" value={link} readonly={true} name="link" class="nolabel" />
+                            <button type="button" onClick={() => updateFormField('links', link, true)}>
+                              <Icon name="remove" class={styles.icon} />
+                            </button>
+                          </div>
+                        )}
+                      </For>
+                    </div>
+                    <br />
+                    <Button type="submit" size="L" value={t('Save settings')} loading={isSubmitting()} />
+                  </form>
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/pages/profile/profileSubscriptions.page.tsx b/src/pages/profile/profileSubscriptions.page.tsx
index 96438265..2b21924c 100644
--- a/src/pages/profile/profileSubscriptions.page.tsx
+++ b/src/pages/profile/profileSubscriptions.page.tsx
@@ -9,121 +9,123 @@ 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="row">
-            <div class="col-md-20 col-lg-18 col-xl-16">
-              <h1>Подписки</h1>
-              <p class="description">Здесь можно управлять всеми своими подписками на&nbsp;сайте.</p>
+          <div class="col-md-19">
+            <div class="row">
+              <div class="col-md-20 col-lg-18 col-xl-16">
+                <h1>Подписки</h1>
+                <p class="description">Здесь можно управлять всеми своими подписками на&nbsp;сайте.</p>
 
-              <form>
-                <ul class="view-switcher">
-                  <li class="selected">
-                    <a href="src/components/Pages/profile#">Все</a>
-                  </li>
-                  <li>
-                    <a href="src/components/Pages/profile#">Авторы</a>
-                  </li>
-                  <li>
-                    <a href="src/components/Pages/profile#">Темы</a>
-                  </li>
-                  <li>
-                    <a href="src/components/Pages/profile#">Сообщества</a>
-                  </li>
-                  <li>
-                    <a href="src/components/Pages/profile#">Коллекции</a>
-                  </li>
-                </ul>
+                <form>
+                  <ul class="view-switcher">
+                    <li class="selected">
+                      <a href="src/components/Pages/profile#">Все</a>
+                    </li>
+                    <li>
+                      <a href="src/components/Pages/profile#">Авторы</a>
+                    </li>
+                    <li>
+                      <a href="src/components/Pages/profile#">Темы</a>
+                    </li>
+                    <li>
+                      <a href="src/components/Pages/profile#">Сообщества</a>
+                    </li>
+                    <li>
+                      <a href="src/components/Pages/profile#">Коллекции</a>
+                    </li>
+                  </ul>
 
-                <div class={clsx('pretty-form__item', styles.searchContainer)}>
-                  <SearchField onChange={() => console.log('nothing')} class={styles.searchField} />
-                </div>
+                  <div class={clsx('pretty-form__item', styles.searchContainer)}>
+                    <SearchField onChange={() => console.log('nothing')} class={styles.searchField} />
+                  </div>
 
-                <div class={clsx(stylesSettings.settingsList, styles.topicsList)}>
-                  <div class={stylesSettings.settingsListRow}>
-                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
-                      <input type="checkbox" name="checkbox1" id="checkbox1" />
-                      <label for="checkbox1" />
+                  <div class={clsx(stylesSettings.settingsList, styles.topicsList)}>
+                    <div class={stylesSettings.settingsListRow}>
+                      <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                        <input type="checkbox" name="checkbox1" id="checkbox1" />
+                        <label for="checkbox1" />
+                      </div>
+                      <label for="checkbox1" class={stylesSettings.settingsListCell}>
+                        Культура
+                      </label>
                     </div>
-                    <label for="checkbox1" class={stylesSettings.settingsListCell}>
-                      Культура
-                    </label>
-                  </div>
-                  <div class={stylesSettings.settingsListRow}>
-                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
-                      <input type="checkbox" name="checkbox2" id="checkbox2" />
-                      <label for="checkbox2" />
+                    <div class={stylesSettings.settingsListRow}>
+                      <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                        <input type="checkbox" name="checkbox2" id="checkbox2" />
+                        <label for="checkbox2" />
+                      </div>
+                      <label for="checkbox2" class={stylesSettings.settingsListCell}>
+                        Eto_ya sam
+                      </label>
                     </div>
-                    <label for="checkbox2" class={stylesSettings.settingsListCell}>
-                      Eto_ya sam
-                    </label>
-                  </div>
-                  <div class={stylesSettings.settingsListRow}>
-                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
-                      <input type="checkbox" name="checkbox3" id="checkbox3" />
-                      <label for="checkbox3" />
+                    <div class={stylesSettings.settingsListRow}>
+                      <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                        <input type="checkbox" name="checkbox3" id="checkbox3" />
+                        <label for="checkbox3" />
+                      </div>
+                      <label for="checkbox3" class={stylesSettings.settingsListCell}>
+                        Технопарк
+                      </label>
                     </div>
-                    <label for="checkbox3" class={stylesSettings.settingsListCell}>
-                      Технопарк
-                    </label>
-                  </div>
-                  <div class={stylesSettings.settingsListRow}>
-                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
-                      <input type="checkbox" name="checkbox4" id="checkbox4" />
-                      <label for="checkbox4" />
+                    <div class={stylesSettings.settingsListRow}>
+                      <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                        <input type="checkbox" name="checkbox4" id="checkbox4" />
+                        <label for="checkbox4" />
+                      </div>
+                      <label for="checkbox4" class={stylesSettings.settingsListCell}>
+                        Лучшее
+                      </label>
                     </div>
-                    <label for="checkbox4" class={stylesSettings.settingsListCell}>
-                      Лучшее
-                    </label>
-                  </div>
-                  <div class={stylesSettings.settingsListRow}>
-                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
-                      <input type="checkbox" name="checkbox5" id="checkbox5" />
-                      <label for="checkbox5" />
+                    <div class={stylesSettings.settingsListRow}>
+                      <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                        <input type="checkbox" name="checkbox5" id="checkbox5" />
+                        <label for="checkbox5" />
+                      </div>
+                      <label for="checkbox5" class={stylesSettings.settingsListCell}>
+                        Реклама
+                      </label>
                     </div>
-                    <label for="checkbox5" class={stylesSettings.settingsListCell}>
-                      Реклама
-                    </label>
-                  </div>
-                  <div class={stylesSettings.settingsListRow}>
-                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
-                      <input type="checkbox" name="checkbox6" id="checkbox6" />
-                      <label for="checkbox6" />
+                    <div class={stylesSettings.settingsListRow}>
+                      <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                        <input type="checkbox" name="checkbox6" id="checkbox6" />
+                        <label for="checkbox6" />
+                      </div>
+                      <label for="checkbox6" class={stylesSettings.settingsListCell}>
+                        Искусство
+                      </label>
                     </div>
-                    <label for="checkbox6" class={stylesSettings.settingsListCell}>
-                      Искусство
-                    </label>
-                  </div>
-                  <div class={stylesSettings.settingsListRow}>
-                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
-                      <input type="checkbox" name="checkbox7" id="checkbox7" />
-                      <label for="checkbox7" />
+                    <div class={stylesSettings.settingsListRow}>
+                      <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                        <input type="checkbox" name="checkbox7" id="checkbox7" />
+                        <label for="checkbox7" />
+                      </div>
+                      <label for="checkbox7" class={stylesSettings.settingsListCell}>
+                        Общество
+                      </label>
                     </div>
-                    <label for="checkbox7" class={stylesSettings.settingsListCell}>
-                      Общество
-                    </label>
-                  </div>
-                  <div class={stylesSettings.settingsListRow}>
-                    <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
-                      <input type="checkbox" name="checkbox8" id="checkbox8" />
-                      <label for="checkbox8" />
+                    <div class={stylesSettings.settingsListRow}>
+                      <div class={clsx(stylesSettings.settingsListCell, styles.topicsListItem)}>
+                        <input type="checkbox" name="checkbox8" id="checkbox8" />
+                        <label for="checkbox8" />
+                      </div>
+                      <label for="checkbox8" class={stylesSettings.settingsListCell}>
+                        Личный опыт
+                      </label>
                     </div>
-                    <label for="checkbox8" class={stylesSettings.settingsListCell}>
-                      Личный опыт
-                    </label>
                   </div>
-                </div>
 
-                <br />
-                <p>
-                  <button class="button button--submit">Сохранить настройки</button>
-                </p>
-              </form>
+                  <br />
+                  <p>
+                    <button class="button button--submit">Сохранить настройки</button>
+                  </p>
+                </form>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index fa243343..bf133c1b 100644
--- a/src/styles/app.scss
+++ b/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;