-
diff --git a/src/components/tab_switcher/vertical_tab_switcher.scss b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
similarity index 98%
rename from src/components/tab_switcher/vertical_tab_switcher.scss
rename to src/components/settings_modal/helpers/vertical_tab_switcher.scss
index 4a0b10203..4ac03ae59 100644
--- a/src/components/tab_switcher/vertical_tab_switcher.scss
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
@@ -39,6 +39,10 @@
&.-full-width {
align-self: stretch;
}
+
+ &.-full-height {
+ flex: 1;
+ }
}
.tab-content-label {
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index a1e3ec412..78698803e 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -50,9 +50,11 @@
}
&.two-column {
- column-count: 2;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
> li {
+ margin: 0;
break-inside: avoid;
}
}
@@ -106,11 +108,13 @@
&.-mobile {
.tabs {
.menu-item {
- font-size: 1.2em
+ font-size: 1.2em;
+ padding-top: 0.75em;
+ padding-bottom: 0.75em;
}
}
- .setting-list,
+ .setting-list:not(.suboptions),
.option-list {
padding-left: 0.25em;
@@ -121,7 +125,7 @@
}
&.two-column {
- column-count: 1;
+ grid-template-columns: 1fr;
}
}
}
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index fa6b7f8ad..bc0039118 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -1,4 +1,4 @@
-import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'
+import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
import InstanceTab from './admin_tabs/instance_tab.vue'
import LimitsTab from './admin_tabs/limits_tab.vue'
diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
index 18e1148dc..d3a66aedb 100644
--- a/src/components/settings_modal/settings_modal_user_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -1,4 +1,4 @@
-import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'
+import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
import DataImportExportTab from './tabs/data_import_export_tab.vue'
import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index 5deca7868..306d8e898 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -1,8 +1,11 @@
.settings_tab-switcher {
height: 100%;
+ [full-height="true"] {
+ height: 100%
+ }
+
.setting-item {
- border-bottom: 2px solid var(--border);
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index 6709b6e02..b2b291e9b 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -80,6 +80,7 @@
icon="eye-slash"
data-tab-name="mutesAndBlocks"
:full-width="true"
+ :full-height="true"
>
@@ -95,7 +96,6 @@
:label="$t('settings.security_tab')"
icon="lock"
data-tab-name="security"
- :full-width="true"
>