Merge pull request #290 from letehaha/fix/small-ui-fixes

Fix small UI issues

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "vue-tsc --noEmit && vite build",
     "lint": "eslint -c ./.eslintrc.cjs --ignore-path ./.eslintignore .",
-    "dev": "vite",
+    "dev": "vite --host",
     "prod": "vite --mode production",
     "docker-build": "docker build . -t letehaha/budget-tracker-fe",
     "docker-push": "docker push letehaha/budget-tracker-fe",

src/common/utils/index.ts

@@ -1 +1,2 @@
 export * from "./color-theme";
+export * from "./meta-viewport-max-scale";

src/common/utils/meta-viewport-max-scale.ts

@@ -0,0 +1,27 @@
+export const patchMetaViewportMaxScaleForiOS = () => {
+  const addMaximumScaleToMetaViewport = () => {
+    const el = document.querySelector("meta[name=viewport]");
+
+    if (el !== null) {
+      let content = el.getAttribute("content");
+      const re = /maximum-scale=[0-9.]+/g;
+
+      if (re.test(content)) {
+        content = content.replace(re, "maximum-scale=1.0");
+      } else {
+        content = [content, "maximum-scale=1.0"].join(", ");
+      }
+
+      el.setAttribute("content", content);
+    }
+  };
+
+  const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
+
+  // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
+  const checkIsIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent);
+
+  if (checkIsIOS()) {
+    disableIosTextFieldZoom();
+  }
+};

src/main.ts

@@ -3,12 +3,16 @@ import { VueQueryPlugin } from "@tanstack/vue-query";
 import { router } from "@/routes";
 import { clickOutside, nodeResizeObserver } from "@/directives";
 import { store } from "@/stores/setup";
-import { identifyCurrentTheme } from "@/common/utils";
+import {
+  identifyCurrentTheme,
+  patchMetaViewportMaxScaleForiOS,
+} from "@/common/utils";
 import App from "./app.vue";
 import "@/styles/index.scss";
 import "./registerServiceWorker";
 
 identifyCurrentTheme();
+patchMetaViewportMaxScaleForiOS();
 
 const app = createApp(App);
 

src/pages/account/components/header.vue

@@ -57,7 +57,7 @@ const updateAccount = async () => {
 
 <template>
   <CardHeader>
-    <div class="flex items-start justify-between">
+    <div class="flex flex-wrap items-start justify-between">
       <p class="flex items-center gap-2">
         <span class="text-xl">
           {{ account.name }}
@@ -91,7 +91,7 @@ const updateAccount = async () => {
           </Popover.PopoverContent>
         </Popover.Popover>
       </p>
-      <div class="flex items-end gap-2">
+      <div class="flex flex-wrap items-end justify-start gap-2 ml-auto">
         <span
           v-if="account.currencyId !== baseCurrency.currencyId"
           class="text-white text-opacity-50"