fix: 一些布局

Author: clansty

MaiChartManager/Front/src/components/DragDropDispatcher/ReplaceChartModal.tsx

@@ -85,7 +85,7 @@ export default defineComponent({
         show.value = "";
         const result = (await api.ReplaceChart(selectMusicId.value, level, selectedADir.value, { file, shift: tempOption.value.shift })).data;
         if (!result.fatal) {
-          await showTransactionalDialog(t('music.edit.replaceChartSuccess'), '', undefined, true);
+          addToast({ type:'success', message: t('music.edit.replaceChartSuccess') })
         } else {
           apiResp.value = result; // 用于在失败时显示错误信息
           show.value = "failed";
@@ -130,7 +130,7 @@ export default defineComponent({
           </div>}
           {show.value === "maidata" && <div>
             <ShiftModeSelector tempOptions={tempOption.value}></ShiftModeSelector>
-            <div>{t('music.edit.replaceChartShiftModeHint')}</div>
+            <div class="text-sm">{t('music.edit.replaceChartShiftModeHint')}</div>
           </div>}
         </div>,
         actions: () => <>

MaiChartManager/Front/src/views/Charts/ImportCreateChartButton/ImportChartButton/ShiftModeSelector.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
     })
 
     return () => <div>
-      <div class="ml-1 text-sm">{t('chart.import.option.shiftMode')}</div>
+      <div class="text-sm">{t('chart.import.option.shiftMode')}</div>
       <div class="flex flex-col gap-2 w-full">
         <div class="flex gap-2 h-34px items-center">
           <Popover trigger="hover">

MaiChartManager/Front/src/views/GenreVersionManager/CreateButton.tsx

@@ -71,9 +71,9 @@ export default defineComponent({
               />
             </div>
           </div>,
-          actions: () => <div class="flex gap-2 justify-end">
+          actions: () => <>
             <Button onClick={save}>{t('common.confirm')}</Button>
-          </div>
+          </>
         }}</Modal>
       </Button>
     )

MaiChartManager/Front/src/views/GenreVersionManager/GenreDisplay.tsx

@@ -112,7 +112,7 @@ export default defineComponent({
                       }}
             /> :
             // contenteditable 的换行有疑难杂症
-            <pre class="b b-gray-3 b-solid rounded-sm h-12 lh-normal box-content text-align-center flex items-center justify-center my-4">{props.genre.genreNameTwoLine}</pre>
+            <pre class="b b-gray-3 b-solid rounded-sm h-12 lh-normal box-content text-align-center flex items-center justify-center my-4 bg-white">{props.genre.genreNameTwoLine}</pre>
         }
         <Buttons/>
       </div>

MaiChartManager/Front/src/views/ModManager/AquaMaiConfigurator.tsx

@@ -158,9 +158,9 @@ export default defineComponent({
       }) || [];
     });
 
-    return () => <div class="grid cols-[15em_auto] max-[900px]:cols-1">
+    return () => <div class="grid cols-[15em_auto] rows-1 max-[900px]:cols-1 flex-1 min-h-0">
       {/* 左侧导航 */}
-      <div class="flex flex-col gap-0.5 max-[900px]:hidden of-y-auto h-[calc(100dvh-80px)]">
+      <div class="flex flex-col gap-0.5 max-[900px]:hidden of-y-auto h-full">
         {allTabs.value.map(tab =>
           <div
             key={tab.key}
@@ -174,7 +174,7 @@ export default defineComponent({
           </div>
         )}
       </div>
-      <div class="flex flex-col h-[calc(100dvh-80px)]">
+      <div class="flex flex-col h-full">
         <div class="flex gap-2 p-2 shrink-0">
           <div class={["min-[900px]:hidden"]}>
             <Popover trigger="click">{{

MaiChartManager/Front/src/views/ModManager/ConfigEditor.tsx

@@ -125,8 +125,8 @@ export default defineComponent({
         editorPart = <AquaMaiConfigurator config={config.value!} useNewSort={true}/>
       }
 
-      return <div class="flex flex-col gap-2 h-full of-y-auto">
-        {!!modInfo.value && <div class="flex flex-col gap-2">
+      return <div class="flex flex-col gap-2 flex-1 min-h-0">
+        {!!modInfo.value && <div class="flex flex-col gap-2 flex-1 min-h-0">
           <div class="flex gap-2 items-center flex-wrap">
             <span class="max-[1060px]:hidden">MelonLoader:</span>
             {modInfo.value.melonLoaderInstalled ? <span class="c-green-6 max-[1060px]:hidden">{t('mod.installed')}</span> : <span class="c-red-6">{t('mod.notInstalled')}</span>}

MaiChartManager/Front/src/views/ModManager/index.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
       if (shouldShowUpdate.value) return 'warning'
     })
 
-    return () => <div class="p-xy h-100dvh of-y-auto">
+    return () => <div class="p-xy h-100dvh flex flex-col of-hidden">
       {modInfo.value && <ConfigEditor />}
     </div>;
   }