Make language modal wider

src/components/EditorHeader/Modal/Language.jsx

@@ -7,7 +7,7 @@ export default function Language() {
   const { i18n } = useTranslation();
 
   return (
-    <div className="grid grid-cols-3 gap-4">
+    <div className="grid grid-cols-4 md:grid-cols-2 gap-4">
       {languages.map((l) => (
         <button
           key={l.code}

src/components/EditorHeader/Modal/Modal.jsx

@@ -21,7 +21,11 @@ import {
 } from "../../../hooks";
 import { saveAs } from "file-saver";
 import { Parser } from "node-sql-parser";
-import { getModalTitle, getOkText } from "../../../utils/modalTitles";
+import {
+  getModalTitle,
+  getModalWidth,
+  getOkText,
+} from "../../../utils/modalData";
 import Rename from "./Rename";
 import Open from "./Open";
 import New from "./New";
@@ -363,7 +367,7 @@ export default function Modal({
           (modal === MODAL.IMPORT_SRC && importSource.src === ""),
       }}
       cancelText={t("cancel")}
-      width={modal === MODAL.NEW || modal === MODAL.OPEN ? 740 : 600}
+      width={getModalWidth(modal)}
       bodyStyle={{
         maxHeight: window.innerHeight - 280,
         overflow: "auto",

src/utils/modalData.js

@@ -28,6 +28,17 @@ export const getModalTitle = (modal) => {
   }
 };
 
+export const getModalWidth = (modal) => {
+  switch (modal) {
+    case MODAL.LANGUAGE:
+    case MODAL.OPEN:
+    case MODAL.NEW:
+      return 740;
+    default:
+      return 600;
+  }
+};
+
 export const getOkText = (modal) => {
   switch (modal) {
     case MODAL.IMPORT: