it says it can control the popup keyboard size in tablet

src/app/global.css

@@ -29,11 +29,34 @@ body {
   overscroll-behavior: none;
 }
 
+/* Tablet/mobile: stable layout when virtual keyboard opens */
+html {
+  /* Prefer dynamic viewport height so layout can adapt to keyboard (if browser resizes) */
+  height: 100%;
+}
 body {
+  min-height: 100%;
+  min-height: 100dvh;
   background-color: var(--background);
   color: var(--foreground);
 }
 
+/* Full-height containers: use dvh so keyboard doesn’t squash the layout when overlay is used */
+@media (max-width: 1024px) {
+  .min-h-screen {
+    min-height: 100dvh;
+  }
+}
+
+/* Avoid iOS zoom on input focus (keep inputs ≥16px where possible) */
+@media (max-width: 1024px) {
+  input,
+  select,
+  textarea {
+    font-size: max(16px, 1rem);
+  }
+}
+
 .app-search-criteria {
   border-radius: 8px;
   border: 1px solid var(--border);

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 // import { detectLanguage } from "@/i18n";
 // import ThemeRegistry from "@/theme/ThemeRegistry";
 import { detectLanguage } from "../i18n";
@@ -9,6 +9,14 @@ export const metadata: Metadata = {
   description: "FPSMS - xxxx Management System",
 };
 
+/** Tablet/mobile: virtual keyboard overlays content instead of resizing viewport (avoids "half screen gone"). */
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+  interactiveWidget: "overlays-content",
+};
+
 export default async function RootLayout({
   children,
 }: {

src/components/Logo/Logo.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 
 /**
- * Logo: 3D-style badge (FP) + MTMS wordmark.
+ * Logo: 3D-style badge (FP) + FP-MTMS wordmark.
  * Badge uses gradient and highlight for depth; FP = Food Production, MTMS = system name.
  */
 const Logo: React.FC<Props> = ({ height = 44, className = "" }) => {
@@ -68,13 +68,13 @@ const Logo: React.FC<Props> = ({ height = 44, className = "" }) => {
           FP
         </text>
       </svg>
-      {/* Wordmark: MTMS + subtitle — strong, energetic */}
+      {/* Wordmark: FP-MTMS + subtitle — strong, energetic */}
       <div className="flex flex-col justify-center leading-tight">
         <span
           className="font-bold tracking-tight text-blue-700 dark:text-blue-200"
           style={{ fontSize: `${fontSize}px`, letterSpacing: "0.03em" }}
         >
-          MTMS
+          FP-MTMS
         </span>
         <span
           className="text-[10px] font-semibold uppercase tracking-wider text-blue-600/90 dark:text-blue-300/90"