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" > 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 (
{ this.sideTabBar ?

{slot.data.attrs.label}

: '' } - {slot} + {renderSlot}
) - - if (this.renderOnlyFocused) { - return active - ?
{newSlot}
- :
- } - return
{newSlot}
}) 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;