feat(ui): short Remote Access hints with InfoTips

Tuck the Remote Access intro, empty-state and expose-modal helper copy behind InfoTips so the page reads as one short line. Validation warnings and the tear-down confirmation stay visible.

builtin-extensions/serverkit-remote-access/frontend/styles/remote-access.scss

@@ -38,8 +38,7 @@
 
 @media (max-width: $breakpoint-md) {
     .ra-intro {
-        flex-direction: column;
-        align-items: flex-start;
+        align-items: center;
         gap: $space-3;
     }
 }
@@ -258,6 +257,7 @@
 // Semantic layouts and controls; declarations preserved from the legacy compatibility layer.
 .ra-service-form > * + * { margin-top: 1rem; }
 .ra-service-field > * + * { margin-top: 0.375rem; }
+.ra-label-row { display: inline-flex; align-items: center; gap: 0.25rem; }
 .ra-service-hint { font-size: 0.75rem; color: $text-tertiary; }
 .ra-service-routing { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; }
 @media (min-width: $breakpoint-sm) {

frontend/src/i18n/locales/ar.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "اختر خادم حافة IP عام وسيقوم ServerKit بإقرانه مع {{value}} عبر WireGuard.",
             "pickAPublicIpEdgeServer2": "اختر خادم حافة IP عام ومضيفًا خاصًا، وسيعمل ServerKit على إقرانهما عبر WireGuard ونشر خدمتك - دون الحاجة إلى إجراء تغييرات على جهاز التوجيه.",
             "pickTwoDifferentServers": "اختر خادمين مختلفين: خادم الحافة يقف أمام المضيف الخاص.",
-            "pointAtEdge": "وجّه {{name}} إلى خادم الحافة؛ والنفق ينقله من هناك.",
             "privateHostWhereTheServiceRuns": "مضيف خاص (حيث تعمل الخدمة)",
             "publicHostname": "اسم المضيف العام",
             "publishing": "جارٍ النشر…",

frontend/src/i18n/locales/bn.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "একটি পাবলিক-আইপি এজ সার্ভার বেছে নিন এবং ServerKit এটিকে {{value}} ওয়্যারগার্ডের সাথে যুক্ত করবে।",
             "pickAPublicIpEdgeServer2": "একটি পাবলিক-আইপি প্রান্ত সার্ভার এবং একটি ব্যক্তিগত হোস্ট চয়ন করুন, এবং ServerKit তাদের ওয়্যারগার্ডের সাথে যুক্ত করবে এবং আপনার পরিষেবা প্রকাশ করবে — কোনও রাউটার পরিবর্তনের প্রয়োজন নেই৷",
             "pickTwoDifferentServers": "দুটি ভিন্ন সার্ভার বেছে নিন: এজ সার্ভারটি ব্যক্তিগত হোস্টের সামনে থাকে।",
-            "pointAtEdge": "{{name}}-কে এজ সার্ভারের দিকে নির্দেশ করুন; সেখান থেকে টানেল এটি বহন করে।",
             "privateHostWhereTheServiceRuns": "ব্যক্তিগত হোস্ট (যেখানে পরিষেবা চলে)",
             "publicHostname": "সর্বজনীন হোস্টনাম",
             "publishing": "প্রকাশ করা হচ্ছে…",

frontend/src/i18n/locales/de.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "Wählen Sie einen öffentlichen IP-Edgeserver aus und ServerKit koppelt ihn über WireGuard mit {{value}}.",
             "pickAPublicIpEdgeServer2": "Wählen Sie einen öffentlichen IP-Edge-Server und einen privaten Host aus, und ServerKit koppelt sie über WireGuard und veröffentlicht Ihren Dienst – keine Änderungen am Router erforderlich.",
             "pickTwoDifferentServers": "Wählen Sie zwei verschiedene Server: Der Edge-Server steht vor dem privaten Host.",
-            "pointAtEdge": "Richten Sie {{name}} auf den Edge-Server; der Tunnel leitet es von dort weiter.",
             "privateHostWhereTheServiceRuns": "Privater Host (auf dem der Dienst ausgeführt wird)",
             "publicHostname": "Öffentlicher Hostname",
             "publishing": "Wird veröffentlicht…",

frontend/src/i18n/locales/en.json

@@ -4912,8 +4912,10 @@
             "betweenServers": "between {{privateServer}} and {{edgeServer}}",
             "edgeServerPublicIpFrontsThe": "Edge server (public IP, fronts the tunnel)",
             "exposeALocalService": "Expose a local service",
+            "exposeAPrivateServicePublicly": "Expose a private service publicly.",
             "exposeAServiceRunningOnA": "Expose a service running on a private server (behind NAT, no port-forwarding) to a public hostname over a WireGuard tunnel between two of your agents.",
             "exposeService": "Expose service",
+            "exposeServicesOn": "Expose services on",
             "exposeServicesRunningOn": "Expose services running on",
             "exposed": "Exposed {{hostname}}",
             "failedToExposeService": "Couldn't expose the service.",
@@ -4931,8 +4933,10 @@
             "obtainACertificateOnTheEdge": "Obtain a certificate on the edge.",
             "pickAPublicIpEdgeServer": "Pick a public-IP edge server and ServerKit will pair it with {{value}} over WireGuard.",
             "pickAPublicIpEdgeServer2": "Pick a public-IP edge server and a private host, and ServerKit will pair them over WireGuard and publish your service. No router changes are needed.",
+            "pickAPublicIpEdgeServerShort": "Pick a public-IP edge server.",
+            "pickAnEdgeAndAPrivateHost": "Pick an edge and a private host.",
             "pickTwoDifferentServers": "Pick two different servers: the edge fronts the private host.",
-            "pointAtEdge": "Point {{name}} at the edge server; the tunnel carries it from there.",
+            "pointAtEdgeGeneric": "Point the hostname at the edge server; the tunnel carries it from there.",
             "privateHostWhereTheServiceRuns": "Private host (where the service runs)",
             "publicHostname": "Public hostname",
             "publishing": "Publishing…",

frontend/src/i18n/locales/es.json

@@ -4782,7 +4782,6 @@
             "pickAPublicIpEdgeServer": "Elige un servidor de borde con IP pública y ServerKit lo emparejará con {{value}} mediante WireGuard.",
             "pickAPublicIpEdgeServer2": "Elige un servidor de borde con IP pública y un host privado; ServerKit los emparejará mediante WireGuard y publicará tu servicio, sin cambios en el router.",
             "pickTwoDifferentServers": "Elige dos servidores distintos: el de borde está delante del host privado.",
-            "pointAtEdge": "Apunta {{name}} al servidor de borde; el túnel lo lleva desde ahí.",
             "privateHostWhereTheServiceRuns": "Host privado (donde se ejecuta el servicio)",
             "publicHostname": "Hostname público",
             "publishing": "Publicando…",

frontend/src/i18n/locales/fr.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "Choisissez un serveur périphérique IP public et ServerKit l'associera à {{value}} via WireGuard.",
             "pickAPublicIpEdgeServer2": "Choisissez un serveur périphérique IP public et un hôte privé, et ServerKit les couplera via WireGuard et publiera votre service – aucune modification du routeur n'est nécessaire.",
             "pickTwoDifferentServers": "Choisissez deux serveurs différents : le serveur edge fait office de façade pour l'hôte privé.",
-            "pointAtEdge": "Pointez {{name}} vers le serveur edge ; le tunnel l'achemine à partir de là.",
             "privateHostWhereTheServiceRuns": "Hôte privé (où le service s'exécute)",
             "publicHostname": "Nom d'hôte public",
             "publishing": "Publication…",

frontend/src/i18n/locales/id.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "Pilih server edge IP publik dan ServerKit akan memasangkannya dengan {{value}} melalui WireGuard.",
             "pickAPublicIpEdgeServer2": "Pilih server edge IP publik dan host pribadi, dan ServerKit akan memasangkannya melalui WireGuard dan mempublikasikan layanan Anda — tidak perlu perubahan router.",
             "pickTwoDifferentServers": "Pilih dua server yang berbeda: edge berada di depan host privat.",
-            "pointAtEdge": "Arahkan {{name}} ke server edge; tunnel membawanya dari sana.",
             "privateHostWhereTheServiceRuns": "Host pribadi (tempat layanan berjalan)",
             "publicHostname": "Nama host publik",
             "publishing": "Memublikasikan…",

frontend/src/i18n/locales/it.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "Scegli un edge server con IP pubblico e ServerKit lo accoppierà con {{value}} su WireGuard.",
             "pickAPublicIpEdgeServer2": "Scegli un server edge con IP pubblico e un host privato e ServerKit li accoppierà su WireGuard e pubblicherà il tuo servizio, senza bisogno di modifiche al router.",
             "pickTwoDifferentServers": "Scegli due server diversi: l'edge fa da fronte all'host privato.",
-            "pointAtEdge": "Punta {{name}} al server edge; da lì il tunnel lo instrada.",
             "privateHostWhereTheServiceRuns": "Host privato (dove viene eseguito il servizio)",
             "publicHostname": "Nome host pubblico",
             "publishing": "Pubblicazione…",

frontend/src/i18n/locales/ko.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "공용 IP 에지 서버를 선택하면 ServerKit이 WireGuard를 통해 이를 {{value}}와 페어링합니다.",
             "pickAPublicIpEdgeServer2": "공용 IP 에지 서버와 개인 호스트를 선택하면 ServerKit이 WireGuard를 통해 이들을 연결하고 서비스를 게시합니다. 라우터를 변경할 필요가 없습니다.",
             "pickTwoDifferentServers": "서로 다른 두 서버를 선택하세요. 엣지 서버가 비공개 호스트 앞단을 맡습니다.",
-            "pointAtEdge": "{{name}}이(가) 엣지 서버를 가리키도록 하세요. 그 이후는 터널이 전달합니다.",
             "privateHostWhereTheServiceRuns": "개인 호스트(서비스가 실행되는 곳)",
             "publicHostname": "공개 호스트 이름",
             "publishing": "게시 중…",

frontend/src/i18n/locales/pl.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "Wybierz serwer brzegowy z publicznym adresem IP, a ServerKit połączy go z {{value}} przez WireGuard.",
             "pickAPublicIpEdgeServer2": "Wybierz serwer brzegowy z publicznym adresem IP i prywatnego hosta, a ServerKit sparuje je za pośrednictwem WireGuard i opublikuje Twoją usługę — bez konieczności zmiany routera.",
             "pickTwoDifferentServers": "Wybierz dwa różne serwery: serwer brzegowy obsługuje ruch dla hosta prywatnego.",
-            "pointAtEdge": "Skieruj {{name}} na serwer brzegowy; dalej ruch przenosi tunel.",
             "privateHostWhereTheServiceRuns": "Host prywatny (na którym działa usługa)",
             "publicHostname": "Publiczna nazwa hosta",
             "publishing": "Publikowanie…",

frontend/src/i18n/locales/pt.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "Escolha um servidor de borda com IP público e o ServerKit irá emparelhá-lo com {{value}} através do WireGuard.",
             "pickAPublicIpEdgeServer2": "Escolha um servidor de borda com IP público e um host privado, e o ServerKit irá emparelhá-los através do WireGuard e publicar seu serviço – sem necessidade de alterações no roteador.",
             "pickTwoDifferentServers": "Escolha dois servidores diferentes: o de borda fica na frente do host privado.",
-            "pointAtEdge": "Aponte {{name}} para o servidor de borda; o túnel o leva a partir daí.",
             "privateHostWhereTheServiceRuns": "Host privado (onde o serviço é executado)",
             "publicHostname": "Nome de host público",
             "publishing": "Publicando…",

frontend/src/i18n/locales/ru.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "Выберите пограничный сервер с общедоступным IP-адресом, и ServerKit соединит его с {{value}} через WireGuard.",
             "pickAPublicIpEdgeServer2": "Выберите пограничный сервер с общедоступным IP-адресом и частный хост, и ServerKit соединит их через WireGuard и опубликует ваш сервис — никаких изменений в маршрутизаторе не требуется.",
             "pickTwoDifferentServers": "Выберите два разных сервера: пограничный сервер стоит перед приватным хостом.",
-            "pointAtEdge": "Направьте {{name}} на пограничный сервер; дальше трафик передаёт туннель.",
             "privateHostWhereTheServiceRuns": "Частный хост (где работает служба)",
             "publicHostname": "Публичное имя хоста",
             "publishing": "Публикация…",

frontend/src/i18n/locales/th.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "เลือกเซิร์ฟเวอร์ Edge-IP สาธารณะ จากนั้น ServerKit จะจับคู่กับ {{value}} ผ่าน WireGuard",
             "pickAPublicIpEdgeServer2": "เลือกเซิร์ฟเวอร์ Edge สาธารณะ IP และโฮสต์ส่วนตัว แล้ว ServerKit จะจับคู่เซิร์ฟเวอร์เหล่านั้นผ่าน WireGuard และเผยแพร่บริการของคุณ โดยไม่จำเป็นต้องเปลี่ยนแปลงเราเตอร์",
             "pickTwoDifferentServers": "เลือกเซิร์ฟเวอร์สองเครื่องที่ต่างกัน: เซิร์ฟเวอร์ edge อยู่ด้านหน้าโฮสต์ส่วนตัว",
-            "pointAtEdge": "ชี้ {{name}} ไปที่เซิร์ฟเวอร์ edge แล้วอุโมงค์จะส่งต่อจากที่นั่น",
             "privateHostWhereTheServiceRuns": "โฮสต์ส่วนตัว (ที่บริการทำงาน)",
             "publicHostname": "ชื่อโฮสต์สาธารณะ",
             "publishing": "กำลังเผยแพร่…",

frontend/src/i18n/locales/tr.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "Bir genel IP uç sunucusu seçin; ServerKit, onu WireGuard üzerinden {{value}} ile eşleştirecektir.",
             "pickAPublicIpEdgeServer2": "Bir genel IP uç sunucusu ve özel bir ana bilgisayar seçin; ServerKit bunları WireGuard üzerinden eşleştirecek ve hizmetinizi yayınlayacaktır; yönlendirici değişikliğine gerek yoktur.",
             "pickTwoDifferentServers": "İki farklı sunucu seçin: uç sunucu, özel ana makinenin önünde durur.",
-            "pointAtEdge": "{{name}} adresini uç sunucuya yönlendirin; tünel onu oradan taşır.",
             "privateHostWhereTheServiceRuns": "Özel ana bilgisayar (hizmetin çalıştığı yer)",
             "publicHostname": "Genel ana makine adı",
             "publishing": "Yayınlanıyor…",

frontend/src/i18n/locales/vi.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "Chọn một máy chủ biên IP công cộng và ServerKit sẽ ghép nối nó với {{value}} qua WireGuard.",
             "pickAPublicIpEdgeServer2": "Chọn một máy chủ biên IP công cộng và một máy chủ riêng, sau đó ServerKit sẽ ghép nối chúng qua WireGuard và xuất bản dịch vụ của bạn — không cần thay đổi bộ định tuyến.",
             "pickTwoDifferentServers": "Chọn hai máy chủ khác nhau: máy chủ biên đứng trước máy chủ riêng.",
-            "pointAtEdge": "Trỏ {{name}} đến máy chủ biên; đường hầm sẽ chuyển tiếp từ đó.",
             "privateHostWhereTheServiceRuns": "Máy chủ riêng (nơi dịch vụ chạy)",
             "publicHostname": "Tên máy chủ công cộng",
             "publishing": "Đang xuất bản…",

frontend/src/i18n/locales/zh-Hans.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "选择一个公共 IP 边缘服务器，ServerKit 将通过 WireGuard 将其与 {{value}} 配对。",
             "pickAPublicIpEdgeServer2": "选择一个公共 IP 边缘服务器和一个私有主机，ServerKit 将通过 WireGuard 将它们配对并发布您的服务 - 无需更改路由器。",
             "pickTwoDifferentServers": "请选择两台不同的服务器：边缘服务器位于私有主机前端。",
-            "pointAtEdge": "将 {{name}} 指向边缘服务器；之后由隧道转发。",
             "privateHostWhereTheServiceRuns": "私有主机（服务运行的地方）",
             "publicHostname": "公共主机名",
             "publishing": "正在发布…",

frontend/src/i18n/locales/zh-Hant.json

@@ -4781,7 +4781,6 @@
             "pickAPublicIpEdgeServer": "請選擇具有公用 IP 位址的邊緣伺服器，ServerKit 會透過 WireGuard 與 {{value}} 配對。",
             "pickAPublicIpEdgeServer2": "選擇具有公用 IP 的邊緣伺服器及私人主機，ServerKit 就會透過 WireGuard 配對兩者並公開服務，無須變更路由器設定。",
             "pickTwoDifferentServers": "請選擇兩部不同的伺服器：邊緣伺服器位於私人主機前端。",
-            "pointAtEdge": "將 {{name}} 指向邊緣伺服器，隧道會從那裡轉送流量。",
             "privateHostWhereTheServiceRuns": "私有主機（服務運作的地方）",
             "publicHostname": "公開主機名稱",
             "publishing": "正在發佈…",

frontend/src/pages/RemoteAccess.jsx

@@ -8,6 +8,7 @@ import {
 import api from '../services/api';
 import { useToast } from '../contexts/useToast.js';
 import EmptyState from '../components/EmptyState';
+import InfoTip from '../components/InfoTip';
 import Modal from '../components/Modal';
 import ServerPicker from '../components/ServerPicker';
 import DomainField from '../components/DomainField';
@@ -196,11 +197,13 @@ const RemoteAccess = ({ serverId }) => {
             <div className="ra-intro">
                 {serverId && currentServer ? (
                     <p>
-                        {t('app.remoteAccess.exposeServicesRunningOn', 'Expose services running on')} <strong>{currentServer.name}</strong> {t('app.remoteAccess.toAPublicHostnameOverA', 'to a public hostname over a WireGuard tunnel. ServerKit pairs this host with an edge server that has a public IP.')}
+                        {t('app.remoteAccess.exposeServicesOn', 'Expose services on')} <strong>{currentServer.name}</strong>.
+                        <InfoTip>{t('app.remoteAccess.exposeServicesRunningOn', 'Expose services running on')} <strong>{currentServer.name}</strong> {t('app.remoteAccess.toAPublicHostnameOverA', 'to a public hostname over a WireGuard tunnel. ServerKit pairs this host with an edge server that has a public IP.')}</InfoTip>
                     </p>
                 ) : (
                     <p>
-                        {t('app.remoteAccess.exposeAServiceRunningOnA', 'Expose a service running on a private server (behind NAT, no port-forwarding) to a public hostname over a WireGuard tunnel between two of your agents.')}
+                        {t('app.remoteAccess.exposeAPrivateServicePublicly', 'Expose a private service publicly.')}
+                        <InfoTip>{t('app.remoteAccess.exposeAServiceRunningOnA', 'Expose a service running on a private server (behind NAT, no port-forwarding) to a public hostname over a WireGuard tunnel between two of your agents.')}</InfoTip>
                     </p>
                 )}
                 {serverId && (
@@ -216,9 +219,17 @@ const RemoteAccess = ({ serverId }) => {
                 <EmptyState
                     icon={Network}
                     title={serverId ? t('app.remoteAccess.noTunnelsForThisServer', 'No tunnels for this server') : t('app.remoteAccess.noTunnelsYet', 'No tunnels yet')}
-                    description={serverId
-                        ? t('app.remoteAccess.pickAPublicIpEdgeServer', 'Pick a public-IP edge server and ServerKit will pair it with {{value}} over WireGuard.', { value: currentServer?.name || 'this host' })
-                        : t('app.remoteAccess.pickAPublicIpEdgeServer2', 'Pick a public-IP edge server and a private host, and ServerKit will pair them over WireGuard and publish your service. No router changes are needed.')}
+                    description={serverId ? (
+                        <>
+                            {t('app.remoteAccess.pickAPublicIpEdgeServerShort', 'Pick a public-IP edge server.')}
+                            <InfoTip>{t('app.remoteAccess.pickAPublicIpEdgeServer', 'Pick a public-IP edge server and ServerKit will pair it with {{value}} over WireGuard.', { value: currentServer?.name || 'this host' })}</InfoTip>
+                        </>
+                    ) : (
+                        <>
+                            {t('app.remoteAccess.pickAnEdgeAndAPrivateHost', 'Pick an edge and a private host.')}
+                            <InfoTip>{t('app.remoteAccess.pickAPublicIpEdgeServer2', 'Pick a public-IP edge server and a private host, and ServerKit will pair them over WireGuard and publish your service. No router changes are needed.')}</InfoTip>
+                        </>
+                    )}
                     action={exposeButton}
                 />
             ) : (
@@ -397,7 +408,10 @@ const RemoteAccess = ({ serverId }) => {
                                 )}
                             </div>
                             <div className="ra-service-field">
-                                <Label htmlFor={`${fieldId}-edge-server`}>{t('app.remoteAccess.edgeServerPublicIpFrontsThe', 'Edge server (public IP, fronts the tunnel)')}</Label>
+                                <span className="ra-label-row">
+                                    <Label htmlFor={`${fieldId}-edge-server`}>{t('app.remoteAccess.edgeServerPublicIpFrontsThe', 'Edge server (public IP, fronts the tunnel)')}</Label>
+                                    <InfoTip>{t('app.remoteAccess.aTunnelBetweenTheseTwoIs', 'A tunnel between these two is created (or reused) automatically.')}</InfoTip>
+                                </span>
                                 <ServerPicker
                                     id={`${fieldId}-edge-server`}
                                     value={form.edgeServerId}
@@ -411,22 +425,21 @@ const RemoteAccess = ({ serverId }) => {
                                         {t('app.remoteAccess.pickTwoDifferentServers', 'Pick two different servers: the edge fronts the private host.')}
                                     </p>
                                 )}
-                                <p className="ra-service-hint">
-                                    {t('app.remoteAccess.aTunnelBetweenTheseTwoIs', 'A tunnel between these two is created (or reused) automatically.')}
-                                </p>
                             </div>
                         </>
                     )}
 
                     <div className="ra-service-routing">
                         <div className="ra-service-field ra-service-field--host">
-                            <Label htmlFor="ra-hostname">{t('app.remoteAccess.publicHostname', 'Public hostname')}</Label>
+                            <span className="ra-label-row">
+                                <Label htmlFor="ra-hostname">{t('app.remoteAccess.publicHostname', 'Public hostname')}</Label>
+                                <InfoTip>{t('app.remoteAccess.pointAtEdgeGeneric', 'Point the hostname at the edge server; the tunnel carries it from there.')}</InfoTip>
+                            </span>
                             <DomainField
                                 id="ra-hostname"
                                 modes={['custom']}
                                 value={form.hostname}
                                 onChange={(fqdn) => setField('hostname', fqdn)}
-                                hint={(name) => t('app.remoteAccess.pointAtEdge', 'Point {{name}} at the edge server; the tunnel carries it from there.', { name })}
                             />
                         </div>
                         <div className="ra-service-field">
@@ -444,16 +457,20 @@ const RemoteAccess = ({ serverId }) => {
 
                     <div className="ra-service-option">
                         <div>
-                            <Label htmlFor={`${fieldId}-ssl`}>{t('app.remoteAccess.httpsLetSEncrypt', 'HTTPS (Let\'s Encrypt)')}</Label>
-                            <p className="ra-service-hint">{t('app.remoteAccess.obtainACertificateOnTheEdge', 'Obtain a certificate on the edge.')}</p>
+                            <span className="ra-label-row">
+                                <Label htmlFor={`${fieldId}-ssl`}>{t('app.remoteAccess.httpsLetSEncrypt', 'HTTPS (Let\'s Encrypt)')}</Label>
+                                <InfoTip>{t('app.remoteAccess.obtainACertificateOnTheEdge', 'Obtain a certificate on the edge.')}</InfoTip>
+                            </span>
                         </div>
                         <Switch id={`${fieldId}-ssl`} checked={form.ssl} onCheckedChange={(v) => setField('ssl', v)} />
                     </div>
 
                     <div className="ra-service-option">
                         <div>
-                            <Label htmlFor={`${fieldId}-require-auth`}>{t('app.remoteAccess.requireLoginBasicAuth', 'Require login (basic auth)')}</Label>
-                            <p className="ra-service-hint">{t('app.remoteAccess.putAUsernamePasswordInFront', 'Put a username/password in front of the service.')}</p>
+                            <span className="ra-label-row">
+                                <Label htmlFor={`${fieldId}-require-auth`}>{t('app.remoteAccess.requireLoginBasicAuth', 'Require login (basic auth)')}</Label>
+                                <InfoTip>{t('app.remoteAccess.putAUsernamePasswordInFront', 'Put a username/password in front of the service.')}</InfoTip>
+                            </span>
                         </div>
                         <Switch id={`${fieldId}-require-auth`} checked={form.requireAuth} onCheckedChange={(v) => setField('requireAuth', v)} />
                     </div>

frontend/src/plugins/serverkit-remote-access/styles/remote-access.scss

@@ -38,8 +38,7 @@
 
 @media (max-width: $breakpoint-md) {
     .ra-intro {
-        flex-direction: column;
-        align-items: flex-start;
+        align-items: center;
         gap: $space-3;
     }
 }
@@ -258,6 +257,7 @@
 // Semantic layouts and controls; declarations preserved from the legacy compatibility layer.
 .ra-service-form > * + * { margin-top: 1rem; }
 .ra-service-field > * + * { margin-top: 0.375rem; }
+.ra-label-row { display: inline-flex; align-items: center; gap: 0.25rem; }
 .ra-service-hint { font-size: 0.75rem; color: $text-tertiary; }
 .ra-service-routing { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; }
 @media (min-width: $breakpoint-sm) {