style: fix code formatting in settings components

- Improve line breaks and indentation in MaiaModelSettings.tsx
- Fix text wrapping in SoundSettings.tsx
- Apply consistent code formatting per ESLint/Prettier rules

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: kevinjosethomas

src/components/Settings/MaiaModelSettings.tsx

@@ -119,18 +119,24 @@ export const MaiaModelSettings: React.FC = () => {
   return (
     <div className="from-white/8 to-white/4 group flex flex-col gap-4 rounded-lg border border-white/10 bg-gradient-to-br px-5 pb-0 pt-5 backdrop-blur-md transition-all duration-300">
       <div className="flex flex-col items-start justify-between">
-        <h3 className="text-lg font-semibold text-white/95">Maia Neural Network Model</h3>
+        <h3 className="text-lg font-semibold text-white/95">
+          Maia Neural Network Model
+        </h3>
         <p className="text-sm text-white/70">
-          Manage your locally stored Maia chess engine model. The model is downloaded once and stored in your browser for offline use.
+          Manage your locally stored Maia chess engine model. The model is
+          downloaded once and stored in your browser for offline use.
         </p>
       </div>
       <div className="flex flex-col gap-2">
         {/* Warning displayed above sections so bottom aligns with card */}
         {!storageInfo?.supported && (
           <div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3 text-yellow-200">
             <p className="text-sm">
-              <span className="material-symbols-outlined mr-2 inline text-base align-middle text-yellow-200">warning</span>
-              IndexedDB storage is not supported in your browser. Model management features are unavailable.
+              <span className="material-symbols-outlined mr-2 inline align-middle text-base text-yellow-200">
+                warning
+              </span>
+              IndexedDB storage is not supported in your browser. Model
+              management features are unavailable.
             </p>
           </div>
         )}
@@ -140,19 +146,26 @@ export const MaiaModelSettings: React.FC = () => {
           {/* Status section */}
           <div className="px-5 py-4 text-white/90">
             <div className="flex items-center gap-3">
-              <span className={`material-symbols-outlined text-xl ${statusDisplay.color}`}>
+              <span
+                className={`material-symbols-outlined text-xl ${statusDisplay.color}`}
+              >
                 {statusDisplay.icon}
               </span>
               <div className="flex flex-col">
                 <p className="font-medium text-white">Model Status</p>
-                <p className={`text-sm ${statusDisplay.color}`}>{statusDisplay.text}</p>
+                <p className={`text-sm ${statusDisplay.color}`}>
+                  {statusDisplay.text}
+                </p>
               </div>
             </div>
 
             {status === 'downloading' && (
               <div className="mt-3">
                 <div className="h-2 w-full rounded-full bg-white/10">
-                  <div className="h-2 rounded-full bg-red-500/70 transition-all duration-300" style={{ width: `${progress}%` }} />
+                  <div
+                    className="h-2 rounded-full bg-red-500/70 transition-all duration-300"
+                    style={{ width: `${progress}%` }}
+                  />
                 </div>
               </div>
             )}
@@ -161,7 +174,9 @@ export const MaiaModelSettings: React.FC = () => {
           {/* Storage Information section */}
           {storageInfo && (
             <div className="border-t border-white/10 px-5 py-4 text-white/90">
-              <h4 className="mb-3 font-medium text-white">Storage Information</h4>
+              <h4 className="mb-3 font-medium text-white">
+                Storage Information
+              </h4>
               <div className="grid grid-cols-1 gap-2 text-sm md:grid-cols-2">
                 {storageInfo.modelSize && (
                   <div className="flex justify-between">
@@ -196,7 +211,9 @@ export const MaiaModelSettings: React.FC = () => {
                     onClick={handleRedownloadModel}
                     className="flex items-center justify-center gap-2 rounded-md border border-red-500/30 bg-red-500/20 px-4 py-2 text-red-200 transition-all duration-200 hover:border-red-500/40 hover:bg-red-500/30"
                   >
-                    <span className="material-symbols-outlined text-base text-red-200">download</span>
+                    <span className="material-symbols-outlined text-base text-red-200">
+                      download
+                    </span>
                     Download Model
                   </button>
                 )}
@@ -208,7 +225,9 @@ export const MaiaModelSettings: React.FC = () => {
                       disabled={status !== 'ready'}
                       className="flex items-center justify-center gap-2 rounded-md border border-white/10 bg-white/5 px-4 py-2 text-white/90 backdrop-blur-sm transition-all duration-200 hover:border-white/20 hover:bg-white/10 disabled:opacity-50"
                     >
-                      <span className="material-symbols-outlined text-base text-white/80">refresh</span>
+                      <span className="material-symbols-outlined text-base text-white/80">
+                        refresh
+                      </span>
                       Re-download
                     </button>
 
@@ -217,7 +236,9 @@ export const MaiaModelSettings: React.FC = () => {
                       disabled={isDeleting || status !== 'ready'}
                       className="flex items-center justify-center gap-2 rounded-md border border-red-500/30 bg-red-500/20 px-4 py-2 text-red-200 transition-all duration-200 hover:border-red-500/40 hover:bg-red-500/30 disabled:opacity-50"
                     >
-                      <span className="material-symbols-outlined text-base text-red-200">delete</span>
+                      <span className="material-symbols-outlined text-base text-red-200">
+                        delete
+                      </span>
                       {isDeleting ? 'Deleting...' : 'Delete Model'}
                     </button>
                   </>

src/components/Settings/SoundSettings.tsx

@@ -33,7 +33,9 @@ export const SoundSettings: React.FC = () => {
         {/* Sound Toggle */}
         <div className="flex items-center justify-between">
           <div className="flex flex-col">
-            <span className="text-sm font-medium text-white/90">Enable Move Sounds</span>
+            <span className="text-sm font-medium text-white/90">
+              Enable Move Sounds
+            </span>
             <p className="text-xs text-white/70">
               Play sounds when chess pieces are moved or captured
             </p>