From 6a5865329f7d1229c30cf43a25f5bf5ecbb594a3 Mon Sep 17 00:00:00 2001
From: Callum Loh <callumloh@gmail.com>
Date: Sat, 25 Mar 2023 00:23:58 +0000
Subject: [PATCH] Style settings to work better on mobile

---
 src/settings.ts | 5 +++++
 styles.css      | 9 +++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/settings.ts b/src/settings.ts
index 3e642f1..57e17d1 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -71,6 +71,7 @@ export default class CronSettingTab extends PluginSettingTab {
 						await this.plugin.saveSettings();
 						this.plugin.loadCrons();
 					})
+					.inputEl.addClass('cron-plugin-text-input')
 				)
 				.addSearch((cb) => {
 						new CommandSuggest(cb.inputEl);
@@ -83,6 +84,7 @@ export default class CronSettingTab extends PluginSettingTab {
 								await this.plugin.saveSettings();
 								this.plugin.loadCrons();
 							})
+							.inputEl.addClass('cron-plugin-text-input')
 				})
 				.addText(text => text
 					.setPlaceholder("CronJob frequency")
@@ -92,6 +94,7 @@ export default class CronSettingTab extends PluginSettingTab {
 						await this.plugin.saveSettings();
 						this.plugin.loadCrons();
 					})
+					.inputEl.addClass('cron-plugin-text-input')
 				)
 				.addExtraButton((button) => {
 					button.setIcon(cronjob.settings.enableMobile ? "lucide-phone" : "lucide-phone-off")
@@ -137,6 +140,8 @@ export default class CronSettingTab extends PluginSettingTab {
 							this.display();
 						});
 				});
+
+				jobSetting.controlEl.addClass("cron-plugin-job")
 		});
 
 		new Setting(this.containerEl).addButton((cb) => {
diff --git a/styles.css b/styles.css
index 71cc60f..7b2d8dd 100644
--- a/styles.css
+++ b/styles.css
@@ -6,3 +6,12 @@ available in the app when your plugin is enabled.
 If your plugin does not need CSS, delete this file.
 
 */
+
+.cron-plugin-text-input {
+	width: 10vw;
+	min-width: 180px;
+}
+
+.cron-plugin-job {
+	flex-wrap: wrap;
+}