From 3bd3dbae06f1d7060dba5d1877b795faf733c294 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Fri, 19 Jul 2024 11:07:38 +0300
Subject: [PATCH] Fix potrait mode styles in Rank-2 and MOS modals

Use deep scoped media selectors instead of style hacks.

ref #785
---
 src/components/ModalDialog.vue                |  6 +-----
 src/components/modals/generation/MosScale.vue | 15 +++++++++------
 src/components/modals/generation/RankTwo.vue  | 15 +++++++++------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
index ebb54027..83918200 100644
--- a/src/components/ModalDialog.vue
+++ b/src/components/ModalDialog.vue
@@ -6,10 +6,6 @@ const props = defineProps({
     default: true,
     type: Boolean
   },
-  extraStyle: {
-    default: '',
-    type: String
-  },
   right: {
     default: false,
     type: Boolean
@@ -80,7 +76,7 @@ watch(
   <Transition name="modal">
     <div v-if="show" :class="{ 'modal-mask': true, right }" @mousedown.self="$emit('cancel')">
       <div class="modal-wrapper">
-        <div class="modal-container" :style="extraStyle">
+        <div class="modal-container">
           <div class="modal-header">
             <slot name="header">default header</slot>
           </div>
diff --git a/src/components/modals/generation/MosScale.vue b/src/components/modals/generation/MosScale.vue
index 23328227..619a09ba 100644
--- a/src/components/modals/generation/MosScale.vue
+++ b/src/components/modals/generation/MosScale.vue
@@ -138,12 +138,7 @@ function edoClick(info: MosScaleInfo) {
 </script>
 
 <template>
-  <Modal
-    :show="show"
-    extraStyle="min-width: 40rem;max-width: 41rem"
-    @confirm="generate"
-    @cancel="$emit('cancel')"
-  >
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate MOS scale</h2>
     </template>
@@ -346,4 +341,12 @@ function edoClick(info: MosScaleInfo) {
     width: 4.5em;
   }
 }
+
+/* Content layout (medium) */
+@media screen and (min-width: 600px) {
+  .modal-mask :deep(.modal-container) {
+    min-width: 40rem;
+    max-width: 41rem;
+  }
+}
 </style>
diff --git a/src/components/modals/generation/RankTwo.vue b/src/components/modals/generation/RankTwo.vue
index 62cd5002..5f9a14f1 100644
--- a/src/components/modals/generation/RankTwo.vue
+++ b/src/components/modals/generation/RankTwo.vue
@@ -120,12 +120,7 @@ function generate(expand = true) {
 </script>
 
 <template>
-  <Modal
-    :show="show"
-    extraStyle="min-width: 30rem;max-width: 31rem"
-    @confirm="generate"
-    @cancel="$emit('cancel')"
-  >
+  <Modal :show="show" @confirm="generate" @cancel="$emit('cancel')">
     <template #header>
       <h2>Generate rank 2 temperament</h2>
     </template>
@@ -440,4 +435,12 @@ p.warning {
   width: 29em;
   overflow-y: hidden;
 }
+
+/* Content layout (medium) */
+@media screen and (min-width: 600px) {
+  .modal-mask :deep(.modal-container) {
+    min-width: 30rem;
+    max-width: 31rem;
+  }
+}
 </style>