fix(app): stack slowmode slider layout (#1582)

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;

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<SettingsControlRowProps> = ({label, description, dataFlx, children}) => {
+export const SettingsControlRow: React.FC<SettingsControlRowProps> = ({
+	label,
+	description,
+	dataFlx,
+	stacked = false,
+	children,
+}) => {
 	return (
-		<div className={styles.settingsControlRow} data-flx={`${dataFlx}.row`}>
+		<div
+			className={clsx(styles.settingsControlRow, stacked && styles.settingsControlRowStacked)}
+			data-flx={`${dataFlx}.row`}
+		>
 			<div className={styles.settingsControlText} data-flx={`${dataFlx}.text`}>
 				<div className={styles.settingsControlTitleRow} data-flx={`${dataFlx}.title-row`}>
 					<span className={styles.settingsControlLabel} data-flx={`${dataFlx}.label`}>

fluxer_app/src/features/channel/components/modals/channel_tabs/channel_overview_tab/SlowmodeControl.tsx

@@ -113,6 +113,7 @@ export const SlowmodeControl: React.FC<SlowmodeControlProps> = ({form, remoteSlo
 					<SettingsControlRow
 						label={slowmodeLabel}
 						description={i18n._(SLOWMODE_DESCRIPTION_DESCRIPTOR, {bypassSlowmodePermissionLabel})}
+						stacked
 						dataFlx="channel.channel-tabs.channel-overview-tab.slowmode-control"
 					>
 						<div className={styles.settingsSliderControl}>