remove max width from list pages

src/renderer/features/albums/components/album-list-header.tsx

@@ -27,7 +27,7 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <PageTitle title={title} />
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>

src/renderer/features/albums/routes/album-list-route.tsx

@@ -5,7 +5,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
 import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { AlbumListQuery } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
@@ -48,10 +47,8 @@ const AlbumListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
                 <AlbumListHeader />
                 <AlbumListContent />
-                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -24,7 +24,7 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>

src/renderer/features/artists/components/artist-list-header.tsx

@@ -24,7 +24,7 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>

src/renderer/features/artists/routes/album-artist-list-route.tsx

@@ -4,7 +4,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
 import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -25,10 +24,8 @@ const AlbumArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
                 <AlbumArtistListHeader />
                 <AlbumArtistListContent />
-                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/artists/routes/artist-list-route.tsx

@@ -4,7 +4,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { ArtistListContent } from '/@/renderer/features/artists/components/artist-list-content';
 import { ArtistListHeader } from '/@/renderer/features/artists/components/artist-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -25,10 +24,8 @@ const ArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
                 <ArtistListHeader />
                 <ArtistListContent />
-                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/genres/components/genre-list-header.tsx

@@ -24,7 +24,7 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>

src/renderer/features/genres/routes/genre-list-route.tsx

@@ -4,7 +4,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { GenreListContent } from '/@/renderer/features/genres/components/genre-list-content';
 import { GenreListHeader } from '/@/renderer/features/genres/components/genre-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -25,10 +24,8 @@ const GenreListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
                 <GenreListHeader />
                 <GenreListContent />
-                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/playlists/components/playlist-list-header.tsx

@@ -24,7 +24,7 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>

src/renderer/features/playlists/routes/playlist-list-route.tsx

@@ -5,7 +5,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content';
 import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -27,10 +26,8 @@ const PlaylistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
                 <PlaylistListHeader />
                 <PlaylistListContent />
-                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/search/components/search-header.tsx

@@ -13,7 +13,6 @@ import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { SearchInput } from '/@/renderer/features/shared/components/search-input';
-import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Button, ButtonGroup } from '/@/shared/components/button/button';
 import { Flex } from '/@/shared/components/flex/flex';
@@ -30,7 +29,6 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
     const { t } = useTranslation();
     const { itemType } = useParams() as { itemType: LibraryItem };
     const [searchParams, setSearchParams] = useSearchParams();
-    const { ref, ...cq } = useContainerQuery();
 
     const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
         setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
@@ -52,10 +50,10 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
     };
 
     return (
-        <Stack gap={0} ref={ref}>
+        <Stack gap={0}>
             <PageHeader>
                 <Flex justify="space-between" w="100%">
-                    <LibraryHeaderBar>
+                    <LibraryHeaderBar ignoreMaxWidth>
                         <LibraryHeaderBar.Title>Search</LibraryHeaderBar.Title>
                     </LibraryHeaderBar>
                     <Group>

src/renderer/features/search/routes/search-route.tsx

@@ -4,7 +4,6 @@ import { useLocation, useParams } from 'react-router';
 import { SearchContent } from '/@/renderer/features/search/components/search-content';
 import { SearchHeader } from '/@/renderer/features/search/components/search-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 
 const SearchRoute = () => {
@@ -15,10 +14,8 @@ const SearchRoute = () => {
 
     return (
         <AnimatedPage key={`search-${navigationId}`}>
-            <LibraryContainer>
             <SearchHeader navigationId={navigationId} />
             <SearchContent key={`page-${itemType}`} />
-            </LibraryContainer>
         </AnimatedPage>
     );
 };

src/renderer/features/settings/components/settings-header.tsx

@@ -43,7 +43,7 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
     return (
         <Flex ref={ref}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <Flex align="center" justify="space-between" w="100%">
                         <Group wrap="nowrap">
                             <Icon icon="settings" size="5xl" />

src/renderer/features/shared/components/library-header-bar.tsx

@@ -1,5 +1,5 @@
 import { closeAllModals, openModal } from '@mantine/modals';
-import { memo, ReactNode, useCallback } from 'react';
+import { CSSProperties, memo, ReactNode, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './library-header-bar.module.css';
@@ -16,10 +16,18 @@ import { Play } from '/@/shared/types/types';
 
 interface LibraryHeaderBarProps {
     children: ReactNode;
+    ignoreMaxWidth?: boolean;
 }
 
-const LibraryHeaderBarComponent = ({ children }: LibraryHeaderBarProps) => {
+const LibraryHeaderBarComponent = ({ children, ignoreMaxWidth }: LibraryHeaderBarProps) => {
-    return <div className={styles.headerContainer}>{children}</div>;
+    return (
+        <div
+            className={styles.headerContainer}
+            style={ignoreMaxWidth ? ({ maxWidth: 'none' } as CSSProperties) : undefined}
+        >
+            {children}
+        </div>
+    );
 };
 
 interface HeaderPlayButtonProps {

src/renderer/features/songs/components/song-list-header.tsx

@@ -30,7 +30,7 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
         <Stack gap={0}>
             <PageHeader>
                 <Flex justify="space-between" w="100%">
-                    <LibraryHeaderBar>
+                    <LibraryHeaderBar ignoreMaxWidth>
                         <PlayButton />
                         <PageTitle title={title} />
                         <LibraryHeaderBar.Badge

src/renderer/features/songs/routes/song-list-route.tsx

@@ -3,7 +3,6 @@ import { useParams } from 'react-router';
 
 import { ListContext } from '/@/renderer/context/list-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
@@ -48,10 +47,8 @@ const SongListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
                 <SongListHeader />
                 <SongListContent />
-                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );