From ba95dc47cd2d5b3e7e741ef2fc07b4892193422f Mon Sep 17 00:00:00 2001
From: Andre Perunicic <perunicic@gmail.com>
Date: Sun, 25 Sep 2022 01:47:04 -0400
Subject: [PATCH] Center buttons and make them full width on tiny screens

---
 src/repeat/obsidian/RepeatView.tsx |  2 +-
 styles.css                         | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/repeat/obsidian/RepeatView.tsx b/src/repeat/obsidian/RepeatView.tsx
index 259a3c0..88376b3 100644
--- a/src/repeat/obsidian/RepeatView.tsx
+++ b/src/repeat/obsidian/RepeatView.tsx
@@ -43,7 +43,7 @@ class RepeatView extends ItemView {
 
     this.root = this.containerEl.children[1];
     this.messageContainer = this.root.createEl('div', { cls: 'repeat-message' });
-    this.buttonsContainer = this.root.createDiv();
+    this.buttonsContainer = this.root.createEl('div', { cls: 'repeat-buttons' });
     this.previewContainer = this.root.createEl('div', { cls: 'repeat-embedded_note' });
     this.indexPromise = new Promise((resolve, reject) => {
       if (!this.dv) {
diff --git a/styles.css b/styles.css
index 128b55f..648027f 100644
--- a/styles.css
+++ b/styles.css
@@ -2,6 +2,21 @@
   text-align: center;
 }
 
+.repeat-buttons {
+  text-align: center;
+}
+
+.repeat-buttons > button {
+  margin-top: 15px;
+}
+
+/* Make buttons legible on mobile. */
+@media (max-width: 450px) {
+  .repeat-buttons > button {
+    width: 100%;
+  }
+}
+
 .repeat-embedded_note {
   padding: 15px 30px;
 }