feat: implement header component with Enka, FreeSR, and extra setting management modals

src/components/extraSettingBar/index.tsx

@@ -79,7 +79,7 @@ export default function ExtraSettingBar() {
   const currentLineup = extraData?.theory_craft?.custom_lineup || []
 
   return (
-    <div className="max-w-4xl mx-auto space-y-4 pb-2">
+    <div className="w-full space-y-4 pb-2">
       {/* THEORY CRAFT */}
       {extraData?.theory_craft && (
         <section className="relative z-30 rounded-2xl bg-base-200/40 border border-white/10 shadow-xs backdrop-blur-sm transition-all duration-200">

src/components/header/index.tsx

@@ -637,13 +637,13 @@ export default function Header() {
             {modalConfigs?.map(({ id, title, onClose, content }) => (
                 <dialog key={id} id={id} className="modal">
                     <div className={`modal-box w-11/12 ${
-                        id === 'monster_modal' 
-                            ? 'max-w-[92vw] sm:max-w-[88vw] h-[85vh]' 
-                            : id === 'extra_modal'
-                            ? 'max-w-3xl lg:max-w-4xl max-h-[88vh]'
+                        id === 'monster_modal' || id === 'import_modal' || id === 'extra_modal'
+                            ? 'max-w-[95vw] sm:max-w-[90vw] lg:max-w-[85vw] 2xl:max-w-[1500px] h-[88vh]' 
                             : id === 'connect_modal'
-                            ? 'max-w-lg max-h-[85vh]'
-                            : 'max-w-2xl max-h-[90vh]'
+                            ? 'max-w-[95vw] sm:max-w-2xl md:max-w-3xl lg:max-w-4xl max-h-[88vh]'
+                            : id === 'changelog_modal'
+                            ? 'max-w-[95vw] sm:max-w-2xl md:max-w-3xl lg:max-w-4xl h-[85vh]'
+                            : 'max-w-[92vw] sm:max-w-[88vw] 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">

src/components/importBar/enka.tsx

@@ -167,8 +167,7 @@ export default function EnkaImport() {
     };
 
     return (
-        <div className="bg-base-100 p-4 sm:p-6 rounded-2xl">
-            <div className="max-w-7xl mx-auto space-y-6">
+        <div className="w-full space-y-6">
             {/* Header */}
             <div className="space-y-4">
                 <h1 className="text-base-content text-xl sm:text-2xl font-bold">HSR UID</h1>
@@ -235,7 +234,7 @@ export default function EnkaImport() {
                 </div>
             )}
             {/* Character Grid */}
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 sm:gap-6">
                 {validCharacters.map((character) => (
                     <CharacterInfoCard
                         key={character.avatarId}
@@ -246,6 +245,5 @@ export default function EnkaImport() {
                 ))}
             </div>
         </div>
-        </div>
     );
 }

src/components/importBar/freesr.tsx

@@ -189,8 +189,7 @@ export default function FreeSRImport() {
     }
 
     return (
-        <div className="bg-base-100 p-4 sm:p-6 rounded-2xl">
-            <div className="max-w-7xl mx-auto space-y-6">
+        <div className="w-full space-y-6">
             {/* Header */}
             <div className="space-y-4">
                 <h1 className="text-base-content text-xl sm:text-2xl font-bold">{transI18n("freeSRImport")}</h1>
@@ -244,7 +243,7 @@ export default function FreeSRImport() {
                 </div>
             )}
             {/* Character Grid */}
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 sm:gap-6">
                 {validFreeSRData && Object.values(validFreeSRData.avatars).filter(it => mapAvatar?.[it.avatar_id]).map((character) => {
                     return (
                         <CharacterInfoCard
@@ -257,6 +256,5 @@ export default function FreeSRImport() {
                 })}
             </div>
         </div>
-        </div>
     )
 }