Fix potrait mode styles in Rank-2 and MOS modals

Use deep scoped media selectors instead of style hacks. ref #785
xenharmonic-devs · Jul 19, 2024 · 3bd3dba · 3bd3dba
1 parent f9509ed
commit 3bd3dba
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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>