From e5cec38ac56c568df3f7e771328a88cda70e89cb Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Sun, 15 Jun 2025 01:22:03 +0100
Subject: [PATCH] feat: move to modal

---
 .../components/ui/servers/ServerSidebar.vue   |  26 +-
 .../scheduling/EditScheduledTaskModal.vue     | 531 ++++++++++++++++++
 .../composables/servers/modules/scheduling.ts |  79 ++-
 .../[id]/options/scheduling/[taskId].vue      | 441 ---------------
 .../manage/[id]/options/scheduling/index.vue  |  42 +-
 packages/ui/src/components/base/Chips.vue     |  36 +-
 .../ui/src/components/base/TimePicker.vue     |  69 ++-
 packages/ui/src/components/modal/NewModal.vue |   6 +-
 8 files changed, 717 insertions(+), 513 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/servers/scheduling/EditScheduledTaskModal.vue
 delete mode 100644 apps/frontend/src/pages/servers/manage/[id]/options/scheduling/[taskId].vue

diff --git a/apps/frontend/src/components/ui/servers/ServerSidebar.vue b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
index c3edaab68..0c8c30e89 100644
--- a/apps/frontend/src/components/ui/servers/ServerSidebar.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
@@ -6,7 +6,7 @@
           <NuxtLink
             :to="link.href"
             class="flex items-center gap-2 rounded-xl p-2 hover:bg-button-bg"
-            :class="{ 'bg-button-bg text-contrast': route.path === link.href }"
+            :class="{ 'bg-button-bg text-contrast': isLinkActive(link) }"
           >
             <div class="flex items-center gap-2 font-bold">
               <component :is="link.icon" class="size-6" />
@@ -39,13 +39,33 @@ import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const emit = defineEmits(["reinstall"]);
 
-defineProps<{
-  navLinks: { label: string; href: string; icon: Component; external?: boolean }[];
+const props = defineProps<{
+  navLinks: {
+    label: string;
+    href: string;
+    icon: Component;
+    external?: boolean;
+    matches?: RegExp[];
+  }[];
   route: RouteLocationNormalized;
   server: ModrinthServer;
   backupInProgress?: BackupInProgressReason;
 }>();
 
+const isLinkActive = (link: (typeof props.navLinks)[0]) => {
+  if (props.route.path === link.href) {
+    return true;
+  }
+
+  if (link.matches && link.matches.length > 0) {
+    return link.matches.some((regex: RegExp) => {
+      return regex.test(props.route.path);
+    });
+  }
+
+  return false;
+};
+
 const onReinstall = (...args: any[]) => {
   emit("reinstall", ...args);
 };
diff --git a/apps/frontend/src/components/ui/servers/scheduling/EditScheduledTaskModal.vue b/apps/frontend/src/components/ui/servers/scheduling/EditScheduledTaskModal.vue
new file mode 100644
index 000000000..ea785aac8
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/scheduling/EditScheduledTaskModal.vue
@@ -0,0 +1,531 @@
+<template>
+  <NewModal
+    ref="modal"
+    :header="isNew ? 'New scheduled task' : 'Editing scheduled task'"
+    @hide="onModalHide"
+  >
+    <div class="modal-content flex flex-col gap-2">
+      <div v-if="error" class="text-sm text-brand-red">
+        {{ error }}
+      </div>
+
+      <div class="flex max-w-md flex-col gap-2">
+        <label for="title">
+          <span class="text-lg font-bold text-contrast">
+            Title <span class="text-brand-red">*</span>
+          </span>
+        </label>
+        <input
+          id="title"
+          v-model="task.title"
+          type="text"
+          maxlength="64"
+          placeholder="Enter task title..."
+          autocomplete="off"
+          class="input input-bordered"
+          required
+        />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label><span class="text-lg font-bold text-contrast">Schedule Type</span></label>
+        <RadioButtons v-model="scheduleType" :items="['daily', 'custom']" class="mb-2">
+          <template #default="{ item }">
+            <span class="flex items-center gap-2">
+              <ClockIcon v-if="item === 'daily'" class="size-5" />
+              <CodeIcon v-else class="size-5" />
+              <span>{{
+                item === "daily" ? "Every X day(s) at specific time" : "Custom cron expression"
+              }}</span>
+            </span>
+          </template>
+        </RadioButtons>
+      </div>
+
+      <div class="card flex h-[140px] items-center overflow-hidden rounded-lg !bg-bg">
+        <Transition
+          name="schedule-content"
+          mode="out-in"
+          enter-active-class="transition-all duration-300 ease-in-out"
+          leave-active-class="transition-all duration-300 ease-in-out"
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+        >
+          <div v-if="scheduleType === 'daily'" key="daily" class="flex w-full flex-col gap-2">
+            <div class="flex w-full gap-8">
+              <div class="flex flex-col gap-2">
+                <label for="dayInterval" class="text-md font-medium">Every X day(s)</label>
+                <div class="flex items-center gap-2">
+                  <input
+                    id="dayInterval"
+                    v-model="dayInterval"
+                    type="text"
+                    inputmode="numeric"
+                    maxlength="3"
+                    class="input input-bordered w-20"
+                    placeholder="1"
+                    @input="onDayIntervalInput"
+                  />
+                  <span class="text-muted-foreground text-sm">day(s)</span>
+                </div>
+              </div>
+              <div class="flex flex-col gap-2">
+                <label class="text-md font-medium">At time</label>
+                <TimePicker v-model="selectedTime" use-utc-values placeholder="Select time" />
+              </div>
+            </div>
+            <div class="text-xs">
+              {{ humanReadableDescription }}
+            </div>
+          </div>
+          <div v-else key="custom" class="flex w-full flex-col gap-2">
+            <label for="customCron" class="text-md font-medium"
+              >Cron Expression
+              <nuxt-link
+                v-tooltip="
+                  `Click to read more about what cron expressions are, and how to create them.`
+                "
+                class="align-middle text-link"
+                target="_blank"
+                to="https://www.geeksforgeeks.org/writing-cron-expressions-for-scheduling-tasks/"
+                ><UnknownIcon class="size-4" />
+              </nuxt-link>
+            </label>
+            <input
+              id="customCron"
+              v-model="customCron"
+              type="text"
+              class="input input-bordered font-mono"
+              placeholder="0 0 9 * * *"
+            />
+            <div v-if="!isValidCron" class="text-xs text-brand-red">
+              Invalid cron format. Please use 6 space-separated values (e.g.,
+              <code>second minute hour day month day-of-week</code>).
+            </div>
+            <div v-else class="text-xs">
+              {{ humanReadableDescription }}
+            </div>
+          </div>
+        </Transition>
+      </div>
+
+      <div class="flex max-w-md flex-col gap-2">
+        <label for="action_kind"><span class="text-lg font-bold text-contrast">Action</span></label>
+        <RadioButtons v-model="task.action_kind" :items="actionKinds" class="mb-2">
+          <template #default="{ item }">
+            <span>{{ item === "restart" ? "Restart server" : "Run game command" }}</span>
+          </template>
+        </RadioButtons>
+      </div>
+
+      <Transition
+        name="command-section"
+        enter-active-class="transition-all duration-300 ease-in-out"
+        leave-active-class="transition-all duration-300 ease-in-out"
+        enter-from-class="opacity-0 max-h-0 overflow-hidden"
+        enter-to-class="opacity-100 max-h-96 overflow-visible"
+        leave-from-class="opacity-100 max-h-96 overflow-visible"
+        leave-to-class="opacity-0 max-h-0 overflow-hidden"
+      >
+        <div v-if="task.action_kind === 'game-command'" class="flex max-w-lg flex-col gap-4">
+          <label for="command" class="flex flex-col gap-2"
+            ><span class="text-lg font-bold text-contrast">
+              Command <span class="text-brand-red">*</span>
+            </span>
+            <span
+              >The command that will be ran when the task is executed. If the command is invalid
+              nothing will happen.</span
+            ></label
+          >
+          <div class="max-w-md">
+            <input
+              id="command"
+              v-model="commandValue"
+              type="text"
+              maxlength="256"
+              placeholder="Enter command to run..."
+              class="input input-bordered"
+              required
+            />
+          </div>
+        </div>
+      </Transition>
+
+      <div class="flex max-w-lg flex-col gap-4">
+        <label for="warn_msg" class="flex flex-col gap-2"
+          ><span class="text-lg font-bold text-contrast">
+            Warning Command
+            <span
+              v-if="task.warn_intervals && task.warn_intervals.length > 0"
+              class="text-brand-red"
+              >*</span
+            >
+          </span>
+          <span
+            >You can use <code>{}</code> to insert the time until the task is executed. If the
+            command is invalid nothing will happen.</span
+          ></label
+        >
+        <div class="max-w-md">
+          <input
+            id="warn_msg"
+            v-model="task.warn_msg"
+            type="text"
+            maxlength="128"
+            :placeholder="`/tellraw @a \u0022Restarting in {}!\u0022`"
+            class="input input-bordered max-w-md"
+          />
+        </div>
+      </div>
+
+      <div class="flex max-w-lg flex-col gap-4">
+        <label for="warn_msg" class="flex flex-col gap-2"
+          ><span class="text-lg font-bold text-contrast">Warning Intervals</span>
+          <span
+            >When, at the time before the scheduled task is executed, should the warning command be
+            executed?</span
+          ></label
+        >
+        <div class="flex flex-row flex-wrap gap-4">
+          <Chips
+            v-model="task.warn_intervals"
+            :items="[5, 15, 30, 60, 120, 300, 600]"
+            multi
+            :never-empty="false"
+            :format-label="formatWarningIntervalLabel"
+          />
+        </div>
+      </div>
+
+      <div class="mt-2 flex max-w-md gap-2">
+        <ButtonStyled color="brand">
+          <button :disabled="!canSave" @click="saveTask">
+            <SaveIcon />
+            Save
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button :disabled="loading" @click="closeModal">
+            <XIcon />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import type { Schedule, ServerSchedule, ActionKind } from "@modrinth/utils";
+import { ref, computed, watch } from "vue";
+import { RadioButtons, TimePicker, Chips, ButtonStyled, NewModal } from "@modrinth/ui";
+import { ClockIcon, CodeIcon, SaveIcon, XIcon, UnknownIcon } from "@modrinth/assets";
+import { toString as cronToString } from "cronstrue";
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+
+const props = defineProps<{ server: ModrinthServer }>();
+
+const modal = ref<InstanceType<typeof NewModal>>();
+const loading = ref(false);
+const error = ref<string | null>(null);
+const task = ref<Partial<ServerSchedule | Schedule>>({});
+const isNew = ref(true);
+const originalTaskId = ref<number | null>(null);
+
+const scheduleType = ref<"daily" | "custom">("daily");
+const dayInterval = ref("1");
+const selectedTime = ref({ hour: "9", minute: "0" });
+const customCron = ref("0 0 9 * * *");
+const actionKinds: ActionKind[] = ["restart", "game-command"];
+
+const commandValue = computed({
+  get() {
+    return task.value.options && "command" in task.value.options ? task.value.options.command : "";
+  },
+  set(val: string) {
+    if (task.value.options && "command" in task.value.options) {
+      task.value.options.command = val;
+    } else if (task.value.action_kind === "game-command") {
+      task.value.options = { command: val };
+    }
+  },
+});
+
+const cronString = computed(() => {
+  if (scheduleType.value === "custom") {
+    return customCron.value.trim();
+  }
+  const minute = selectedTime.value.minute === "" ? "0" : selectedTime.value.minute;
+  const hour = selectedTime.value.hour === "" ? "0" : selectedTime.value.hour;
+  const days = dayInterval.value === "" || Number(dayInterval.value) < 1 ? "1" : dayInterval.value;
+  if (days === "1") {
+    return `0 ${minute} ${hour} * * *`;
+  } else {
+    return `0 ${minute} ${hour} */${days} * *`;
+  }
+});
+
+const CRON_REGEX =
+  /^\s*([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s*$/;
+
+const isValidCron = computed(() => {
+  const cronToTest = scheduleType.value === "custom" ? customCron.value.trim() : cronString.value;
+
+  if (!CRON_REGEX.test(cronToTest)) {
+    return false;
+  }
+
+  if (scheduleType.value === "custom") {
+    try {
+      const parts = cronToTest.split(/\s+/);
+      if (parts.length === 6) {
+        cronToString(parts.slice(1).join(" "));
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  return true;
+});
+
+const isValidGameCommand = computed(() => {
+  if (task.value.action_kind === "game-command") {
+    return commandValue.value && commandValue.value.trim().length > 0;
+  }
+  return true;
+});
+
+const isValidWarningCommand = computed(() => {
+  if (task.value.warn_intervals && task.value.warn_intervals.length > 0) {
+    return task.value.warn_msg && task.value.warn_msg.trim().length > 0;
+  }
+  return true;
+});
+
+const canSave = computed(() => {
+  return (
+    !loading.value &&
+    task.value.title &&
+    task.value.title.trim().length > 0 &&
+    isValidCron.value &&
+    isValidGameCommand.value &&
+    isValidWarningCommand.value
+  );
+});
+
+const humanReadableDescription = computed<string | undefined>(() => {
+  if (!isValidCron.value && scheduleType.value === "custom") return undefined;
+  if (scheduleType.value === "custom") {
+    try {
+      const parts = customCron.value.trim().split(/\s+/);
+      if (parts.length === 6) {
+        return cronToString(parts.slice(1).join(" "));
+      }
+      return "Invalid cron expression";
+    } catch {
+      return "Invalid cron expression";
+    }
+  }
+  const minute = selectedTime.value.minute === "" ? "0" : selectedTime.value.minute;
+  const hour = selectedTime.value.hour === "" ? "0" : selectedTime.value.hour;
+  const daysNum = Number(dayInterval.value || "1");
+  const timeStr = `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
+  if (daysNum <= 1) {
+    return `Every day at ${timeStr}`;
+  } else {
+    return `Every ${daysNum} days at ${timeStr}`;
+  }
+});
+
+function formatWarningIntervalLabel(seconds: number): string {
+  if (seconds < 60) {
+    return `${seconds}s`;
+  } else {
+    const minutes = Math.floor(seconds / 60);
+    return `${minutes}m`;
+  }
+}
+
+function onDayIntervalInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  let value = input.value.replace(/\D/g, "");
+
+  if (value === "") {
+    dayInterval.value = "";
+    return;
+  }
+
+  if (value.length > 1 && value.startsWith("0")) {
+    value = value.replace(/^0+/, "");
+  }
+
+  const num = parseInt(value);
+
+  if (num < 1) {
+    dayInterval.value = "1";
+  } else if (num > 365) {
+    dayInterval.value = "365";
+  } else {
+    dayInterval.value = String(num);
+  }
+}
+
+function resetForm() {
+  task.value = {
+    title: "",
+    action_kind: "restart",
+    options: {},
+    enabled: true,
+    warn_msg: '/tellraw @a "Restarting in {}!"',
+    warn_intervals: [],
+  };
+  scheduleType.value = "daily";
+  dayInterval.value = "1";
+  selectedTime.value = { hour: "9", minute: "0" };
+  customCron.value = "0 0 9 * * *";
+  isNew.value = true;
+  originalTaskId.value = null;
+  error.value = null;
+  if (isValidCron.value) {
+    task.value.every = cronString.value;
+  }
+}
+
+function loadTaskData(taskData: ServerSchedule | Schedule) {
+  task.value = { ...taskData };
+  isNew.value = false;
+  originalTaskId.value = "id" in taskData ? taskData.id : null;
+
+  if (task.value.every && typeof task.value.every === "string") {
+    const parts = task.value.every.split(/\s+/);
+    if (parts.length === 6) {
+      const second = parts[0];
+      const minute = parts[1];
+      const hour = parts[2];
+      const dayOfMonth = parts[3];
+
+      if (second === "0" && dayOfMonth.startsWith("*/")) {
+        scheduleType.value = "daily";
+        dayInterval.value = dayOfMonth.substring(2);
+        selectedTime.value = { hour, minute };
+      } else if (second === "0" && dayOfMonth === "*" && parts[4] === "*" && parts[5] === "*") {
+        scheduleType.value = "daily";
+        dayInterval.value = "1";
+        selectedTime.value = { hour, minute };
+      } else {
+        scheduleType.value = "custom";
+        customCron.value = task.value.every;
+      }
+    } else if (parts.length === 5) {
+      const minute = parts[0];
+      const hour = parts[1];
+      const dayOfMonth = parts[2];
+
+      if (dayOfMonth.startsWith("*/")) {
+        scheduleType.value = "daily";
+        dayInterval.value = dayOfMonth.substring(2);
+        selectedTime.value = { hour, minute };
+      } else if (dayOfMonth === "*" && parts[3] === "*" && parts[4] === "*") {
+        scheduleType.value = "daily";
+        dayInterval.value = "1";
+        selectedTime.value = { hour, minute };
+      } else {
+        scheduleType.value = "custom";
+        customCron.value = `0 ${task.value.every}`;
+      }
+    } else {
+      scheduleType.value = "custom";
+      customCron.value = task.value.every;
+    }
+  }
+}
+
+function show(taskData?: ServerSchedule | Schedule) {
+  if (taskData) {
+    loadTaskData(taskData);
+  } else {
+    resetForm();
+  }
+  modal.value?.show();
+}
+
+function closeModal() {
+  modal.value?.hide();
+}
+
+function onModalHide() {
+  // Reset form when modal is hidden
+  resetForm();
+}
+
+async function saveTask() {
+  loading.value = true;
+  error.value = null;
+
+  if (isValidCron.value) {
+    task.value.every = cronString.value;
+  } else {
+    error.value = "Cannot save with invalid cron expression.";
+    loading.value = false;
+    return;
+  }
+
+  try {
+    if (isNew.value) {
+      const scheduleToCreate: Schedule = {
+        title: task.value.title || "",
+        every: task.value.every!,
+        action_kind: task.value.action_kind!,
+        options: task.value.options!,
+        enabled: task.value.enabled !== undefined ? task.value.enabled : true,
+        warn_msg: task.value.warn_msg !== undefined ? task.value.warn_msg : "",
+        warn_intervals: task.value.warn_intervals || [],
+      };
+      await props.server.scheduling.createTask(scheduleToCreate);
+      closeModal();
+    } else if (originalTaskId.value != null) {
+      await props.server.scheduling.editTask(originalTaskId.value, task.value);
+      closeModal();
+    }
+  } catch (e) {
+    error.value = (e as Error).message || "Failed to save task.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch([cronString, isValidCron], ([cron, valid]) => {
+  if (valid) {
+    task.value.every = cron;
+  }
+});
+
+watch(
+  () => task.value.action_kind,
+  (kind) => {
+    if (kind === "game-command") {
+      if (
+        !task.value.options ||
+        typeof task.value.options !== "object" ||
+        !("command" in task.value.options)
+      ) {
+        task.value.options = { command: "" };
+      }
+    } else {
+      task.value.options = {};
+    }
+  },
+  { immediate: true },
+);
+
+defineExpose({
+  show,
+  hide: closeModal,
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/frontend/src/composables/servers/modules/scheduling.ts b/apps/frontend/src/composables/servers/modules/scheduling.ts
index 491869e7d..e8c2cfbdf 100644
--- a/apps/frontend/src/composables/servers/modules/scheduling.ts
+++ b/apps/frontend/src/composables/servers/modules/scheduling.ts
@@ -5,41 +5,76 @@ import { ServerModule } from "./base.ts";
 export class SchedulingModule extends ServerModule {
   tasks: ServerSchedule[] = [];
 
+  private optimisticUpdate(action: () => void): () => void {
+    const originalTasks = [...this.tasks];
+    action();
+    return () => {
+      this.tasks = originalTasks;
+    };
+  }
+
   async fetch(): Promise<void> {
-    const response = await useServersFetch<{ items: ServerSchedule[] }>(
-      `servers/${this.serverId}/options/schedules`,
+    const response = await useServersFetch<{ schedules: { quota: 32; items: ServerSchedule[] } }>(
+      `servers/${this.serverId}/options`,
       { version: 1 },
     );
-    this.tasks = response.items;
+    this.tasks = response.schedules.items;
   }
 
   async deleteTask(task: ServerSchedule): Promise<void> {
-    await useServersFetch(`servers/${this.serverId}/options/schedules/${task.id}`, {
-      method: "DELETE",
-      version: 1,
+    const rollback = this.optimisticUpdate(() => {
+      this.tasks = this.tasks.filter((t) => t.id !== task.id);
     });
-    this.tasks = this.tasks.filter((t) => t.id !== task.id);
+
+    try {
+      await useServersFetch(`servers/${this.serverId}/options/schedules/${task.id}`, {
+        method: "DELETE",
+        version: 1,
+      });
+    } catch (error) {
+      rollback();
+      throw error;
+    }
   }
 
   async createTask(task: Schedule): Promise<number> {
-    const response = await useServersFetch<{ id: number }>(
-      `servers/${this.serverId}/options/schedules`,
-      {
-        method: "POST",
-        body: task,
-        version: 1,
-      },
-    );
-    await this.fetch();
-    return response.id;
+    const rollback = this.optimisticUpdate(() => {});
+
+    try {
+      const response = await useServersFetch<{ id: number }>(
+        `servers/${this.serverId}/options/schedules`,
+        {
+          method: "POST",
+          body: task,
+          version: 1,
+        },
+      );
+
+      this.tasks.push({ ...task, id: response.id } as ServerSchedule);
+      return response.id;
+    } catch (error) {
+      rollback();
+      throw error;
+    }
   }
 
   async editTask(taskId: number, updatedTask: Partial<Schedule>): Promise<void> {
-    await useServersFetch(`servers/${this.serverId}/options/schedules/${taskId}`, {
-      method: "PATCH",
-      body: updatedTask,
-      version: 1,
+    const rollback = this.optimisticUpdate(() => {
+      const taskIndex = this.tasks.findIndex((t) => t.id === taskId);
+      if (taskIndex !== -1) {
+        this.tasks[taskIndex] = { ...this.tasks[taskIndex], ...updatedTask };
+      }
     });
-    await this.fetch();
+
+    try {
+      await useServersFetch(`servers/${this.serverId}/options/schedules/${taskId}`, {
+        method: "PATCH",
+        body: updatedTask,
+        version: 1,
+      });
+    } catch (error) {
+      rollback();
+      throw error;
+    }
   }
 }
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/scheduling/[taskId].vue b/apps/frontend/src/pages/servers/manage/[id]/options/scheduling/[taskId].vue
deleted file mode 100644
index 51cc64da4..000000000
--- a/apps/frontend/src/pages/servers/manage/[id]/options/scheduling/[taskId].vue
+++ /dev/null
@@ -1,441 +0,0 @@
-<template>
-  <div class="relative h-full w-full overflow-y-auto">
-    <div class="flex h-full w-full flex-col">
-      <div class="p-2 pt-0">
-        <section v-if="error" class="universal-card">
-          <h2>An error occurred whilst opening the task editor.</h2>
-          <p>{{ error }}</p>
-        </section>
-        <section v-else class="universal-card">
-          <h2>{{ isNew ? "New scheduled task" : "Editing scheduled task" }}</h2>
-          <p class="mb-4">
-            {{
-              isNew
-                ? "Create a new scheduled task to automatically perform actions at specific times."
-                : "Modify this scheduled task's settings, timing, and actions."
-            }}
-          </p>
-
-          <div class="mb-4 flex max-w-md flex-col gap-2">
-            <label for="title">
-              <span class="text-lg font-semibold text-contrast">
-                Title <span class="text-brand-red">*</span>
-              </span>
-            </label>
-            <input
-              id="title"
-              v-model="task.title"
-              type="text"
-              maxlength="64"
-              placeholder="Enter task title..."
-              autocomplete="off"
-              class="input input-bordered"
-              required
-            />
-          </div>
-
-          <div class="mb-4 flex flex-col gap-2">
-            <label><h3>Schedule Type</h3></label>
-            <RadioButtons v-model="scheduleType" :items="['daily', 'custom']" class="mb-2">
-              <template #default="{ item }">
-                <span class="flex items-center gap-2">
-                  <ClockIcon v-if="item === 'daily'" class="size-5" />
-                  <CodeIcon v-else class="size-5" />
-                  <span>{{
-                    item === "daily" ? "Every X day(s) at specific time" : "Custom cron expression"
-                  }}</span>
-                </span>
-              </template>
-            </RadioButtons>
-          </div>
-
-          <div
-            v-if="scheduleType === 'daily'"
-            class="card mb-4 flex max-w-md flex-row gap-16 rounded-lg !bg-bg p-4"
-          >
-            <div class="flex flex-col gap-2">
-              <label for="dayInterval" class="text-md font-medium">Every X day(s)</label>
-              <div class="flex items-center gap-2">
-                <input
-                  id="dayInterval"
-                  v-model="dayInterval"
-                  type="text"
-                  inputmode="numeric"
-                  maxlength="3"
-                  class="input input-bordered w-20"
-                  placeholder="1"
-                  @input="onDayIntervalInput"
-                />
-                <span class="text-muted-foreground text-sm">day(s)</span>
-              </div>
-            </div>
-            <div class="flex flex-col gap-2">
-              <label class="text-md font-medium">At time</label>
-              <TimePicker v-model="selectedTime" placeholder="Select time" />
-            </div>
-          </div>
-
-          <div
-            v-if="scheduleType === 'custom'"
-            class="card mb-4 flex max-w-md flex-col gap-2 rounded-lg !bg-bg p-4"
-          >
-            <label for="customCron" class="text-md font-medium"
-              >Cron Expression
-              <nuxt-link
-                v-tooltip="
-                  `Click to read more about what cron expressions are, and how to create them.`
-                "
-                class="align-middle text-link"
-                target="_blank"
-                to="https://www.geeksforgeeks.org/writing-cron-expressions-for-scheduling-tasks/"
-                ><UnknownIcon class="size-4" />
-              </nuxt-link>
-            </label>
-            <input
-              id="customCron"
-              v-model="customCron"
-              type="text"
-              class="input input-bordered font-mono"
-              placeholder="0 0 9 * * *"
-            />
-            <div v-if="!isValidCron" class="text-xs text-brand-red">
-              Invalid cron format. Please use 6 space-separated values (e.g.,
-              <code>second minute hour day month day-of-week</code>).
-            </div>
-            <div v-else class="text-xs">
-              {{ humanReadableDescription }}
-            </div>
-          </div>
-
-          <div class="mb-4 flex max-w-md flex-col gap-2">
-            <label for="action_kind"><h3>Action</h3></label>
-            <RadioButtons v-model="task.action_kind" :items="actionKinds" class="mb-2">
-              <template #default="{ item }">
-                <span>{{ item === "restart" ? "Restart server" : "Run game command" }}</span>
-              </template>
-            </RadioButtons>
-          </div>
-
-          <div v-if="task.action_kind === 'game-command'" class="mb-4 flex max-w-md flex-col gap-2">
-            <label for="command"><h3>Command</h3></label>
-            <input
-              id="command"
-              v-model="commandValue"
-              type="text"
-              maxlength="256"
-              placeholder="Enter command to run..."
-              class="input input-bordered"
-            />
-          </div>
-
-          <div class="mb-4 flex max-w-md flex-col gap-2">
-            <label for="warn_msg"
-              ><h3>Warning Message</h3>
-              <p>
-                You can use <code>{}</code> to insert the time until the task is executed.
-              </p></label
-            >
-            <input
-              id="warn_msg"
-              v-model="task.warn_msg"
-              type="text"
-              maxlength="128"
-              :placeholder="`/tellraw @a \u0022Restarting in {}!\u0022`"
-              class="input input-bordered"
-            />
-          </div>
-
-          <div class="mt-6 flex max-w-md gap-2">
-            <ButtonStyled color="brand">
-              <button :disabled="loading || !isValidCron || !task.title" @click="saveTask">
-                <SaveIcon />
-                Save
-              </button>
-            </ButtonStyled>
-            <ButtonStyled>
-              <button
-                :disabled="loading"
-                @click="() => router.push(`/servers/manage/${route.params.id}/options/scheduling`)"
-              >
-                <XIcon />
-                Cancel
-              </button>
-            </ButtonStyled>
-          </div>
-        </section>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Schedule, ServerSchedule, ActionKind } from "@modrinth/utils";
-import { ref, computed, onBeforeMount, watch } from "vue";
-import RadioButtons from "@modrinth/ui/src/components/base/RadioButtons.vue";
-import TimePicker from "@modrinth/ui/src/components/base/TimePicker.vue";
-import { ButtonStyled } from "@modrinth/ui";
-import { ClockIcon, CodeIcon, SaveIcon, XIcon, UnknownIcon } from "@modrinth/assets";
-import { toString as cronToString } from "cronstrue";
-import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
-import { useRoute, useRouter } from "#imports";
-
-const props = defineProps<{ server: ModrinthServer }>();
-const route = useRoute();
-const router = useRouter();
-
-const isNew = computed(() => route.params.taskId === "new");
-const taskId = computed(() => (isNew.value ? null : Number(route.params.taskId)));
-const loading = ref(false);
-const error = ref<string | null>(null);
-const task = ref<Partial<ServerSchedule | Schedule>>({});
-
-const scheduleType = ref<"daily" | "custom">("daily");
-const dayInterval = ref("1");
-const selectedTime = ref({ hour: "9", minute: "0" });
-const customCron = ref("0 0 9 * * *");
-const actionKinds: ActionKind[] = ["restart", "game-command"];
-
-const commandValue = computed({
-  get() {
-    return task.value.options && "command" in task.value.options ? task.value.options.command : "";
-  },
-  set(val: string) {
-    if (task.value.options && "command" in task.value.options) {
-      task.value.options.command = val;
-    } else if (task.value.action_kind === "game-command") {
-      task.value.options = { command: val };
-    }
-  },
-});
-
-const cronString = computed(() => {
-  if (scheduleType.value === "custom") {
-    return customCron.value.trim();
-  }
-  const minute = selectedTime.value.minute === "" ? "0" : selectedTime.value.minute;
-  const hour = selectedTime.value.hour === "" ? "0" : selectedTime.value.hour;
-  const days = dayInterval.value === "" || Number(dayInterval.value) < 1 ? "1" : dayInterval.value;
-  if (days === "1") {
-    return `0 ${minute} ${hour} * * *`;
-  } else {
-    return `0 ${minute} ${hour} */${days} * *`;
-  }
-});
-
-const CRON_REGEX =
-  /^\s*([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s+([0-9*/,-]+)\s*$/;
-
-const isValidCron = computed(() => {
-  const cronToTest = scheduleType.value === "custom" ? customCron.value.trim() : cronString.value;
-
-  if (!CRON_REGEX.test(cronToTest)) {
-    return false;
-  }
-
-  if (scheduleType.value === "custom") {
-    try {
-      const parts = cronToTest.split(/\s+/);
-      if (parts.length === 6) {
-        cronToString(parts.slice(1).join(" "));
-      }
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  return true;
-});
-
-const humanReadableDescription = computed<string | undefined>(() => {
-  if (!isValidCron.value && scheduleType.value === "custom") return undefined;
-  if (scheduleType.value === "custom") {
-    try {
-      const parts = customCron.value.trim().split(/\s+/);
-      if (parts.length === 6) {
-        return cronToString(parts.slice(1).join(" "));
-      }
-      return "Invalid cron expression";
-    } catch {
-      return "Invalid cron expression";
-    }
-  }
-  const minute = selectedTime.value.minute === "" ? "0" : selectedTime.value.minute;
-  const hour = selectedTime.value.hour === "" ? "0" : selectedTime.value.hour;
-  const daysNum = Number(dayInterval.value || "1");
-  const timeStr = `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
-  if (daysNum <= 1) {
-    return `Every day at ${timeStr}`;
-  } else {
-    return `Every ${daysNum} days at ${timeStr}`;
-  }
-});
-
-function onDayIntervalInput(event: Event) {
-  const input = event.target as HTMLInputElement;
-  let value = input.value.replace(/\D/g, "");
-
-  if (value === "") {
-    dayInterval.value = "";
-    return;
-  }
-
-  if (value.length > 1 && value.startsWith("0")) {
-    value = value.replace(/^0+/, "");
-  }
-
-  const num = parseInt(value);
-
-  if (num < 1) {
-    dayInterval.value = "1";
-  } else if (num > 365) {
-    dayInterval.value = "365";
-  } else {
-    dayInterval.value = String(num);
-  }
-}
-
-watch([cronString, isValidCron], ([cron, valid]) => {
-  if (valid) {
-    task.value.every = cron;
-  }
-});
-
-watch(
-  () => task.value.action_kind,
-  (kind) => {
-    if (kind === "game-command") {
-      if (
-        !task.value.options ||
-        typeof task.value.options !== "object" ||
-        !("command" in task.value.options)
-      ) {
-        task.value.options = { command: "" };
-      }
-    } else {
-      task.value.options = {};
-    }
-  },
-  { immediate: true },
-);
-
-onBeforeMount(async () => {
-  if (!isNew.value && taskId.value != null) {
-    loading.value = true;
-    error.value = null;
-    try {
-      if (!props.server.scheduling.tasks.length) {
-        await props.server.scheduling.fetch();
-      }
-      const found = props.server.scheduling.tasks.find((t) => t.id === taskId.value);
-      if (found) {
-        task.value = { ...found };
-        if (task.value.every && typeof task.value.every === "string") {
-          const parts = task.value.every.split(/\s+/);
-          if (parts.length === 6) {
-            const second = parts[0];
-            const minute = parts[1];
-            const hour = parts[2];
-            const dayOfMonth = parts[3];
-
-            if (second === "0" && dayOfMonth.startsWith("*/")) {
-              scheduleType.value = "daily";
-              dayInterval.value = dayOfMonth.substring(2);
-              selectedTime.value = { hour, minute };
-            } else if (
-              second === "0" &&
-              dayOfMonth === "*" &&
-              parts[4] === "*" &&
-              parts[5] === "*"
-            ) {
-              scheduleType.value = "daily";
-              dayInterval.value = "1";
-              selectedTime.value = { hour, minute };
-            } else {
-              scheduleType.value = "custom";
-              customCron.value = task.value.every;
-            }
-          } else if (parts.length === 5) {
-            const minute = parts[0];
-            const hour = parts[1];
-            const dayOfMonth = parts[2];
-
-            if (dayOfMonth.startsWith("*/")) {
-              scheduleType.value = "daily";
-              dayInterval.value = dayOfMonth.substring(2);
-              selectedTime.value = { hour, minute };
-            } else if (dayOfMonth === "*" && parts[3] === "*" && parts[4] === "*") {
-              scheduleType.value = "daily";
-              dayInterval.value = "1";
-              selectedTime.value = { hour, minute };
-            } else {
-              scheduleType.value = "custom";
-              customCron.value = `0 ${task.value.every}`;
-            }
-          } else {
-            scheduleType.value = "custom";
-            customCron.value = task.value.every;
-          }
-        }
-      } else {
-        error.value = "Task not found.";
-      }
-    } catch (e) {
-      error.value = (e as Error).message || "Failed to load task.";
-    } finally {
-      loading.value = false;
-    }
-  } else {
-    task.value = {
-      title: "",
-      action_kind: "restart",
-      options: {},
-      enabled: true,
-      warn_msg: '/tellraw @a "Restarting in {}!"',
-      warn_intervals: [],
-    };
-    scheduleType.value = "daily";
-    dayInterval.value = "1";
-    selectedTime.value = { hour: "9", minute: "0" };
-    customCron.value = "0 0 9 * * *";
-    if (isValidCron.value) {
-      task.value.every = cronString.value;
-    }
-  }
-});
-
-async function saveTask() {
-  loading.value = true;
-  error.value = null;
-
-  if (isValidCron.value) {
-    task.value.every = cronString.value;
-  } else {
-    error.value = "Cannot save with invalid cron expression.";
-    loading.value = false;
-    return;
-  }
-
-  try {
-    if (isNew.value) {
-      const scheduleToCreate: Schedule = {
-        title: task.value.title || "",
-        every: task.value.every!,
-        action_kind: task.value.action_kind!,
-        options: task.value.options!,
-        enabled: task.value.enabled !== undefined ? task.value.enabled : true,
-        warn_msg: task.value.warn_msg !== undefined ? task.value.warn_msg : "",
-        warn_intervals: task.value.warn_intervals || [],
-      };
-      await props.server.scheduling.createTask(scheduleToCreate);
-    } else if (taskId.value != null) {
-      await props.server.scheduling.editTask(taskId.value, task.value as Partial<Schedule>);
-    }
-    router.push(`/servers/manage/${route.params.id}/options/scheduling`);
-  } catch (e) {
-    error.value = (e as Error).message || "Failed to save task.";
-  } finally {
-    loading.value = false;
-  }
-}
-</script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/scheduling/index.vue b/apps/frontend/src/pages/servers/manage/[id]/options/scheduling/index.vue
index 7c305d061..f6ae44c2a 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/scheduling/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/scheduling/index.vue
@@ -1,25 +1,20 @@
 <template>
+  <EditScheduledTaskModal ref="modal" :server="server"></EditScheduledTaskModal>
   <div class="relative h-full w-full overflow-y-auto">
     <div class="flex h-full w-full flex-col">
       <section class="universal-card">
         <div class="mb-6 flex items-center justify-between">
           <div class="flex h-full flex-col justify-center">
-            <h3 class="font-semibold leading-tight">Task Scheduling</h3>
-            <p v-if="tasks.length < 1" class="mt-1 text-secondary">
+            <h2 class="m-0 text-lg font-bold text-contrast">Task scheduling</h2>
+            <span v-if="tasks.length < 1">
               No scheduled tasks yet. Click the button to create your first task.
-            </p>
-            <p v-else class="mt-1 text-secondary">
-              You can manage multiple tasks at once by selecting them below.
-            </p>
+            </span>
+            <span v-else>You can manage multiple tasks at once by selecting them below.</span>
           </div>
           <div>
-            <NuxtLink
-              :to="`/servers/manage/${route.params.id}/options/scheduling/new`"
-              class="iconified-button brand-button"
+            <ButtonStyled color="green"
+              ><button @click="modal?.show()"><PlusIcon /> Create task</button></ButtonStyled
             >
-              <PlusIcon />
-              Create Task
-            </NuxtLink>
           </div>
         </div>
 
@@ -28,13 +23,13 @@
             <ButtonStyled>
               <button :disabled="selectedTasks.length === 0" @click="handleBulkToggle">
                 <ToggleRightIcon />
-                Toggle Selected
+                Toggle delected
               </button>
             </ButtonStyled>
             <ButtonStyled color="red">
               <button :disabled="selectedTasks.length === 0" @click="handleBulkDelete">
                 <TrashIcon />
-                Delete Selected
+                Delete selected
               </button>
             </ButtonStyled>
             <div class="push-right">
@@ -134,23 +129,12 @@
               <div>
                 <div class="flex gap-1">
                   <ButtonStyled icon-only circular>
-                    <NuxtLink
-                      v-tooltip="'Edit task'"
-                      :to="`/servers/manage/${route.params.id}/options/scheduling/${task.id}`"
-                    >
+                    <button :v-tooltip="'Edit Task'" @click="modal?.show(task)">
                       <EditIcon />
-                    </NuxtLink>
+                    </button>
                   </ButtonStyled>
                   <ButtonStyled icon-only circular color="red">
-                    <button
-                      v-tooltip="
-                        task.title === 'Auto Restart'
-                          ? 'You cant delete the automatic restart task.'
-                          : 'Delete task'
-                      "
-                      :disabled="task.title === 'Auto Restart'"
-                      @click="handleTaskDelete(task)"
-                    >
+                    <button @click="handleTaskDelete(task)">
                       <TrashIcon />
                     </button>
                   </ButtonStyled>
@@ -181,6 +165,7 @@ import { Toggle, Checkbox, RaisedBadge, ButtonStyled } from "@modrinth/ui";
 import cronstrue from "cronstrue";
 import type { ServerSchedule } from "@modrinth/utils";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import EditScheduledTaskModal from "~/components/ui/servers/scheduling/EditScheduledTaskModal.vue";
 
 const props = defineProps<{
   server: ModrinthServer;
@@ -195,6 +180,7 @@ onBeforeMount(async () => {
 const selectedTasks = ref<ServerSchedule[]>([]);
 const sortBy = ref("Name");
 const descending = ref(false);
+const modal = ref<typeof EditScheduledTaskModal>();
 
 const tasks = computed(() => props.server.scheduling.tasks as ServerSchedule[]);
 
diff --git a/packages/ui/src/components/base/Chips.vue b/packages/ui/src/components/base/Chips.vue
index 382ce2db9..c744be313 100644
--- a/packages/ui/src/components/base/Chips.vue
+++ b/packages/ui/src/components/base/Chips.vue
@@ -4,10 +4,10 @@
       v-for="item in items"
       :key="formatLabel(item)"
       class="btn"
-      :class="{ selected: selected === item, capitalize: capitalize }"
+      :class="{ selected: isSelected(item), capitalize: capitalize }"
       @click="toggleItem(item)"
     >
-      <CheckIcon v-if="selected === item" />
+      <CheckIcon v-if="isSelected(item)" />
       <span>{{ formatLabel(item) }}</span>
     </Button>
   </div>
@@ -23,26 +23,48 @@ const props = withDefaults(
     formatLabel?: (item: T) => string
     neverEmpty?: boolean
     capitalize?: boolean
+    multi?: boolean
   }>(),
   {
     neverEmpty: true,
     // Intentional any type, as this default should only be used for primitives (string or number)
     formatLabel: (item) => item.toString(),
     capitalize: true,
+    multi: false,
   },
 )
-const selected = defineModel<T | null>()
+const selected = defineModel<T | null | T[]>()
 
 // If one always has to be selected, default to the first one
 if (props.items.length > 0 && props.neverEmpty && !selected.value) {
-  selected.value = props.items[0]
+  selected.value = props.multi ? [props.items[0]] : props.items[0]
+}
+
+function isSelected(item: T): boolean {
+  if (props.multi) {
+    return Array.isArray(selected.value) && selected.value.includes(item)
+  }
+  return selected.value === item
 }
 
 function toggleItem(item: T) {
-  if (selected.value === item && !props.neverEmpty) {
-    selected.value = null
+  if (props.multi) {
+    const currentSelection = Array.isArray(selected.value) ? selected.value : []
+    const isCurrentlySelected = currentSelection.includes(item)
+
+    if (isCurrentlySelected) {
+      if (!props.neverEmpty || currentSelection.length > 1) {
+        selected.value = currentSelection.filter((i) => i !== item)
+      }
+    } else {
+      selected.value = [...currentSelection, item]
+    }
   } else {
-    selected.value = item
+    if (selected.value === item && !props.neverEmpty) {
+      selected.value = null
+    } else {
+      selected.value = item
+    }
   }
 }
 </script>
diff --git a/packages/ui/src/components/base/TimePicker.vue b/packages/ui/src/components/base/TimePicker.vue
index 7d78b6269..9c7e4512f 100644
--- a/packages/ui/src/components/base/TimePicker.vue
+++ b/packages/ui/src/components/base/TimePicker.vue
@@ -14,7 +14,7 @@
     >
       <button>
         <ClockIcon class="h-4 w-4" />
-        {{ modelValue ? formatTime(modelValue) : placeholder }}
+        {{ modelValue ? formatTime(modelValue) : placeholder }} {{ useUtcValues ? 'UTC' : '' }}
       </button>
     </ButtonStyled>
 
@@ -100,31 +100,78 @@ interface Props {
   modelValue?: TimeValue
   disabled?: boolean
   placeholder?: string
+  useUtcValues?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => ({ hour: '12', minute: '00' }),
   disabled: false,
   placeholder: 'Select time',
+  useUtcValues: false,
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: TimeValue]
 }>()
 
+function utcToLocal(utcTime: TimeValue): TimeValue {
+  const today = new Date()
+  const utcHour = utcTime.hour === '' ? 0 : parseInt(utcTime.hour)
+  const utcMinute = utcTime.minute === '' ? 0 : parseInt(utcTime.minute)
+
+  const utcDate = new Date(
+    Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate(), utcHour, utcMinute),
+  )
+
+  return {
+    hour: utcDate.getHours().toString(),
+    minute: utcDate.getMinutes().toString(),
+  }
+}
+
+function localToUtc(localTime: TimeValue): TimeValue {
+  const today = new Date()
+  const localHour = localTime.hour === '' ? 0 : parseInt(localTime.hour)
+  const localMinute = localTime.minute === '' ? 0 : parseInt(localTime.minute)
+
+  const localDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate(),
+    localHour,
+    localMinute,
+  )
+
+  return {
+    hour: localDate.getUTCHours().toString(),
+    minute: localDate.getUTCMinutes().toString(),
+  }
+}
+
+function emitTime(localTime: TimeValue) {
+  const timeToEmit = props.useUtcValues ? localToUtc(localTime) : localTime
+  emit('update:modelValue', timeToEmit)
+}
+
 const dropdown = ref()
 const originalTime = ref<TimeValue>({ hour: '12', minute: '00' })
-const currentTime = reactive<TimeValue>({
-  hour: props.modelValue?.hour || '12',
-  minute: props.modelValue?.minute || '00',
-})
+
+const getInitialTime = (): TimeValue => {
+  const defaultTime = { hour: '12', minute: '00' }
+  if (!props.modelValue) return defaultTime
+
+  return props.useUtcValues ? utcToLocal(props.modelValue) : props.modelValue
+}
+
+const currentTime = reactive<TimeValue>(getInitialTime())
 
 watch(
   () => props.modelValue,
   (newValue) => {
     if (newValue) {
-      currentTime.hour = newValue.hour
-      currentTime.minute = newValue.minute
+      const displayTime = props.useUtcValues ? utcToLocal(newValue) : newValue
+      currentTime.hour = displayTime.hour
+      currentTime.minute = displayTime.minute
     }
   },
   { deep: true },
@@ -165,7 +212,7 @@ function handleHourChange(event: Event) {
   }
 
   currentTime.hour = hour
-  emit('update:modelValue', { ...currentTime })
+  emitTime(currentTime)
 }
 
 function handleMinuteChange(event: Event) {
@@ -178,19 +225,19 @@ function handleMinuteChange(event: Event) {
   }
 
   currentTime.minute = minute
-  emit('update:modelValue', { ...currentTime })
+  emitTime(currentTime)
 }
 
 function handleQuickSelect(hour: string, minute: string) {
   currentTime.hour = hour
   currentTime.minute = minute
-  emit('update:modelValue', { ...currentTime })
+  emitTime(currentTime)
 }
 
 function handleCancel() {
   currentTime.hour = originalTime.value.hour
   currentTime.minute = originalTime.value.minute
-  emit('update:modelValue', { ...originalTime.value })
+  emitTime(originalTime.value)
   dropdown.value?.hide()
 }
 
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index 38e3429f8..285b19df8 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -37,7 +37,7 @@
             </button>
           </ButtonStyled>
         </div>
-        <div class="overflow-y-auto p-6">
+        <div class="modal-content overflow-y-auto p-6">
           <slot> You just lost the game.</slot>
         </div>
       </div>
@@ -237,6 +237,10 @@ function handleKeyDown(event: KeyboardEvent) {
     opacity: 0;
     transition: all 0.2s ease-in-out;
 
+    .modal-content {
+      scrollbar-gutter: stable;
+    }
+
     @media (prefers-reduced-motion) {
       transition: none !important;
     }