diff --git a/fluxer_app/src/features/channel/components/modals/channel_tabs/ChannelOverviewTab.module.css b/fluxer_app/src/features/channel/components/modals/channel_tabs/ChannelOverviewTab.module.css index a0c0d3fa7..1c7b4a612 100644 --- a/fluxer_app/src/features/channel/components/modals/channel_tabs/ChannelOverviewTab.module.css +++ b/fluxer_app/src/features/channel/components/modals/channel_tabs/ChannelOverviewTab.module.css @@ -209,6 +209,12 @@ padding: 0.25rem 0; } +.settingsControlRowStacked { + flex-direction: column; + align-items: stretch; + gap: 0.75rem; +} + .settingsControlText { display: flex; min-width: 0; @@ -245,6 +251,24 @@ padding-top: 0.125rem; } +.settingsControlRowStacked .settingsControlText, +.settingsControlRowStacked .settingsSliderControl { + width: 100%; +} + +.settingsControlRowStacked .settingsControlText { + flex: none; +} + +.settingsControlRowStacked .settingsControlDescription { + padding-right: 0; +} + +.settingsControlRowStacked .settingsSliderControl { + flex: none; + min-width: 0; +} + .selectField { display: flex; flex-direction: column; diff --git a/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/SettingsControlRow.tsx b/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/SettingsControlRow.tsx index 721b930be..e794c2009 100644 --- a/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/SettingsControlRow.tsx +++ b/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/SettingsControlRow.tsx @@ -1,18 +1,29 @@ // SPDX-License-Identifier: AGPL-3.0-or-later import styles from '@app/features/channel/components/modals/channel_tabs/ChannelOverviewTab.module.css'; +import {clsx} from 'clsx'; import type React from 'react'; interface SettingsControlRowProps { label: string; description?: string; dataFlx: string; + stacked?: boolean; children: React.ReactNode; } -export const SettingsControlRow: React.FC = ({label, description, dataFlx, children}) => { +export const SettingsControlRow: React.FC = ({ + label, + description, + dataFlx, + stacked = false, + children, +}) => { return ( -
+
diff --git a/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/SlowmodeControl.tsx b/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/SlowmodeControl.tsx index f237c5894..9f6ee65d8 100644 --- a/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/SlowmodeControl.tsx +++ b/fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/SlowmodeControl.tsx @@ -113,6 +113,7 @@ export const SlowmodeControl: React.FC = ({form, remoteSlo