fix(settings): fix alignment issues in number input

app/components/Settings/BottomScreen/Menus/Clock/Date.vue

@@ -3,6 +3,8 @@ import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
 import { useIntervalFn } from "@vueuse/core";
 
 const store = useSettingsStore();
+const { assets } = useAssets();
+const { onRender } = useScreen();
 
 const now = ref(new Date());
 
@@ -18,6 +20,10 @@ const handleConfirm = () => {
   store.closeSubMenu();
 };
 
+onRender((ctx) => {
+  assets.images.home.topScreen.background.draw(ctx, 0, 0);
+});
+
 defineOptions({ render: () => null });
 </script>
 
@@ -25,20 +31,20 @@ defineOptions({ render: () => null });
   <NumberInput
     :model-value="now.getMonth() + 1"
     title="Month"
-    :x="1 * 16"
+    :x="1 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
     :model-value="now.getDate()"
     title="Day"
-    :x="5 * 16"
+    :x="5 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
     :model-value="now.getFullYear()"
     title="Year"
     :digits="4"
-    :x="9 * 16"
+    :x="9 * 16 - 1"
     :disabled="true"
   />
 

app/components/Settings/BottomScreen/Menus/Clock/Time.vue

@@ -21,7 +21,9 @@ const handleConfirm = () => {
 };
 
 onRender((ctx) => {
-  assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 113, 62);
+  assets.images.home.topScreen.background.draw(ctx, 0, 0);
+
+  assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 112, 63);
 });
 
 defineOptions({ render: () => null });
@@ -31,13 +33,13 @@ defineOptions({ render: () => null });
   <NumberInput
     :model-value="now.getHours()"
     title="Hour"
-    :x="4 * 16"
+    :x="4 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
     :model-value="now.getMinutes()"
     title="Minute"
-    :x="9 * 16"
+    :x="9 * 16 - 1"
     :disabled="true"
   />