From 971e4af526e6acb1a3caef7aad07a82d6f5f23f5 Mon Sep 17 00:00:00 2001
From: Anna Zubenko <anna_zubenko@fastmail.com>
Date: Mon, 22 Jul 2024 07:29:18 +0200
Subject: [PATCH] FEAT-990 Mobile landscape mode and functional size sliders
 (#998)

---
 src/gui/FlashcardModal.tsx |  2 ++
 styles.css                 | 42 +++++++++++++++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/gui/FlashcardModal.tsx b/src/gui/FlashcardModal.tsx
index 9ff4b372..f679a7e4 100644
--- a/src/gui/FlashcardModal.tsx
+++ b/src/gui/FlashcardModal.tsx
@@ -48,7 +48,9 @@ export class FlashcardModal extends Modal {
 
         // Setup base containers
         this.modalEl.style.height = this.settings.flashcardHeightPercentage + "%";
+        this.modalEl.style.maxHeight = this.settings.flashcardHeightPercentage + "%";
         this.modalEl.style.width = this.settings.flashcardWidthPercentage + "%";
+        this.modalEl.style.maxWidth = this.settings.flashcardWidthPercentage + "%";
         this.modalEl.setAttribute("id", "sr-modal");
 
         this.contentEl.addClass("sr-modal-content");
diff --git a/styles.css b/styles.css
index af8e7a1d..f532c01c 100644
--- a/styles.css
+++ b/styles.css
@@ -1,8 +1,40 @@
-.is-mobile #sr-modal {
-    --top-space: calc(var(--safe-area-inset-top) + var(--header-height) + var(--size-4-2));
-    width: 100vw !important;
-    height: calc(100vh - var(--top-space)) !important;
-    margin-top: var(--top-space);
+@media only screen and (orientation: landscape) {
+    .is-mobile .sr-flashcard {
+        flex-direction: row;
+    }
+
+    .is-mobile .sr-header {
+        flex-direction: column;
+        flex: 0 1 0;
+    }
+
+    .is-mobile .sr-content {
+        flex: 1 0 0;
+    }
+
+    .is-mobile .sr-response {
+        flex-direction: column;
+        flex: 0 1 0;
+    }
+
+    .is-mobile .sr-controls {
+        flex-direction: column;
+    }
+
+    .is-mobile .sr-title {
+        display: none;
+    }
+
+    .is-mobile .sr-response-button {
+        writing-mode: vertical-lr;
+    }
+}
+
+#sr-modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #sr-modal .modal-title {