From 9a20a9093287b1835d635398ea900e5dc2ca3484 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 28 May 2020 21:26:33 +0300
Subject: [PATCH] fixed the remaining issues

---
 .../settings_modal/settings_modal_content.scss    |  4 ----
 .../settings_modal/settings_modal_content.vue     |  1 -
 src/components/tab_switcher/tab_switcher.js       | 15 ++++++---------
 src/components/tab_switcher/tab_switcher.scss     | 11 ++++++++++-
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index f80306c6..a3fef1cf 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -2,10 +2,6 @@
 .settings_tab-switcher {
   height: 100%;
 
-  .full-height {
-    height: 100%;
-  }
-
   .setting-item {
     border-bottom: 2px solid var(--fg, $fallback--fg);
     margin: 1em 1em 1.4em;
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 283b4ef8..2156844f 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -55,7 +55,6 @@
       v-if="isLoggedIn"
       :label="$t('settings.mutes_and_blocks')"
       :fullHeight="true"
-      class="full-height"
       icon="eye-off"
     >
       <MutesAndBlocksTab />
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 616f1a19..7891cb78 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -113,23 +113,20 @@ export default Vue.component('tab-switcher', {
       if (slot.data.attrs.fullHeight) {
         classes.push('full-height')
       }
-      const newSlot = (
+      const renderSlot = (!this.renderOnlyFocused || active)
+        ? slot
+        : ''
+
+      return (
         <div class={classes}>
           {
             this.sideTabBar
               ? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
               : ''
           }
-          {slot}
+          {renderSlot}
         </div>
       )
-
-      if (this.renderOnlyFocused) {
-        return active
-          ? <div class={classes.join(' ')}>{newSlot}</div>
-          : <div class={classes.join(' ')}></div>
-      }
-      return <div class={classes.join(' ')}>{newSlot}</div>
     })
 
     return (
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index db58f4cd..2a364731 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -125,8 +125,9 @@
         border-bottom-right-radius: 0;
         padding-left: 1em;
         padding-right: calc(1em + 200px);
-        margin-right: calc(1em - 200px);
+        margin-right: -200px;
         margin-left: 1em;
+
         @media all and (max-width: 800px) {
           padding-left: .25em;
           padding-right: calc(.25em + 200px);
@@ -147,6 +148,14 @@
     .hidden {
       display: none;
     }
+    .full-height {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      > *:not(.mobile-label) {
+        flex: 1;
+      }
+    }
 
     &.scrollable-tabs {
       overflow-y: auto;