From eac5739779dcec5ff2a64081d6dbfdbc879863a9 Mon Sep 17 00:00:00 2001
From: Temuulen Ankhbayar <a.temuuleenn@gmail.com>
Date: Mon, 9 Mar 2026 17:25:58 +0900
Subject: [PATCH] fix: replace raw elements in MnpForm and PublicInternetPlans
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Final batch from services agent — MnpForm select/checkbox/label
and PublicInternetPlans button replacements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/features/services/components/sim/MnpForm.tsx       | 4 ++--
 .../src/features/services/views/PublicInternetPlans.tsx    | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/portal/src/features/services/components/sim/MnpForm.tsx b/apps/portal/src/features/services/components/sim/MnpForm.tsx
index 4b06541f..63e69486 100644
--- a/apps/portal/src/features/services/components/sim/MnpForm.tsx
+++ b/apps/portal/src/features/services/components/sim/MnpForm.tsx
@@ -43,9 +43,9 @@ function MnpField({
 }: MnpFieldProps) {
   return (
     <div>
-      <label htmlFor={id} className={LABEL_CLASS}>
+      <Label htmlFor={id} className={LABEL_CLASS}>
         {label}
-      </label>
+      </Label>
       <input
         type={type}
         id={id}
diff --git a/apps/portal/src/features/services/views/PublicInternetPlans.tsx b/apps/portal/src/features/services/views/PublicInternetPlans.tsx
index 1bbcf9e9..28c29295 100644
--- a/apps/portal/src/features/services/views/PublicInternetPlans.tsx
+++ b/apps/portal/src/features/services/views/PublicInternetPlans.tsx
@@ -652,16 +652,17 @@ function FaqItem({ question, answer }: { question: string; answer: string }) {
 
   return (
     <div className="border border-border rounded-xl overflow-hidden bg-card">
-      <button
+      <Button
+        variant="ghost"
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-start justify-between gap-3 p-4 text-left hover:bg-muted/50 transition-colors"
+        className="w-full flex items-start justify-between gap-3 p-4 text-left hover:bg-muted/50 transition-colors h-auto whitespace-normal rounded-none"
       >
         <span className="font-medium text-foreground">{question}</span>
         <motion.div animate={{ rotate: isOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>
           <ChevronDown className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
         </motion.div>
-      </button>
+      </Button>
       <AnimatePresence initial={false}>
         {isOpen && (
           <motion.div