From aa7ff3d26d6ad52cb65c1bda54fa6370b593cec1 Mon Sep 17 00:00:00 2001
From: keyhan <k.tahvilpour@greenweb.ir>
Date: Fri, 12 Jun 2026 12:33:41 +0330
Subject: [PATCH] Fix mobile select zoom and unify optional-service version
 pickers.

Form controls smaller than 16px made iOS Safari auto-zoom on focus,
shifting page content upward. Enforce a 16px minimum font-size on
inputs/selects/textareas at mobile widths. Also replace the three tiny,
inconsistently-styled (colored-border, text-xs) version pickers in the
deploy wizard's optional-services cards with a shared .select-compact
style so they match the rest of the form.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/app/[lang]/dashboard/deploy/page.tsx    | 14 ++++++++------
 frontend/src/app/globals.css                    | 17 +++++++++++++++++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/[lang]/dashboard/deploy/page.tsx b/frontend/src/app/[lang]/dashboard/deploy/page.tsx
index 2dca928..6ce78a5 100644
--- a/frontend/src/app/[lang]/dashboard/deploy/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/deploy/page.tsx
@@ -1792,9 +1792,9 @@ export default function DeployPage() {
                   {form.enableRedis && (
                     <div className="mt-3 pt-3 border-t border-red-200 space-y-2">
                       <div className="flex items-center gap-2">
-                        <label className="text-xs text-gray-600">{dw.versionColon}</label>
+                        <label className="text-xs font-medium text-gray-600 shrink-0">{dw.versionColon}</label>
                         <select
-                          className="text-xs border border-red-200 rounded px-2 py-1 bg-white"
+                          className="select-compact flex-1 min-w-0"
                           value={form.redisVersion || '7.2'}
                           onChange={(e) => setForm({ ...form, redisVersion: e.target.value })}
                           onClick={(e) => e.stopPropagation()}
@@ -1850,11 +1850,12 @@ export default function DeployPage() {
                   {form.enableRabbitmq && (
                     <div className="mt-3 pt-3 border-t border-orange-200 space-y-2">
                       <div className="flex items-center gap-2">
-                        <label className="text-xs text-gray-600">{dw.versionColon}</label>
+                        <label className="text-xs font-medium text-gray-600 shrink-0">{dw.versionColon}</label>
                         <select
-                          className="text-xs border border-orange-200 rounded px-2 py-1 bg-white"
+                          className="select-compact flex-1 min-w-0"
                           value={form.rabbitmqVersion || '3.13'}
                           onChange={(e) => setForm({ ...form, rabbitmqVersion: e.target.value })}
+                          onClick={(e) => e.stopPropagation()}
                         >
                           <option value="3.13">3.13 (Latest)</option>
                           <option value="3.12">3.12 (LTS)</option>
@@ -1894,11 +1895,12 @@ export default function DeployPage() {
                   {form.enableElasticsearch && (
                     <div className="mt-3 pt-3 border-t border-yellow-200 space-y-2">
                       <div className="flex items-center gap-2">
-                        <label className="text-xs text-gray-600">{dw.versionColon}</label>
+                        <label className="text-xs font-medium text-gray-600 shrink-0">{dw.versionColon}</label>
                         <select
-                          className="text-xs border border-yellow-200 rounded px-2 py-1 bg-white"
+                          className="select-compact flex-1 min-w-0"
                           value={form.elasticsearchVersion || '8.12'}
                           onChange={(e) => setForm({ ...form, elasticsearchVersion: e.target.value })}
+                          onClick={(e) => e.stopPropagation()}
                         >
                           <option value="8.12">8.12 (Latest)</option>
                           <option value="8.11">8.11</option>
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index e019f27..c99c1dc 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -68,6 +68,13 @@
            focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500
            transition-all duration-150;
   }
+  /* Compact, design-consistent select for inline rows (e.g. version pickers). */
+  .select-compact {
+    @apply rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm shadow-sm
+           text-gray-800 cursor-pointer
+           focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500
+           transition-all duration-150;
+  }
 
   /* ─── Cards ──────────────────────────────────────────── */
   .card {
@@ -220,3 +227,13 @@ html.lenis body {
     animation: none;
   }
 }
+
+/* Mobile: keep form controls at a 16px minimum so iOS Safari doesn't auto-zoom
+   (and shift the page contents up) when a field/select is focused. */
+@media (max-width: 640px) {
+  input:not([type='checkbox']):not([type='radio']):not([type='range']),
+  select,
+  textarea {
+    font-size: 16px !important;
+  }
+}