refactor: update modal layouts for improved structure and responsiveness

src/components/actionBar/index.tsx

@@ -484,8 +484,8 @@ export default function ActionBar() {
         {/* Modals */}
         {modalConfigs.map(({ id, title, onClose, content }) => (
           <dialog key={id} id={id} className="modal">
-            <div className="modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] max-h-[90vh] bg-base-100 text-base-content border border-base-300 shadow-2xl rounded-2xl p-0 overflow-hidden">
-              <div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-300 bg-base-100">
+            <div className="modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-base-300 shadow-2xl rounded-2xl p-0 overflow-hidden">
+              <div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-300 bg-base-100 shrink-0">
                 <h3 className="font-bold text-xl tracking-tight text-primary">
                   {title}
                 </h3>
@@ -496,7 +496,7 @@ export default function ActionBar() {
                   ✕
                 </button>
               </div>
-              <div className="p-4 sm:p-6 overflow-y-auto max-h-[calc(90vh-5rem)]">
+              <div className="p-4 sm:p-6 overflow-y-auto flex-1">
                 {content}
               </div>
             </div>

src/components/avatarInfo/index.tsx

@@ -247,12 +247,16 @@ export default function AvatarInfo() {
                                         <select
                                             value={avatars[avatarSelected?.ID.toString() || ""]?.enhanced || ""}
                                             onChange={(e) => {
-                                                const newAvatar = avatars[avatarSelected?.ID.toString() || ""]
-                                                if (newAvatar) {
-                                                    newAvatar.enhanced = e.target.value
+                                                const currentAvatar = avatars[avatarSelected?.ID.toString() || ""]
+                                                if (currentAvatar && avatarSelected) {
                                                     const skillTree = getSkillTree(avatarSelected, e.target.value)
-                                                    if (skillTree) {
-                                                        newAvatar.data.skills = skillTree
+                                                    const newAvatar = {
+                                                        ...currentAvatar,
+                                                        enhanced: e.target.value,
+                                                        data: {
+                                                            ...currentAvatar.data,
+                                                            skills: skillTree || currentAvatar.data.skills
+                                                        }
                                                     }
                                                     setAvatar(newAvatar)
                                                 }
@@ -296,7 +300,7 @@ export default function AvatarInfo() {
                                     {/* Lightcone Hero Block */}
                                     <div className="grid grid-cols-1 sm:grid-cols-12 gap-4 items-center">
                                         {/* Artwork */}
-                                        <div className="sm:col-span-4 aspect-[3/4] rounded-xl overflow-hidden bg-base-200/60 flex items-center justify-center border border-base-content/10 shadow-xs">
+                                        <div className="sm:col-span-4 aspect-3/4 rounded-xl overflow-hidden bg-base-200/60 flex items-center justify-center border border-base-content/10 shadow-xs">
                                             <Image
                                                 unoptimized
                                                 crossOrigin="anonymous"
@@ -450,8 +454,8 @@ export default function AvatarInfo() {
 
             {/* Lightcone Selection Modal */}
             <dialog id="action_detail_modal" className="modal">
-                <div className="modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] max-h-[90vh] bg-base-100 text-base-content border border-white/10 shadow-2xl rounded-2xl p-0 overflow-hidden">
-                    <div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100">
+                <div className="modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-white/10 shadow-2xl rounded-2xl p-0 overflow-hidden">
+                    <div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100 shrink-0">
                         <h3 className="font-bold text-xl tracking-tight bg-clip-text text-transparent bg-linear-to-r from-primary via-accent to-secondary">
                             {transI18n("lightconeEquipment")}
                         </h3>
@@ -462,7 +466,7 @@ export default function AvatarInfo() {
                             ✕
                         </button>
                     </div>
-                    <div className="p-4 sm:p-6 overflow-y-auto max-h-[calc(90vh-5rem)]">
+                    <div className="p-4 sm:p-6 overflow-y-auto flex-1">
                         <LightconeBar />
                     </div>
                 </div>

src/components/card/characterCard.tsx

@@ -40,7 +40,7 @@ export default function CharacterCard({ data }: CharacterCardProps) {
     >
       {/* Artwork container with vibrant rarity background */}
       <div
-        className={`w-full relative aspect-[3/4] flex items-center justify-center overflow-hidden bg-linear-to-b ${
+        className={`w-full relative aspect-3/4 flex items-center justify-center overflow-hidden bg-linear-to-b ${
           is5Star
             ? "from-yellow-400 via-amber-500/85 to-amber-700/70"
             : is4Star

src/components/card/characterInfoCard.tsx

@@ -43,7 +43,7 @@ export default function CharacterInfoCard({
             onClick={() => onCharacterToggle(character)}
         >
             {/* Character Portrait */}
-            <div className="relative mb-3 aspect-[4/5] rounded-xl overflow-hidden bg-base-300/40 flex items-center justify-center">
+            <div className="relative mb-3 aspect-4/5 rounded-xl overflow-hidden bg-base-300/40 flex items-center justify-center">
                 {avatar && (
                     <>
                         <Image

src/components/card/lightconeCard.tsx

@@ -22,7 +22,7 @@ export default function LightconeCard({ data }: LightconeCardProps) {
         <li className="group relative flex flex-col items-center rounded-xl overflow-hidden bg-base-100 border border-base-content/10 shadow-sm hover:shadow-md cursor-pointer select-none h-full">
             {/* Artwork container with vibrant rarity background */}
             <div
-                className={`w-full relative aspect-[3/4] flex items-center justify-center overflow-hidden bg-linear-to-b ${
+                className={`w-full relative aspect-3/4 flex items-center justify-center overflow-hidden bg-linear-to-b ${
                     is5Star
                         ? "from-yellow-400 via-amber-500/85 to-amber-700/70"
                         : is4Star

src/components/header/index.tsx

@@ -31,6 +31,12 @@ const themes = [
     { label: "Coffee" },
 ];
 
+function setCookieLocale(localeVal: string) {
+    if (typeof document !== "undefined") {
+        document.cookie = `MYNEXTAPP_LOCALE=${localeVal}; path=/; max-age=31536000;`;
+    }
+}
+
 export default function Header() {
     const { changeTheme } = useChangeTheme()
     const { locale, setLocale } = useLocaleStore(
@@ -139,7 +145,7 @@ export default function Header() {
 
     const changeLocale = (newLocale: string) => {
         setLocale(newLocale)
-        document.cookie = `MYNEXTAPP_LOCALE=${newLocale};`
+        setCookieLocale(newLocale)
         router.refresh()
     }
 
@@ -630,7 +636,7 @@ export default function Header() {
             {/* Modals */}
             {modalConfigs?.map(({ id, title, onClose, content }) => (
                 <dialog key={id} id={id} className="modal">
-                    <div className={`modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] ${id === 'monster_modal' ? 'h-[85vh] max-h-[85vh] flex flex-col' : 'max-h-[90vh]'} bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
+                    <div className={`modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] ${id === 'monster_modal' ? 'h-[85vh]' : 'max-h-[90vh]'} max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
                         {/* Modal Header */}
                         <div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100 shrink-0">
                             <h3 className="font-bold text-xl tracking-tight bg-clip-text text-transparent bg-linear-to-r from-primary via-accent to-secondary">

src/components/relicsInfo/index.tsx

@@ -407,8 +407,8 @@ export default function RelicsInfo() {
       {/* Modals */}
       {modalConfigs.map(({ id, title, onClose, content }) => (
         <dialog key={id} id={id} className="modal">
-          <div className={`modal-box ${id === 'quick_view_modal' ? 'w-11/12 max-w-4xl' : 'w-11/12 max-w-[92vw] sm:max-w-[88vw]'} max-h-[90vh] bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
-            <div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100">
+          <div className={`modal-box ${id === 'quick_view_modal' ? 'w-11/12 max-w-4xl' : 'w-11/12 max-w-[92vw] sm:max-w-[88vw]'} max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
+            <div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100 shrink-0">
               <h3 className="font-bold text-xl tracking-tight bg-clip-text text-transparent bg-linear-to-r from-primary via-accent to-secondary">
                 {title}
               </h3>
@@ -420,7 +420,7 @@ export default function RelicsInfo() {
               </button>
             </div>
 
-            <div className="p-4 sm:p-6 overflow-y-auto max-h-[calc(90vh-5rem)]">
+            <div className="p-4 sm:p-6 overflow-y-auto flex-1">
               {content}
             </div>
           </div>