fix: update NEXT_PUBLIC_COMMIT_SHA and enhance layout for various pages

.env.local

@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=f25b4dc
+NEXT_PUBLIC_COMMIT_SHA=54a268f

app/browse/page.tsx

@@ -92,19 +92,14 @@ export default function BrowsePage() {
 
   return (
     <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">Browse</h1>
-          <p className="text-muted-foreground">Explore your complete music library</p>
-        </div>
-        
-        <Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
-          <TabsContent value="music" className="border-none p-0 outline-hidden flex flex-col grow">
+      <div className="space-y-2">
+        <div className="h-full flex flex-col space-y-6">
+          <div 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 className="text-3xl font-semibold tracking-tight">
+                Browse Artists
               </p>
               <p className="text-sm text-muted-foreground">
                 the people who make the music
@@ -135,7 +130,7 @@ export default function BrowsePage() {
           </div>
           <div className="flex items-center justify-between">
             <div className="space-y-1">
-              <p className="text-2xl font-semibold tracking-tight">
+              <p className="text-3xl font-semibold tracking-tight">
                 Browse Albums
               </p>
               <p className="text-sm text-muted-foreground">
@@ -181,8 +176,8 @@ export default function BrowsePage() {
               <ScrollBar orientation="vertical" />
             </ScrollArea>
           </div>
-        </TabsContent>
-      </Tabs>
+        </div>
+      </div>
       </div>
     </div>
   );

app/components/ihateserverside.tsx

@@ -43,10 +43,10 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
   if (!isClient) {
     // Return a basic layout during SSR to match initial client render
     return (
-      <div className="hidden md:flex md:flex-col md:h-screen">
+      <div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
         {/* Top Menu */}
         <div
-          className="sticky z-10 bg-background border-b"
+          className="sticky z-10 bg-background border-b w-full"
           style={{
             left: 'env(titlebar-area-x, 0)',
             top: 'env(titlebar-area-y, 0)',
@@ -61,7 +61,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
         </div>
 
         {/* Main Content Area */}
-        <div className="flex-1 flex overflow-hidden">
+        <div className="flex-1 flex overflow-hidden w-full">
           <div className="w-64 shrink-0 border-r transition-all duration-200">
             <Sidebar
               playlists={playlists}
@@ -71,7 +71,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
               onTransitionEnd={handleTransitionEnd}
             />
           </div>
-          <div className="flex-1 overflow-y-auto">
+          <div className="flex-1 overflow-y-auto min-w-0">
             <div>{children}</div>
           </div>
         </div>
@@ -83,10 +83,10 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
     );
   }
   return (
-    <div className="hidden md:flex md:flex-col md:h-screen">
+    <div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
       {/* Top Menu */}
       <div
-        className="sticky z-10 bg-background border-b"
+        className="sticky z-10 bg-background border-b w-full"
         style={{
           left: 'env(titlebar-area-x, 0)',
           top: 'env(titlebar-area-y, 0)',
@@ -101,7 +101,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
       </div>
 
       {/* Main Content Area */}
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden w-full">
         {isSidebarVisible && (
           <div className={`${isSidebarCollapsed ? 'w-16' : 'w-64'} shrink-0 border-r transition-all duration-200`}>
             <Sidebar
@@ -113,7 +113,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
             />
           </div>
         )}
-        <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto min-w-0">
           <div>{children}</div>
         </div>
       </div>

app/components/menu.tsx

@@ -111,9 +111,9 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
 
     return (
       <>
-      <div className="flex items-center justify-between w-full ml-2">
+      <div className="flex items-center justify-between w-full">
         <Menubar
-          className="rounded-none border-b border-none px-0 lg:px-0 flex-1"
+          className="rounded-none border-b border-none px-2 lg:px-2 flex-1 min-w-0"
           style={{
             minWidth: 0,
             WebkitAppRegion: "drag"

app/library/playlists/page.tsx

@@ -31,7 +31,7 @@ const PlaylistsPage: React.FC = () => {
   }
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8">
+    <div className="container mx-auto p-6 pb-24 max-w-none">
       <Tabs defaultValue="music" className="h-full space-y-6">
         <TabsContent value="music" className="border-none p-0 outline-hidden">
           <div className="flex items-center justify-between">

app/page.tsx

@@ -181,7 +181,7 @@ export default function MusicPage() {
 
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8 pb-24">
+    <div className="container mx-auto p-6 pb-24 max-w-none">
       <div className="relative rounded-lg p-8">
           <div className="relative rounded-sm p-10">
             <div

app/queue/page.tsx

@@ -19,7 +19,7 @@ const QueuePage: React.FC = () => {
   };
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8 pb-24">
+    <div className="container mx-auto p-6 pb-24 max-w-none">
       <div className="space-y-6">
         {/* Header */}
         <div className="flex items-center justify-between">

app/radio/page.tsx

@@ -135,17 +135,15 @@ const RadioStationsPage = () => {
   }
 
   return (
-    <div className="container mx-auto p-6 max-w-4xl">
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
+    <div className="container mx-auto p-6 pb-24 max-w-none">
+      <div className="space-y-2">
+        <div className="flex items-center justify-between border-b pb-4 mb-4">
           <div>
-            <h1 className="text-3xl font-semibold tracking-tight flex items-center gap-2">
-              <FaWifi className="w-8 h-8" />
-              Radio Stations
-            </h1>
-            <p className="text-muted-foreground">Listen to internet radio streams</p>
+            <h1 className="text-3xl font-bold">Radio Stations</h1>
+            <p className="text-muted-foreground text-sm">
+              Listen to internet radio stations.
+            </p>
           </div>
-          
           <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
             <DialogTrigger asChild>
               <Button>

app/search/page.tsx

@@ -101,7 +101,7 @@ export default function SearchPage() {
   };
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8 pb-32">
+    <div className="container mx-auto p-6 pb-32 max-w-none">
       <div className="space-y-6">
         {/* Header */}
         <div className="space-y-1">

app/settings/page.tsx

@@ -303,7 +303,7 @@ const SettingsPage = () => {
     };
 
     return (
-        <div className="container mx-auto p-6 pb-24 max-w-none">
+        <div className="p-6 pb-24 w-full">
             {!isClient ? (
                 <div className="space-y-6 max-w-2xl mx-auto">
                     <div>