From 6264ad41f8cd5c9a57f59b4ca8f315daf0843794 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Fri, 27 Feb 2026 02:03:48 +0100
Subject: [PATCH] fix(nds): remove all top baselines

---
 app/components/Achievements/BottomScreen.vue        |  3 +--
 app/components/Achievements/Notification.vue        |  7 +++++--
 app/components/Achievements/TopScreen.vue           |  7 +++----
 app/components/Common/ConfirmationModal.vue         |  5 ++---
 app/components/Contact/BottomScreen/Buttons.vue     |  3 +--
 app/components/Credits/BottomScreen.vue             |  7 +++----
 app/components/Credits/TopScreen.vue                |  9 ++++-----
 app/components/Home/BottomScreen/Buttons.vue        | 12 ++++--------
 app/components/Intro/BottomScreen/BottomScreen.vue  |  8 +++-----
 .../Projects/BottomScreen/LinkConfirmationPopup.vue |  9 ++++-----
 app/components/Projects/TopScreen/Project.vue       |  9 ++++-----
 .../BottomScreen/Menus/Clock/Achievements.vue       |  6 ++----
 .../Settings/BottomScreen/Menus/Options/2048.vue    |  4 +---
 .../BottomScreen/Menus/Options/RenderingMode.vue    |  3 +--
 .../BottomScreen/Menus/TouchScreen/TapTap.vue       |  3 +--
 .../Settings/BottomScreen/Menus/User/Color.vue      |  3 +--
 .../Settings/BottomScreen/Menus/User/Snake.vue      |  3 +--
 .../Settings/BottomScreen/Menus/User/UserName.vue   |  9 ++++++---
 .../Settings/BottomScreen/NumberInput.vue           |  5 ++---
 app/utils/canvas.ts                                 | 13 ++++++++-----
 20 files changed, 57 insertions(+), 71 deletions(-)

diff --git a/app/components/Achievements/BottomScreen.vue b/app/components/Achievements/BottomScreen.vue
index 0a2393f..1c7fb2d 100644
--- a/app/components/Achievements/BottomScreen.vue
+++ b/app/components/Achievements/BottomScreen.vue
@@ -55,7 +55,6 @@ onRender((ctx) => {
       ? store.outro.stage1Opacity
       : 1;
   ctx.font = "7px NDS7";
-  ctx.textBaseline = "top";
   for (
     let i = ACHIEVEMENTS.length - 1;
     i >= ACHIEVEMENTS_TOP_SCREEN_COUNT;
@@ -83,7 +82,7 @@ onRender((ctx) => {
         ? "???"
         : $t(`achievements.${achievement.id}`).replace("\n", " "),
       ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP,
-      y,
+      y + 7,
     );
   }
 
diff --git a/app/components/Achievements/Notification.vue b/app/components/Achievements/Notification.vue
index 0e4e1f0..c4066b0 100644
--- a/app/components/Achievements/Notification.vue
+++ b/app/components/Achievements/Notification.vue
@@ -87,7 +87,6 @@ onRender((ctx) => {
 
   // text (1 or 2 lines)
   ctx.font = "7px NDS7";
-  ctx.textBaseline = "top";
   ctx.fillStyle = "#282828";
 
   const lines = $t(`achievements.${currentAchievement.value}`).split("\n");
@@ -95,7 +94,11 @@ onRender((ctx) => {
     lines.length === 1 ? NOTIF_Y + PADDING + 4 : NOTIF_Y + PADDING + 1;
 
   for (let i = 0; i < lines.length; i++) {
-    ctx.fillText(lines[i]!, x.value + TEXT_X_OFFSET, textY + i * LINE_HEIGHT);
+    ctx.fillText(
+      lines[i]!,
+      x.value + TEXT_X_OFFSET,
+      textY + i * LINE_HEIGHT + 7,
+    );
   }
 }, 200);
 
diff --git a/app/components/Achievements/TopScreen.vue b/app/components/Achievements/TopScreen.vue
index 77ddb8f..e648c1b 100644
--- a/app/components/Achievements/TopScreen.vue
+++ b/app/components/Achievements/TopScreen.vue
@@ -24,7 +24,6 @@ onRender((ctx) => {
       ? store.outro.stage2Opacity
       : 1;
   ctx.fillStyle = "#ffffff";
-  ctx.textBaseline = "top";
 
   // title
   ctx.font = "10px NDS10";
@@ -32,7 +31,7 @@ onRender((ctx) => {
     ctx,
     $t("achievementsScreen.title"),
     0,
-    ACHIEVEMENTS_HEADER_Y,
+    ACHIEVEMENTS_HEADER_Y + 9,
     LOGICAL_WIDTH,
   );
 
@@ -45,7 +44,7 @@ onRender((ctx) => {
     ctx,
     `${unlockedCount}/${totalCount}`,
     0,
-    ACHIEVEMENTS_HEADER_Y + 13,
+    ACHIEVEMENTS_HEADER_Y + 13 + 7,
     LOGICAL_WIDTH,
   );
 
@@ -105,7 +104,7 @@ onRender((ctx) => {
         ? "???"
         : $t(`achievements.${achievement.id}`).replace("\n", " "),
       ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP,
-      y,
+      y + 7,
     );
   }
 });
diff --git a/app/components/Common/ConfirmationModal.vue b/app/components/Common/ConfirmationModal.vue
index 4463d0e..517dfcb 100644
--- a/app/components/Common/ConfirmationModal.vue
+++ b/app/components/Common/ConfirmationModal.vue
@@ -38,8 +38,7 @@ onRender((ctx) => {
 
   assets.images.common.confirmationModal.draw(ctx, BG_X, BG_Y);
 
-  ctx.font = "16px Pokemon DP Pro";
-  ctx.textBaseline = "top";
+  ctx.font = "10px NDS10";
   ctx.fillStyle = "#ffffff";
 
   const rawText =
@@ -55,7 +54,7 @@ onRender((ctx) => {
       ctx,
       lines[i]!,
       BG_X,
-      textStartY + i * LINE_HEIGHT,
+      textStartY + i * LINE_HEIGHT + 13,
       BG_WIDTH,
     );
   }
diff --git a/app/components/Contact/BottomScreen/Buttons.vue b/app/components/Contact/BottomScreen/Buttons.vue
index 8fe7905..306ae9e 100644
--- a/app/components/Contact/BottomScreen/Buttons.vue
+++ b/app/components/Contact/BottomScreen/Buttons.vue
@@ -116,7 +116,6 @@ onRender((ctx) => {
     ? store.intro.stage3Opacity
     : store.outro.stage1Opacity;
 
-  ctx.textBaseline = "top";
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#515151";
 
@@ -135,7 +134,7 @@ onRender((ctx) => {
     const pressedKey: `${typeof selected.value}Pressed` = `${button}Pressed`;
     assets[isPressed ? pressedKey : button].draw(ctx, x + 1, y + 1);
 
-    ctx.fillText(text, x + 36, y + 11);
+    ctx.fillText(text, x + 36, y + 11 + 9);
   }
 });
 </script>
diff --git a/app/components/Credits/BottomScreen.vue b/app/components/Credits/BottomScreen.vue
index 5cbc412..33649a7 100644
--- a/app/components/Credits/BottomScreen.vue
+++ b/app/components/Credits/BottomScreen.vue
@@ -53,7 +53,6 @@ onRender((ctx) => {
     : store.isOutro
       ? store.outro.stage1Opacity
       : 1;
-  ctx.textBaseline = "top";
 
   for (let i = CREDITS.length - 1; i >= CREDITS_TOP_SCREEN_COUNT; i--) {
     const id = CREDITS[i]!;
@@ -74,7 +73,7 @@ onRender((ctx) => {
       ctx,
       $t(`creditsScreen.${id}.label`),
       0,
-      y,
+      y + 7,
       LOGICAL_WIDTH,
     );
 
@@ -84,7 +83,7 @@ onRender((ctx) => {
       ctx,
       $t(`creditsScreen.${id}.author`),
       0,
-      y + CREDITS_LINE_HEIGHT,
+      y + CREDITS_LINE_HEIGHT + 9,
       LOGICAL_WIDTH,
     );
 
@@ -94,7 +93,7 @@ onRender((ctx) => {
       ctx,
       $t(`creditsScreen.${id}.url`),
       0,
-      y + CREDITS_LINE_HEIGHT * 2,
+      y + CREDITS_LINE_HEIGHT * 2 + 7,
       LOGICAL_WIDTH,
     );
   }
diff --git a/app/components/Credits/TopScreen.vue b/app/components/Credits/TopScreen.vue
index bb5ab7a..432167f 100644
--- a/app/components/Credits/TopScreen.vue
+++ b/app/components/Credits/TopScreen.vue
@@ -17,7 +17,6 @@ onRender((ctx) => {
       ? store.outro.stage2Opacity
       : 1;
   ctx.fillStyle = "#ffffff";
-  ctx.textBaseline = "top";
 
   // title
   ctx.font = "10px NDS10";
@@ -25,7 +24,7 @@ onRender((ctx) => {
     ctx,
     $t("creditsScreen.title"),
     0,
-    CREDITS_HEADER_Y,
+    CREDITS_HEADER_Y + 9,
     LOGICAL_WIDTH,
   );
 
@@ -53,7 +52,7 @@ onRender((ctx) => {
       ctx,
       $t(`creditsScreen.${id}.label`),
       0,
-      y,
+      y + 7,
       LOGICAL_WIDTH,
     );
 
@@ -63,7 +62,7 @@ onRender((ctx) => {
       ctx,
       $t(`creditsScreen.${id}.author`),
       0,
-      y + CREDITS_LINE_HEIGHT,
+      y + CREDITS_LINE_HEIGHT + 9,
       LOGICAL_WIDTH,
     );
 
@@ -73,7 +72,7 @@ onRender((ctx) => {
       ctx,
       $t(`creditsScreen.${id}.url`),
       0,
-      y + CREDITS_LINE_HEIGHT * 2,
+      y + CREDITS_LINE_HEIGHT * 2 + 7,
       LOGICAL_WIDTH,
     );
   }
diff --git a/app/components/Home/BottomScreen/Buttons.vue b/app/components/Home/BottomScreen/Buttons.vue
index ae53441..cfbbfb0 100644
--- a/app/components/Home/BottomScreen/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons.vue
@@ -101,14 +101,12 @@ onRender((ctx) => {
   const projectsText = $t("home.projectsAndExperiences");
   const lines = projectsText.split("\n");
 
-  ctx.textBaseline = "top";
-
   if (lines.length == 1) {
     fillTextHCentered(
       ctx,
       projectsText,
       79,
-      42 + getButtonOffset("projects"),
+      42 + getButtonOffset("projects") + 9,
       140,
     );
   } else {
@@ -116,23 +114,21 @@ onRender((ctx) => {
       ctx,
       lines[0]!,
       82,
-      36 + getButtonOffset("projects"),
+      36 + getButtonOffset("projects") + 9,
       140,
     );
     fillTextHCentered(
       ctx,
       lines[1]!,
       82,
-      36 + getButtonOffset("projects") + 13,
+      36 + getButtonOffset("projects") + 13 + 9,
       140,
     );
   }
-  ctx.textBaseline = "top";
 
   // gba thing
-  ctx.font = "10px NDS10";
   ctx.fillStyle = "#a2a2a2";
-  fillTextHCentered(ctx, $t("home.greeting"), 79, 137, 140);
+  fillTextHCentered(ctx, $t("home.greeting"), 79, 137 + 9, 140);
 });
 </script>
 
diff --git a/app/components/Intro/BottomScreen/BottomScreen.vue b/app/components/Intro/BottomScreen/BottomScreen.vue
index 4db1ec7..c89beea 100644
--- a/app/components/Intro/BottomScreen/BottomScreen.vue
+++ b/app/components/Intro/BottomScreen/BottomScreen.vue
@@ -24,8 +24,6 @@ store.$subscribe((_, state) => {
 });
 
 onRender((ctx) => {
-  ctx.textBaseline = "top";
-
   ctx.fillStyle = "#fbfbfb";
   ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
 
@@ -49,7 +47,7 @@ onRender((ctx) => {
       : 1;
 
   assets.images.intro.warning.draw(ctx, logoX, TITLE_Y - 1);
-  ctx.fillText($t("intro.copyright"), logoX + logoWidth + 3, TITLE_Y);
+  ctx.fillText($t("intro.copyright"), logoX + logoWidth + 3, TITLE_Y + 12);
 
   ctx.letterSpacing = "0px";
 
@@ -57,7 +55,7 @@ onRender((ctx) => {
   ctx.font = "10px NDS10";
   const lines = $t("intro.text").split("\n");
   for (let i = 0, y = TEXT_Y; i < lines.length; i += 1, y += 18)
-    fillTextHCentered(ctx, lines[i]!, 0, y, LOGICAL_WIDTH);
+    fillTextHCentered(ctx, lines[i]!, 0, y + 9, LOGICAL_WIDTH);
 
   // hint
   ctx.font = "10px NDS10";
@@ -66,7 +64,7 @@ onRender((ctx) => {
     : store.isOutro
       ? store.outro.textOpacity
       : hintTextOpacity.value;
-  fillTextHCentered(ctx, $t("intro.hint"), 0, HINT_Y, LOGICAL_WIDTH);
+  fillTextHCentered(ctx, $t("intro.hint"), 0, HINT_Y + 9, LOGICAL_WIDTH);
 
   ctx.globalAlpha = store.isOutro ? store.outro.backgroundOpacity : 0;
   assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
diff --git a/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue b/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
index 4898615..2f8340c 100644
--- a/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
+++ b/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
@@ -117,11 +117,11 @@ const drawTextWithShadow = (
   y: number,
 ) => {
   ctx.fillStyle = "#a2a2aa";
-  ctx.fillText(text, x + 1, y);
-  ctx.fillText(text, x + 1, y + 1);
-  ctx.fillText(text, x, y + 1);
+  ctx.fillText(text, x + 1, y + 12);
+  ctx.fillText(text, x + 1, y + 1 + 12);
+  ctx.fillText(text, x, y + 1 + 12);
   ctx.fillStyle = "#515159";
-  ctx.fillText(text, x, y);
+  ctx.fillText(text, x, y + 12);
 };
 
 onRender((ctx) => {
@@ -135,7 +135,6 @@ onRender((ctx) => {
   // text
   assets.images.projects.bottomScreen.popupTextBackground.draw(ctx, 2, 146);
   ctx.font = "16px Pokemon DP Pro";
-  ctx.textBaseline = "top";
   const displayedText = text.value.slice(
     0,
     Math.floor(textProgress.value * text.value.length),
diff --git a/app/components/Projects/TopScreen/Project.vue b/app/components/Projects/TopScreen/Project.vue
index db3ff32..67157c4 100644
--- a/app/components/Projects/TopScreen/Project.vue
+++ b/app/components/Projects/TopScreen/Project.vue
@@ -12,12 +12,12 @@ const drawTextWithShadow = (
   y: number,
 ) => {
   ctx.fillStyle = color === "white" ? "#505050" : "#a8b8b8";
-  ctx.fillText(text, x + 1, y + 0);
-  ctx.fillText(text, x + 1, y + 1);
-  ctx.fillText(text, x + 0, y + 1);
+  ctx.fillText(text, x + 1, y + 13 + 0);
+  ctx.fillText(text, x + 1, y + 13 + 1);
+  ctx.fillText(text, x + 0, y + 13 + 1);
 
   ctx.fillStyle = color === "white" ? "#f8f8f8" : "#101820";
-  ctx.fillText(text, x, y);
+  ctx.fillText(text, x, y + 13);
 };
 
 const drawTextWithShadow2Lines = (
@@ -58,7 +58,6 @@ const drawTextWithShadow2Lines = (
 onRender((ctx) => {
   assets.images.projects.topScreen.background.draw(ctx, 0, 0);
 
-  ctx.textBaseline = "top";
   ctx.font = "16px Pokemon DP Pro";
 
   const project = store.projects[store.currentProject];
diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue b/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
index b1e8eb1..4550c02 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
@@ -154,7 +154,6 @@ onRender((ctx) => {
   // slash divider
   ctx.globalAlpha = animation.opacity;
   ctx.translate(0, animation.offsetY);
-  ctx.textBaseline = "top";
   ctx.fillStyle = "#515151";
   ctx.fillRect(7 * 16 - 1, 4 * 16 - 1, 16 * 3 + 1, 16 * 3 + 1);
   ctx.fillStyle = achievements.allObtained ? app.color.hex : "#797979";
@@ -164,7 +163,7 @@ onRender((ctx) => {
   ctx.fillStyle = achievements.allObtained
     ? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
     : "#fbfbfb";
-  ctx.fillText("/", 7 * 16 + 3, 4 * 16 + 4);
+  ctx.fillText("/", 7 * 16 + 3, 4 * 16 + 4 + 39);
 });
 
 onRender((ctx) => {
@@ -174,7 +173,6 @@ onRender((ctx) => {
   achievementAssets.smallTrophy.draw(ctx, 131, 6);
 
   ctx.font = "10px NDS10";
-  ctx.textBaseline = "top";
   ctx.fillStyle = "#010101";
 
   const label = `${ICONS.X} ${$t("settings.clock.achievements.viewAll")}`;
@@ -182,7 +180,7 @@ onRender((ctx) => {
     ctx,
     label,
     145,
-    7,
+    7 + 9,
     achievementAssets.viewAllButton.rect.width - 18,
   );
 }, 1000);
diff --git a/app/components/Settings/BottomScreen/Menus/Options/2048.vue b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
index 8e6381c..2899cb6 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/2048.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
@@ -234,8 +234,6 @@ onMounted(() => {
 });
 
 onRender((ctx) => {
-  ctx.textBaseline = "top";
-
   ctx.save();
   ctx.globalAlpha = intro.frameOpacity;
   ctx.translate(BOARD_X, BOARD_Y + intro.frameOffsetY);
@@ -281,7 +279,7 @@ onRender((ctx) => {
       ctx,
       tile.value.toString(),
       tile.x + 1,
-      tile.y + (tile.value <= 2048 ? 9 : 10),
+      tile.y + (tile.value <= 2048 ? 9 + 9 : 10 + 7),
       TILE_SIZE,
     );
     ctx.restore();
diff --git a/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue b/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
index 5380e4e..c8aa808 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
@@ -134,7 +134,6 @@ const handleActivateA = () => {
 
 onRender((ctx) => {
   ctx.font = "10px NDS10";
-  ctx.textBaseline = "top";
 
   const drawButton = (
     title: string,
@@ -162,7 +161,7 @@ onRender((ctx) => {
     ctx.fillStyle = "#282828";
     const descKey = key === "_3dMode" ? "3dDescription" : "2dDescription";
     const text = $t(`settings.options.renderingMode.${descKey}`);
-    fillTextHCenteredMultiline(ctx, text, 0, y, buttonWidth, 15);
+    fillTextHCenteredMultiline(ctx, text, 0, 20 + 9, buttonWidth, 15);
 
     ctx.translate(0, animation[key].headerOffsetY);
     headerImg.draw(ctx, 0, 0, colorOpts);
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
index f5a27f3..8efa5e4 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
@@ -361,7 +361,6 @@ onRender((ctx, deltaTime) => {
     ctx.save();
     ctx.globalAlpha = animation.areaOpacity;
     ctx.fillStyle = "#fbfbfb";
-    ctx.textBaseline = "top";
     ctx.fillRect(32, 112, 191, 31);
 
     ctx.fillStyle = "#797979";
@@ -370,7 +369,7 @@ onRender((ctx, deltaTime) => {
       ctx,
       $t("settings.touchScreen.tapTap.startPrompt"),
       32,
-      123,
+      123 + 9,
       191,
     );
     ctx.restore();
diff --git a/app/components/Settings/BottomScreen/Menus/User/Color.vue b/app/components/Settings/BottomScreen/Menus/User/Color.vue
index 2c3788b..2a13a4d 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Color.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Color.vue
@@ -269,8 +269,7 @@ onRender((ctx, deltaTime) => {
   ctx.globalAlpha = animation.textOpacity;
   ctx.font = "7px NDS7";
   ctx.fillStyle = "#000000";
-  ctx.textBaseline = "top";
-  fillTextHCentered(ctx, "Choose color", 177, 69, 62);
+  fillTextHCentered(ctx, "Choose color", 177, 69 + 7, 62);
 });
 
 const handleActivateB = async () => {
diff --git a/app/components/Settings/BottomScreen/Menus/User/Snake.vue b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
index 263a220..b933f09 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Snake.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
@@ -267,7 +267,6 @@ onRender((ctx) => {
   ctx.globalAlpha = intro.boardOpacity;
   ctx.translate(0, intro.boardOffsetY);
 
-  ctx.textBaseline = "top";
   ctx.font = "10px NDS10";
 
   // board
@@ -285,7 +284,7 @@ onRender((ctx) => {
         y += 16;
         i += 1;
       }
-      ctx.fillText(text[i]!, x + 20, y);
+      ctx.fillText(text[i]!, x + 20, y + 9);
     }
   } else {
     // food
diff --git a/app/components/Settings/BottomScreen/Menus/User/UserName.vue b/app/components/Settings/BottomScreen/Menus/User/UserName.vue
index b2b63c8..e5b0dcc 100644
--- a/app/components/Settings/BottomScreen/Menus/User/UserName.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/UserName.vue
@@ -99,7 +99,6 @@ const handleActivateA = async () => {
 
 onRender((ctx) => {
   ctx.font = "10px NDS10";
-  ctx.textBaseline = "top";
 
   assets.background.draw(ctx, 0, 0);
 
@@ -112,7 +111,7 @@ onRender((ctx) => {
     // title
     ctx.fillStyle = "#282828";
     assets.user.nameTitle.draw(ctx, x + 12, y);
-    fillTextHCentered(ctx, title, x + 12, y + 4, 169);
+    fillTextHCentered(ctx, title, x + 12, y + 4 + 9, 169);
 
     // field
     ctx.fillStyle = "#fbfbfb";
@@ -123,7 +122,11 @@ onRender((ctx) => {
     );
 
     for (let i = 0; i < text.length; i += 1, x += 16) {
-      ctx.fillText(text[i]!, x + 20, y + assets.user.nameTitle.rect.height + 3);
+      ctx.fillText(
+        text[i]!,
+        x + 20,
+        y + assets.user.nameTitle.rect.height + 3 + 9,
+      );
     }
   };
 
diff --git a/app/components/Settings/BottomScreen/NumberInput.vue b/app/components/Settings/BottomScreen/NumberInput.vue
index fd6a654..cd1da7b 100644
--- a/app/components/Settings/BottomScreen/NumberInput.vue
+++ b/app/components/Settings/BottomScreen/NumberInput.vue
@@ -170,14 +170,13 @@ onRender((ctx) => {
   // value
   ctx.font = "39px NDS39";
   ctx.letterSpacing = "2px";
-  ctx.textBaseline = "top";
   ctx.fillStyle = props.selected
     ? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
     : "#fbfbfb";
   ctx.fillText(
     value.value.toString().padStart(props.digits, "0"),
     props.x + (props.digits === 2 ? 3 : 4),
-    Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2),
+    Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2) + 39,
   );
 
   // arrow down (clipped to area below the number square)
@@ -205,7 +204,7 @@ onRender((ctx) => {
     ctx,
     props.title,
     props.x + 1,
-    Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT + 3,
+    Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT + 3 + 9,
     downImage.value.rect.width,
   );
 }, 10);
diff --git a/app/utils/canvas.ts b/app/utils/canvas.ts
index 8f1d5fd..ba21e33 100644
--- a/app/utils/canvas.ts
+++ b/app/utils/canvas.ts
@@ -72,7 +72,11 @@ export const fillImageTextHCentered = (
   const groupX = Math.floor(x + width / 2 - totalWidth / 2);
 
   image.draw(ctx, groupX, y);
-  ctx.fillText(text, groupX + gap + image.rect.width, y);
+  ctx.fillText(
+    text,
+    groupX + gap + image.rect.width,
+    y + (ctx.font === "10px NDS10" ? 9 : 7),
+  );
 };
 
 export const fillTextHCentered = (
@@ -96,8 +100,8 @@ export const fillTextHCenteredMultiline = (
   lineHeight: number,
 ) => {
   const lines = text.split("\n");
-  for (let i = 0, y = 20; i < lines.length; i += 1, y += lineHeight) {
-    fillTextHCentered(ctx, lines[i]!, 0, y, width);
+  for (let i = 0; i < lines.length; i += 1, y += lineHeight) {
+    fillTextHCentered(ctx, lines[i]!, x, y, width);
   }
 };
 
@@ -237,11 +241,10 @@ export const drawButton = (
     0,
   );
 
-  ctx.textBaseline = "top";
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#494118";
 
-  fillTextHCentered(ctx, text, 1, 4, width);
+  fillTextHCentered(ctx, text, 1, 4 + 9, width);
 
   ctx.restore();
 };