diff --git a/changelog.d/mobile-theme-editing.fix b/changelog.d/mobile-theme-editing.fix
new file mode 100644
index 000000000..43ee05ec8
--- /dev/null
+++ b/changelog.d/mobile-theme-editing.fix
@@ -0,0 +1 @@
+Enable mobile theme editing
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index fea9a20fe..f9a1e99bc 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -22,7 +22,7 @@
+
+
+ {{ $t('settings.theme_editor_min_width') }}
+
+
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index a9c35c085..6a86a3e08 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -1,4 +1,6 @@
.StyleTab {
+ min-width: var(--themeEditorMinWidth, fit-content);
+
.style-control {
display: flex;
flex-wrap: wrap;
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index c2e33e75e..d83beffa0 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,4 +1,6 @@
.theme-tab {
+ min-width: var(--themeEditorMinWidth, fit-content);
+
.deprecation-warning {
padding: 0.5em;
margin: 2em;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9d3400d10..545cdb1e1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -709,6 +709,7 @@
"column_sizes_sidebar": "Sidebar",
"column_sizes_content": "Content",
"column_sizes_notifs": "Notifications",
+ "theme_editor_min_width": "Minimum width of theme editor (0 for \"fit-content\")",
"tree_advanced": "Allow more flexible navigation in tree view",
"tree_fade_ancestors": "Display ancestors of the current status in faint text",
"conversation_display_linear": "Linear-style",
diff --git a/src/modules/config.js b/src/modules/config.js
index 1d81f67f6..e515b9fe4 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -13,6 +13,7 @@ const APPEARANCE_SETTINGS_KEYS = new Set([
'sidebarColumnWidth',
'contentColumnWidth',
'notifsColumnWidth',
+ 'themeEditorMinWidth',
'textSize',
'navbarSize',
'panelHeaderSize',
diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
index 2baa752a6..eb12d2df1 100644
--- a/src/modules/default_config_state.js
+++ b/src/modules/default_config_state.js
@@ -121,6 +121,7 @@ export const defaultState = {
sidebarColumnWidth: '25rem',
contentColumnWidth: '45rem',
notifsColumnWidth: '25rem',
+ themeEditorMinWidth: undefined, // instance default
emojiReactionsScale: undefined,
textSize: undefined, // instance default
emojiSize: undefined, // instance default
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 7987f7e63..83671a881 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -112,6 +112,7 @@ const defaultState = {
emojiSize: '2.2rem',
navbarSize: '3.5rem',
panelHeaderSize: '3.2rem',
+ themeEditorMinWidth: '0rem',
forcedRoundness: -1,
fontsOverride: {},
virtualScrolling: true,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 50be54443..13606cdd9 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -187,6 +187,7 @@ const extractStyleConfig = ({
sidebarColumnWidth,
contentColumnWidth,
notifsColumnWidth,
+ themeEditorMinWidth,
emojiReactionsScale,
emojiSize,
navbarSize,
@@ -198,6 +199,7 @@ const extractStyleConfig = ({
sidebarColumnWidth,
contentColumnWidth,
notifsColumnWidth,
+ themeEditorMinWidth: parseInt(themeEditorMinWidth) === 0 ? 'fit-content' : themeEditorMinWidth,
emojiReactionsScale,
emojiSize,
navbarSize,