From 545536bdf36863786843a6b833123fc144dc0c28 Mon Sep 17 00:00:00 2001
From: Eric Wang <wangx184@chinatelecom.cn>
Date: Wed, 5 Aug 2026 15:15:54 +0800
Subject: [PATCH] refactor(frontend): enhance MobileCallPage layout and button
 accessibility

Refactor the layout of the MobileCallPage component to improve structure and accessibility. Replace the Button component with a native button element, adding appropriate aria-labels and titles for better screen reader support. Adjust the positioning of elements for a more cohesive user experience.
---
 .../src/components/pages/MobileCallPage.tsx   | 43 ++++++++++++-------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/pages/MobileCallPage.tsx b/frontend/src/components/pages/MobileCallPage.tsx
index 7b61196..4c7c6ad 100644
--- a/frontend/src/components/pages/MobileCallPage.tsx
+++ b/frontend/src/components/pages/MobileCallPage.tsx
@@ -12,7 +12,6 @@ import {
   ScanLine,
   Video,
 } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { NetworkQualityIndicator } from "@/components/network-quality-indicator";
 import {
   DropdownMenu,
@@ -542,12 +541,19 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
       </div>
 
       {!inCall && (
-        <div className="absolute inset-0 z-[2] flex items-center justify-center px-8">
-          <div className="flex max-w-sm flex-col items-center text-center">
-            <h1 className="text-2xl font-medium leading-tight text-white">
-              {assistantName || "助手"}
-            </h1>
-            <div className="relative mt-10 inline-flex">
+        <>
+          <div className="absolute inset-0 z-[2] flex items-center justify-center px-8">
+            <div className="flex max-w-sm flex-col items-center text-center">
+              <h1 className="text-2xl font-medium leading-tight text-white">
+                {assistantName || "助手"}
+              </h1>
+              {error && (
+                <p className="mt-4 text-xs leading-5 text-white/65">{error}</p>
+              )}
+            </div>
+          </div>
+          <div className="absolute bottom-[max(1.25rem,env(safe-area-inset-bottom))] left-1/2 z-10 flex -translate-x-1/2 flex-col items-center gap-2 landscape:bottom-[max(1rem,env(safe-area-inset-bottom))]">
+            <div className="relative flex size-14 items-center justify-center min-[380px]:size-16">
               <span
                 aria-hidden
                 className="mobile-call-ripple pointer-events-none absolute inset-0 rounded-full bg-white/35"
@@ -556,23 +562,28 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
                 aria-hidden
                 className="mobile-call-ripple mobile-call-ripple-delay pointer-events-none absolute inset-0 rounded-full bg-white/25"
               />
-              <Button
+              <button
                 type="button"
                 onClick={() => {
                   setView("chat");
                   void startCall();
                 }}
-                className="relative z-10 h-12 gap-2 rounded-full bg-white px-6 text-[#07101a] shadow-[0_0_24px_rgba(255,255,255,0.35)] hover:bg-white/90"
+                aria-label={
+                  status === "failed" || callEnded ? "重新开始通话" : "开始通话"
+                }
+                title={
+                  status === "failed" || callEnded ? "重新开始通话" : "开始通话"
+                }
+                className="relative z-10 flex size-14 items-center justify-center rounded-full bg-white text-[#07101a] shadow-[0_0_24px_rgba(255,255,255,0.35)] transition-transform hover:scale-105 hover:bg-white/90 active:scale-95 min-[380px]:size-16"
               >
-                <Phone size={19} />
-                {status === "failed" || callEnded ? "重新开始通话" : "开始通话"}
-              </Button>
+                <Phone className="size-6 min-[380px]:size-7" />
+              </button>
             </div>
-            {error && (
-              <p className="mt-4 text-xs leading-5 text-white/65">{error}</p>
-            )}
+            <span className="text-xs text-white/65">
+              {status === "failed" || callEnded ? "重新开始通话" : "开始通话"}
+            </span>
           </div>
-        </div>
+        </>
       )}
 
       {inCall && (