fixed

src/client/FlagInputModal.ts

@@ -95,14 +95,36 @@ export class FlagInputModal extends LitElement {
   }
 
   static styles = css`
-    @media (max-width: 768px) {
-      .flag-modal {
-        width: 80vw;
-      }
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
 
-      .dropdown-item {
-        width: calc(100% / 3 - 15px);
-      }
+    .flag-modal {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .grid {
+      flex-grow: 1;
+      overflow-y: auto;
+    }
+
+    .flex-col {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .overflow-hidden {
+      overflow: hidden;
+    }
+
+    .overflow-y-auto {
+      overflow-y: auto;
     }
   `;
 
@@ -235,6 +257,7 @@ export class FlagInputModal extends LitElement {
         widthRatio="0.8"
         heightRatio="0.75"
         disableScroll="true"
+        special="true"
       >
         <!-- tab  -->
         <div class="flex gap-2 mb-2">
@@ -364,7 +387,7 @@ ${colorClass}"
                     : null}
 
                   <div
-                    class="grid grid-cols-2 gap-2 w-full max-h-[500px] overflow-y-auto pr-1 mb-2"
+                    class="grid grid-cols-2 gap-2 w-full overflow-y-auto pr-1 mb-2"
                   >
                     ${Object.entries(FlagMap)
                       .filter(([name]) => name !== "frame" && name !== "full")
@@ -507,7 +530,7 @@ mask: url(${src}) center / contain no-repeat;
                     ${translateText("flag_input.apply")}
                   </button>
 
-                  <div class="mt-4 w-full max-h-[500px] overflow-y-auto mb-2">
+                  <div class="mt-4 w-full overflow-y-auto mb-2">
                     <!-- Code input and copy -->
                     <div class="mt-2 w-full space-y-2">
                       ${this.errorMessage

src/client/components/baseComponents/Modal.ts

@@ -10,6 +10,7 @@ export class OModal extends LitElement {
   @property({ type: Number }) widthRatio?: number;
   @property({ type: Number }) heightRatio?: number;
   @property({ type: Boolean }) disableScroll = false;
+  @property({ type: Boolean }) special = false;
 
   static styles = css`
     .c-modal {
@@ -34,6 +35,16 @@ export class OModal extends LitElement {
       max-width: 860px;
     }
 
+    .c-modal__wrapper__special {
+      background: #23232382;
+      border-radius: 8px;
+      min-width: 340px;
+      max-width: 860px;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
     .c-modal__header {
       position: relative;
       border-top-left-radius: 4px;
@@ -60,6 +71,16 @@ export class OModal extends LitElement {
       overflow-y: scroll;
       backdrop-filter: blur(8px);
     }
+
+    .c-modal__content__special {
+      position: relative;
+      color: #fff;
+      padding: 1.4rem;
+      flex-grow: 1;
+      max-height: 100%;
+      overflow-y: auto;
+      backdrop-filter: blur(8px);
+    }
   `;
   public open() {
     this.isModalOpen = true;
@@ -78,7 +99,7 @@ export class OModal extends LitElement {
         ? html`
             <aside class="c-modal">
               <div
-                class="c-modal__wrapper"
+                class="c-modal__wrapper${this.special ? "__special" : ""}"
                 style=${`width: ${this.widthRatio ? this.widthRatio * 100 + "vw" : "auto"}; height: ${this.heightRatio ? this.heightRatio * 100 + "vh" : "auto"};`}
               >
                 <header class="c-modal__header">
@@ -88,12 +109,8 @@ export class OModal extends LitElement {
                   <div class="c-modal__close" @click=${this.close}>X</div>
                 </header>
                 <section
-                  class="c-modal__content"
-                  style=${`${
-                    this.heightRatio
-                      ? `height: calc(${this.heightRatio * 100}vh - 4rem);`
-                      : ""
-                  } ${this.disableScroll ? "overflow: hidden;" : ""}`}
+                  class="c-modal__content${this.special ? "__special" : ""}"
+                  style=${`${this.disableScroll ? "overflow: hidden;" : ""}`}
                 >
                   <slot></slot>
                 </section>