abrban/cloud-host
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile select zoom and unify optional-service version pickers.

Browse Source 
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>
This commit is contained in:
keyhan
2026-06-12 12:33:41 +03:30
parent aa3e62d0ff
commit aa7ff3d26d
2 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/[lang]/dashboard/deploy/page.tsx
+8 -6
View File
@@ -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>
frontend/src/app/globals.css
+17
View File
@@ -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;
}
}