From 5720bd6d3cfccdbce584f1d8c39078cb6388d5cd Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Thu, 29 Jan 2026 00:59:51 +1030
Subject: [PATCH] style(settings): mobile views for general settings

---
 src/routes/settings/general/+page.svelte                      | 4 ++--
 src/routes/settings/general/components/AISettings.svelte      | 4 ++--
 .../settings/general/components/ArrDefaultsSettings.svelte    | 2 +-
 src/routes/settings/general/components/BackupSettings.svelte  | 2 +-
 src/routes/settings/general/components/LoggingSettings.svelte | 4 ++--
 src/routes/settings/general/components/TMDBSettings.svelte    | 4 ++--
 src/routes/settings/general/components/UISettings.svelte      | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/routes/settings/general/+page.svelte b/src/routes/settings/general/+page.svelte
index ca3c75b..7752578 100644
--- a/src/routes/settings/general/+page.svelte
+++ b/src/routes/settings/general/+page.svelte
@@ -12,8 +12,8 @@
 
 <div class="p-8">
 	<div class="mb-8">
-		<h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-50">General Settings</h1>
-		<p class="mt-3 text-lg text-neutral-600 dark:text-neutral-400">
+		<h1 class="text-2xl font-bold text-neutral-900 md:text-3xl dark:text-neutral-50">General Settings</h1>
+		<p class="mt-3 text-base text-neutral-600 md:text-lg dark:text-neutral-400">
 			Configure general application settings and preferences
 		</p>
 	</div>
diff --git a/src/routes/settings/general/components/AISettings.svelte b/src/routes/settings/general/components/AISettings.svelte
index b9580ed..323e379 100644
--- a/src/routes/settings/general/components/AISettings.svelte
+++ b/src/routes/settings/general/components/AISettings.svelte
@@ -30,7 +30,7 @@
 >
 	<!-- Header -->
 	<div class="border-b border-neutral-200 px-6 py-4 dark:border-neutral-800">
-		<h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-50">AI Configuration</h2>
+		<h2 class="text-lg font-semibold text-neutral-900 md:text-xl dark:text-neutral-50">AI Configuration</h2>
 		<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
 			Configure AI-powered features like commit message generation. Works with OpenAI, Ollama, LM
 			Studio, or any OpenAI-compatible API.
@@ -161,7 +161,7 @@
 
 		<!-- Action buttons -->
 		<div
-			class="mt-6 flex items-center justify-between border-t border-neutral-200 pt-6 dark:border-neutral-800"
+			class="mt-6 flex flex-col gap-3 border-t border-neutral-200 pt-6 md:flex-row md:items-center md:justify-between dark:border-neutral-800"
 		>
 			<button
 				type="button"
diff --git a/src/routes/settings/general/components/ArrDefaultsSettings.svelte b/src/routes/settings/general/components/ArrDefaultsSettings.svelte
index 717da47..5f49b31 100644
--- a/src/routes/settings/general/components/ArrDefaultsSettings.svelte
+++ b/src/routes/settings/general/components/ArrDefaultsSettings.svelte
@@ -13,7 +13,7 @@
 >
 	<!-- Header -->
 	<div class="border-b border-neutral-200 px-6 py-4 dark:border-neutral-800">
-		<h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-50">
+		<h2 class="text-lg font-semibold text-neutral-900 md:text-xl dark:text-neutral-50">
 			Arr Instance Defaults
 		</h2>
 		<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/src/routes/settings/general/components/BackupSettings.svelte b/src/routes/settings/general/components/BackupSettings.svelte
index 7257445..0f7185b 100644
--- a/src/routes/settings/general/components/BackupSettings.svelte
+++ b/src/routes/settings/general/components/BackupSettings.svelte
@@ -14,7 +14,7 @@
 >
 	<!-- Header -->
 	<div class="border-b border-neutral-200 px-6 py-4 dark:border-neutral-800">
-		<h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-50">
+		<h2 class="text-lg font-semibold text-neutral-900 md:text-xl dark:text-neutral-50">
 			Backup Configuration
 		</h2>
 		<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/src/routes/settings/general/components/LoggingSettings.svelte b/src/routes/settings/general/components/LoggingSettings.svelte
index 7d36fbc..1541818 100644
--- a/src/routes/settings/general/components/LoggingSettings.svelte
+++ b/src/routes/settings/general/components/LoggingSettings.svelte
@@ -32,7 +32,7 @@
 >
 	<!-- Header -->
 	<div class="border-b border-neutral-200 px-6 py-4 dark:border-neutral-800">
-		<h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-50">
+		<h2 class="text-lg font-semibold text-neutral-900 md:text-xl dark:text-neutral-50">
 			Logging Configuration
 		</h2>
 		<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -190,7 +190,7 @@
 
 		<!-- Action buttons -->
 		<div
-			class="mt-6 flex items-center justify-between border-t border-neutral-200 pt-6 dark:border-neutral-800"
+			class="mt-6 flex flex-col gap-3 border-t border-neutral-200 pt-6 md:flex-row md:items-center md:justify-between dark:border-neutral-800"
 		>
 			<button
 				type="button"
diff --git a/src/routes/settings/general/components/TMDBSettings.svelte b/src/routes/settings/general/components/TMDBSettings.svelte
index 84fd7bf..7c85004 100644
--- a/src/routes/settings/general/components/TMDBSettings.svelte
+++ b/src/routes/settings/general/components/TMDBSettings.svelte
@@ -51,7 +51,7 @@
 >
 	<!-- Header -->
 	<div class="border-b border-neutral-200 px-6 py-4 dark:border-neutral-800">
-		<h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-50">TMDB Configuration</h2>
+		<h2 class="text-lg font-semibold text-neutral-900 md:text-xl dark:text-neutral-50">TMDB Configuration</h2>
 		<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
 			Configure TMDB API access for searching movies and TV series.
 		</p>
@@ -116,7 +116,7 @@
 
 		<!-- Action buttons -->
 		<div
-			class="mt-6 flex items-center justify-between border-t border-neutral-200 pt-6 dark:border-neutral-800"
+			class="mt-6 flex flex-col gap-3 border-t border-neutral-200 pt-6 md:flex-row md:items-center md:justify-between dark:border-neutral-800"
 		>
 			<button
 				type="button"
diff --git a/src/routes/settings/general/components/UISettings.svelte b/src/routes/settings/general/components/UISettings.svelte
index 16c059f..9caf026 100644
--- a/src/routes/settings/general/components/UISettings.svelte
+++ b/src/routes/settings/general/components/UISettings.svelte
@@ -15,7 +15,7 @@
 >
 	<!-- Header -->
 	<div class="border-b border-neutral-200 px-6 py-4 dark:border-neutral-800">
-		<h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-50">Interface</h2>
+		<h2 class="text-lg font-semibold text-neutral-900 md:text-xl dark:text-neutral-50">Interface</h2>
 		<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
 			Customize the look and feel of the application
 		</p>