style: enhance layout and typography for Browse, Favorites, and Settings pages

app/browse/page.tsx

@@ -91,13 +91,18 @@ export default function BrowsePage() {
   }
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8">
+    <div className="container mx-auto p-6 pb-24 max-w-none">
-    <>
+      <div className="space-y-6">
-      <Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
+        <div className="text-left">
-        <TabsContent value="music" className="border-none p-0 outline-hidden flex flex-col grow">
+          <h1 className="text-3xl font-semibold tracking-tight">Browse</h1>
+          <p className="text-muted-foreground">Explore your complete music library</p>
+        </div>
         
-        <div className="flex items-center justify-between">
+        <Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
-            <div className="space-y-1">
+          <TabsContent value="music" className="border-none p-0 outline-hidden flex flex-col grow">
+          
+          <div className="flex items-center justify-between">
+              <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
                 Artists
               </p>
@@ -178,7 +183,7 @@ export default function BrowsePage() {
           </div>
         </TabsContent>
       </Tabs>
-    </>
+      </div>
     </div>
   );
 }

app/favorites/page.tsx

@@ -118,16 +118,24 @@ const FavoritesPage = () => {
 
   if (!isConnected) {
     return (
-      <div className="container mx-auto p-6">
+      <div className="container mx-auto p-6 pb-24 max-w-none">
-        <div className="text-center">
+        <div className="space-y-6">
-          <p className="text-muted-foreground">Please connect to your Navidrome server to view favorites.</p>
+          <div className="text-left">
+            <h1 className="text-3xl font-semibold tracking-tight">Favorites</h1>
+            <p className="text-muted-foreground">Please connect to your Navidrome server to view favorites.</p>
+          </div>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto p-6 pb-24">
+    <div className="container mx-auto p-6 pb-24 max-w-none">
+      <div className="space-y-6">
+        <div className="text-left">
+          <h1 className="text-3xl font-semibold tracking-tight">Favorites</h1>
+          <p className="text-muted-foreground">Your starred albums, songs, and artists</p>
+        </div>
       <div className="space-y-6">
         <div className="flex items-center gap-3">
           <div>
@@ -257,6 +265,7 @@ const FavoritesPage = () => {
             )}
           </TabsContent>
         </Tabs>
+        </div>
       </div>
     </div>
   );

app/settings/page.tsx

@@ -303,9 +303,9 @@ const SettingsPage = () => {
     };
 
     return (
-        <div className="container mx-auto p-6 pb-24 max-w-2xl">
+        <div className="container mx-auto p-6 pb-24 max-w-none">
             {!isClient ? (
-                <div className="space-y-6">
+                <div className="space-y-6 max-w-2xl mx-auto">
                     <div>
                         <h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
                         <p className="text-muted-foreground">Loading...</p>
@@ -313,13 +313,15 @@ const SettingsPage = () => {
                 </div>
             ) : (
                 <div className="space-y-6">
-                    <div>
+                    <div className="text-left">
                         <h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
                         <p className="text-muted-foreground">Customize your music experience</p>
                     </div>
 
+                <div className="columns-1 md:columns-2 xl:columns-3 gap-6 space-y-0">
+
                 {!hasEnvConfig && (
-                    <Card>
+                    <Card className="break-inside-avoid mb-6">
                         <CardHeader>
                             <CardTitle className="flex items-center gap-2">
                                 <FaServer className="w-5 h-5" />
@@ -408,7 +410,7 @@ const SettingsPage = () => {
                 )}
 
                 {hasEnvConfig && (
-                    <Card>
+                    <Card className="break-inside-avoid mb-6">
                         <CardHeader>
                             <CardTitle className="flex items-center gap-2">
                                 <FaServer className="w-5 h-5" />
@@ -435,7 +437,7 @@ const SettingsPage = () => {
                     </Card>
                 )}
 
-                <Card>
+                <Card className="break-inside-avoid mb-6">
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <FaLastfm className="w-5 h-5" />
@@ -513,7 +515,7 @@ const SettingsPage = () => {
                     </CardContent>
                 </Card> */}
 
-                <Card>
+                <Card className="break-inside-avoid mb-6">
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <Settings className="w-5 h-5" />
@@ -548,7 +550,7 @@ const SettingsPage = () => {
                     </CardContent>
                 </Card>
 
-                <Card>
+                <Card className="break-inside-avoid mb-6">
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <FaLastfm className="w-5 h-5" />
@@ -643,7 +645,7 @@ const SettingsPage = () => {
                     </CardContent>
                 </Card>
 
-                <Card>
+                <Card className="break-inside-avoid mb-6">
                     <CardHeader>
                         <CardTitle>Appearance</CardTitle>
                         <CardDescription>
@@ -692,7 +694,7 @@ const SettingsPage = () => {
                 </Card>
 
                 {/* Theme Preview */}
-                <Card>
+                <Card className="break-inside-avoid mb-6">
                     <CardHeader>
                         <CardTitle>Preview</CardTitle>
                         <CardDescription>
@@ -721,6 +723,7 @@ const SettingsPage = () => {
                     </CardContent>
                 </Card>
                 </div>
+                </div>
             )}
         </div>
     );