UPDATE: Responsive for mobile

messages/vi.json

@@ -197,6 +197,7 @@
 		"selectPFEvent": "Chọn sự kiện PF",
 		"selectASEvent": "Chọn sự kiện AS",
 		"selectCEEvent": "Chọn sự kiện CE",
+		"selectPEAKEvent": "Chọn sự kiện PEAK",
 		"selectEvent": "Chọn sự kiện",
 		"selectFloor": "Chọn tầng",
 		"selectSide": "Chọn nửa trận",
@@ -237,10 +238,9 @@
 		"maxAllSuccess": "Đã thiết lập cấp độ kỹ năng tối đa thành công.",
 		"maxAllFailed": "Thiết lập cấp độ kỹ năng tối đa thất bại.",
 		"noRelicEquipped": "Không có di vật",
-		"anomalyArbitration": "Phán Quyết Dị Thường",
+		"anomalyArbitration": "Trọng tài dị tướng",
 		"normalMode": "Chế độ thường",
 		"hardMode": "Chế độ khó",
-		"selectPEAKEvent": "Chọn sự kiện",
 		"mode": "Chế độ",
 		"selectMode": "Chọn chế độ",
 		"rollBack": "Quay lại bước trước",

src/components/monsterBar/as.tsx

@@ -146,7 +146,7 @@ export default function AsBar() {
 
     if (!ASEvent) return null
     return (
-        <div className="container mx-auto px-4 py-8 relative">
+        <div className="py-8 relative">
 
             {/* Title Card */}
             <div className="rounded-xl p-4 mb-2 border border-warning">
@@ -243,6 +243,7 @@ export default function AsBar() {
             </div>
 
             {/* Enemy Waves */}
+            {(as_config?.challenge_id ?? 0) !== 0 && (
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                     {/* First Half */}
                     <div className="rounded-xl p-4 mt-2 border border-warning">
@@ -343,6 +344,8 @@ export default function AsBar() {
                         ))}
                     </div>
                 </div>
+            )}
+
         </div>
     )
 }

src/components/monsterBar/ce.tsx

@@ -111,7 +111,7 @@ export default function CeBar() {
     }, [stageSearchTerm])
 
     return (
-        <div className="p-6 z-4 h-full w-full" onClick={() => {
+        <div className="z-4 py-8 h-full w-full" onClick={() => {
                      
                         setShowSearchWaveId(null)
                         setShowSearchStage(false)
@@ -217,7 +217,7 @@ export default function CeBar() {
                 {ce_config.monsters.map((wave, waveIndex) => (
                     <div key={waveIndex} className="card border border-slate-700/50 ">
                         <div className="card-body p-6">
-                            <div className="flex items-center justify-between mb-4">
+                            <div className="flex items-center flex-wrap justify-between mb-4">
                                 <h2 className="text-xl font-bold text-white">{transI18n("wave")} {waveIndex + 1}</h2>
                                 <div className="flex gap-2">
                                     <button
@@ -286,7 +286,7 @@ export default function CeBar() {
                                         <div className="card border hover:border-slate-500 transition-colors w-full h-full">
                                             <div className="card-body p-4">
                                                 <button
-                                                    className="btn btn-xs btn-success absolute -top-2 right-5 opacity-50 group-hover:opacity-100 transition-opacity"
+                                                    className="btn btn-xs btn-success absolute -top-2 right-12 opacity-50 group-hover:opacity-100 transition-opacity"
                                                     onClick={() => {
                                                         const newCeConfig = cloneDeep(ce_config)
                                             
@@ -301,7 +301,7 @@ export default function CeBar() {
                                                     <CopyPlus className="w-3 h-3" />
                                                 </button>
                                                 <button
-                                                    className="btn btn-xs btn-error absolute -top-2 -right-4 opacity-50 group-hover:opacity-100 transition-opacity"
+                                                    className="btn btn-xs btn-error absolute -top-2 right-2 opacity-50 group-hover:opacity-100 transition-opacity"
                                                     onClick={() => {
                                                         const newCeConfig = cloneDeep(ce_config)
                                                         newCeConfig.monsters[waveIndex].splice(memberIndex, 1)

src/components/monsterBar/index.tsx

@@ -15,20 +15,35 @@ export default function MonsterBar() {
         { name: transI18n("memoryOfChaos"), icon: 'AbyssIcon01', value: 'MOC' },
         { name: transI18n("pureFiction"), icon: 'ChallengeStory', value: 'PF' },
         { name: transI18n("apocalypticShadow"), icon: 'ChallengeBoss', value: 'AS' },
-        { name: transI18n("anomalyArbitration"), icon: 'AbyssIcon02', value: 'PEAK' },
+        { name: transI18n("anomalyArbitration"), icon: 'ChallengePeakIcon', value: 'PEAK' },
         { name: transI18n("customEnemy"), icon: 'MonsterIcon', value: 'CE' },
         { name: transI18n("simulatedUniverse"), icon: 'SimulatedUniverse', value: 'SU' },
+
     ];
 
 
     return (
         <div className="min-h-screen">
             {/* Header Navigation */}
-            <nav className="border-b border-warning/30 relative">
+            <nav className="border-b border-warning/30 relative pb-2">
-                <div className="container mx-auto px-4">
                 <div className="flex items-center justify-center">
-                        {/* Navigation Tabs */}
+                    {/* Mobile Select */}
-                        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-1">
+                    <div className="block md:hidden w-full">
+                        <select
+                            className="select select-bordered w-full"
+                            value={battle_type.toUpperCase()}
+                            onChange={(e) => setBattleType(e.target.value.toUpperCase())}
+                        >
+                            {navItems.map((item) => (
+                                <option key={item.name} value={item.value.toUpperCase()}>
+                                    {item.name}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+
+                    {/* Desktop Tabs */}
+                    <div className="hidden md:grid grid-cols-3 lg:grid-cols-6 gap-1">
                         {navItems.map((item) => (
                             <button
                                 key={item.name}
@@ -48,25 +63,18 @@ export default function MonsterBar() {
                                             : undefined
                                     }
                                 >
-                                        <Image src={`/icon/${item.icon}.webp`} alt={item.name} width={24} height={24} />
+                                    <Image
-                                    </span>
+                                        src={`/icon/${item.icon}.webp`}
-                                    <span
+                                        alt={item.name}
-                                        style={
+                                        width={24}
-                                            battle_type.toUpperCase() === item.value.toUpperCase()
+                                        height={24}
-                                                ? {
+                                    />
-                                                    filter:
-                                                        'brightness(0) saturate(100%) invert(63%) sepia(78%) saturate(643%) hue-rotate(1deg) brightness(93%) contrast(89%)',
-                                                }
-                                                : undefined
-                                        }
-                                    >
-                                        <span className="font-medium">{item.name}</span>
                                 </span>
+                                <span>{item.name}</span>
                             </button>
                         ))}
                     </div>
                 </div>
-                </div>
             </nav>
 
             {(battle_type.toUpperCase() === "DEFAULT" || battle_type.toUpperCase() === "") && (

src/components/monsterBar/moc.tsx

@@ -113,7 +113,7 @@ export default function MocBar() {
     ])
     if (!MOCEvent) return null
     return (
-        <div className="container mx-auto px-4 py-8 relative">
+        <div className="py-8 relative">
 
             {/* Title Card */}
             <div className="rounded-xl p-4 mb-2 border border-warning">
@@ -223,6 +223,7 @@ export default function MocBar() {
             </div>
 
             {/* Enemy Waves */}
+            {(moc_config?.challenge_id ?? 0) !== 0 && (
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                     {/* First Half */}
                     <div className="rounded-xl p-4 mt-2 border border-warning">
@@ -323,6 +324,8 @@ export default function MocBar() {
                         ))}
                     </div>
                 </div>
+            )}
+
         </div>
     )
 }

src/components/monsterBar/peak.tsx

@@ -101,7 +101,7 @@ export default function PeakBar() {
     if (!PEAKEvent) return null
 
     return (
-        <div className="container mx-auto px-4 py-8 relative">
+        <div className="py-8 relative">
 
             {/* Title Card */}
             <div className="rounded-xl p-4 mb-2 border border-warning">
@@ -113,7 +113,7 @@ export default function PeakBar() {
                         }))}
                         excludeSet={[]}
                         selectedCustomSet={peak_config.event_id.toString()}
-                        placeholder={transI18n("selectASEvent")}
+                        placeholder={transI18n("selectPEAKEvent")}
                         setSelectedCustomSet={(id) => setPeakConfig({ ...peak_config, event_id: Number(id), challenge_id: 0, buff_id: 0 })}
                     />
                 </div>
@@ -216,6 +216,8 @@ export default function PeakBar() {
             </div>
 
             {/* Enemy Waves */}
+
+            {(peak_config?.challenge_id ?? 0) !== 0  && (
                 <div className="grid grid-cols-1 gap-4">
 
                     <div className="rounded-xl p-4 mt-2 border border-warning">
@@ -267,6 +269,8 @@ export default function PeakBar() {
                         ))}
                     </div>
                 </div>
+            )}
+
         </div>
     )
 }

src/components/monsterBar/pf.tsx

@@ -120,7 +120,7 @@ export default function PfBar() {
     if (!PFEvent) return null
 
     return (
-        <div className="container mx-auto px-4 py-8 relative">
+        <div className="py-8 relative">
 
             {/* Title Card */}
             <div className="rounded-xl p-4 mb-2 border border-warning">
@@ -138,7 +138,8 @@ export default function PfBar() {
                             ...pf_config,
                             event_id: Number(id),
                             challenge_id: mapPFInfo[Number(id)]?.Level.slice(-1)[0]?.Id || 0,
-                            buff_id: 0 })}
+                            buff_id: 0
+                        })}
                     />
                 </div>
                 {/* Settings */}
@@ -229,6 +230,8 @@ export default function PfBar() {
             </div>
 
             {/* Enemy Waves */}
+
+            {(pf_config?.challenge_id ?? 0) !== 0 && (
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                     {/* First Half */}
                     <div className="rounded-xl p-4 mt-2 border border-warning">
@@ -330,6 +333,8 @@ export default function PfBar() {
                         ))}
                     </div>
                 </div>
+            )}
+
         </div>
     )
 }

src/components/relicsInfo/index.tsx

@@ -174,6 +174,7 @@ export default function RelicsInfo() {
                         } else {
                           setSelectedRelicSlot(item)
                         }
+                        handlerChangeRelic(item)
                       }}
                       className="cursor-pointer"
                     >

src/components/skillsInfo/index.tsx

@@ -189,8 +189,9 @@ export default function SkillsInfo() {
                                             setSkillSelected(btn.id === skillSelected ? null : btn.id)
                                         }}
                                         style={{
-                                            left: `calc(${btn.left} - var(--size-${btn.size}) / 2)`,
+                                            left: btn.left,
-                                            top: `calc(${btn.top} - var(--size-${btn.size}) / 2)`,
+                                            top: btn.top,
+                                            transform: "translate(-50%, -50%)",
                                           }}
                                     >
                                         <Image