cozy · JF-Cozy · Jun 23, 2025 · Jun 23, 2025 · Jun 23, 2025 · Jun 23, 2025
@@ -85,7 +85,7 @@
     "cozy-realtime": "4.6.0",
     "cozy-search": "^0.6.0",
     "cozy-sharing": "^25.4.0",
-    "cozy-ui": "^123.2.0",
+    "cozy-ui": "^126.5.0",
     "cozy-viewer": "22.0.1",
     "date-fns": "2.30.0",
     "justified-layout": "2.1.2",

@@ -21,8 +21,6 @@ import ButtonClient from 'components/pushClient/Button'
 import { UploadQueue } from '../ducks/upload'
 import PushBanner from 'components/PushBanner'
 
-import styles from '../styles/layout.styl'
-
 const NavLink = genNavLinkForV6(RouterLink)
 
 const FlagshipNavLinks = () => {
@@ -121,7 +119,7 @@ export const Layout = () => (
     </Sidebar>
 
     <UploadQueue />
-    <Main className={styles['pho-content']}>
+    <Main>
       <PushBanner />
       <Outlet />
     </Main>

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Outlet, useNavigate, useLocation } from 'react-router-dom'
 import flow from 'lodash/flow'
+import { Content } from 'cozy-ui/transpiled/react/Layout'
 
 import { withClient } from 'cozy-client'
 import { showModal } from 'react-cozy-helpers'
@@ -159,58 +160,60 @@ class AlbumPhotos extends Component {
         })}
       >
         {(selected, active, selection) => (
-          <div
-            data-testid="album-pho-content-wrapper"
-            className={styles['pho-content-wrapper']}
-          >
-            {album.name && album.photos.data && (
-              <Topbar
-                viewName="albumContent"
-                albumName={album.name}
-                editing={editing}
-                onEdit={this.renameAlbum}
-              >
-                <AlbumToolbar
-                  navigate={navigate}
-                  pathname={pathname}
-                  t={t}
-                  album={album}
-                  sharedWithMe={shared.withMe}
-                  sharedByMe={shared.byMe}
-                  readOnly={shared.readOnly}
-                  onRename={this.editAlbumName}
-                  downloadAlbum={this.downloadAlbum}
-                  deleteAlbum={this.deleteAlbum}
-                  shareAlbum={shareAlbum}
+          <Content className="u-pt-0-s u-pt-1">
+            <div
+              data-testid="album-pho-content-wrapper"
+              className={styles['pho-content-wrapper']}
+            >
+              {album.name && album.photos.data && (
+                <Topbar
+                  viewName="albumContent"
+                  albumName={album.name}
+                  editing={editing}
+                  onEdit={this.renameAlbum}
+                >
+                  <AlbumToolbar
+                    navigate={navigate}
+                    pathname={pathname}
+                    t={t}
+                    album={album}
+                    sharedWithMe={shared.withMe}
+                    sharedByMe={shared.byMe}
+                    readOnly={shared.readOnly}
+                    onRename={this.editAlbumName}
+                    downloadAlbum={this.downloadAlbum}
+                    deleteAlbum={this.deleteAlbum}
+                    shareAlbum={shareAlbum}
+                  />
+                </Topbar>
+              )}
+              {this.state.displayDestroyConfirmModal &&
+                this.renderDestroyConfirm()}
+              {this.state.showAddAlbumModal && (
+                <AddToAlbumModal
+                  onDismiss={this.hideAddAlbumModal}
+                  onSuccess={selection.clear}
+                  photos={selected}
                 />
-              </Topbar>
-            )}
-            {this.state.displayDestroyConfirmModal &&
-              this.renderDestroyConfirm()}
-            {this.state.showAddAlbumModal && (
-              <AddToAlbumModal
-                onDismiss={this.hideAddAlbumModal}
-                onSuccess={selection.clear}
-                photos={selected}
-              />
-            )}
-            {photos && (
-              <PhotoBoard
-                lists={[{ photos }]}
-                selected={selected}
-                photosContext="album_with"
-                showSelection={active}
-                onPhotoToggle={selection.toggle}
-                onPhotosSelect={selection.select}
-                onPhotosUnselect={selection.unselect}
-                fetchStatus={photos.fetchStatus}
-                hasMore={hasMore}
-                fetchMore={fetchMore}
-                lastFetch={lastFetch}
-              />
-            )}
-            <Outlet />
-          </div>
+              )}
+              {photos && (
+                <PhotoBoard
+                  lists={[{ photos }]}
+                  selected={selected}
+                  photosContext="album_with"
+                  showSelection={active}
+                  onPhotoToggle={selection.toggle}
+                  onPhotosSelect={selection.select}
+                  onPhotosUnselect={selection.unselect}
+                  fetchStatus={photos.fetchStatus}
+                  hasMore={hasMore}
+                  fetchMore={fetchMore}
+                  lastFetch={lastFetch}
+                />
+              )}
+              <Outlet />
+            </div>
+          </Content>
         )}
       </Selection>
     )

@@ -1,7 +1,6 @@
 import styles from 'photos/styles/albumsList.styl'
 
 import React from 'react'
-import { Content } from 'cozy-ui/transpiled/react/Layout'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { EmptyPhotos } from 'components/Error/Empty'
@@ -21,16 +20,14 @@ const AlbumsList = ({ data, hasMore, fetchMore, t }) =>
   data.length === 0 ? (
     <EmptyPhotos localeKey="albums" hasTextMobileVersion />
   ) : (
-    <Content>
-      <div className={styles['pho-album-list']}>
-        {data.sort(sortByCreationDate).map(a => (
-          <AlbumItem album={a} key={a.id} />
-        ))}
-        {hasMore && (
-          <LoadMore label={t('Albums.load_more')} fetchMore={fetchMore} />
-        )}
-      </div>
-    </Content>
+    <div className={styles['pho-album-list']}>
+      {data.sort(sortByCreationDate).map(a => (
+        <AlbumItem album={a} key={a.id} />
+      ))}
+      {hasMore && (
+        <LoadMore label={t('Albums.load_more')} fetchMore={fetchMore} />
+      )}
+    </div>
   )
 
 export default translate()(AlbumsList)
@@ -2,6 +2,7 @@ import React from 'react'
 import { Outlet, useNavigate } from 'react-router-dom'
 
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
+import { Content as ContentUi } from 'cozy-ui/transpiled/react/Layout'
 
 import AlbumsToolbar from './AlbumsToolbar'
 import AlbumsList from './AlbumsList'
@@ -29,16 +30,18 @@ const AlbumsView = ({ albums }) => {
     return null
   }
   return (
-    <div
-      data-testid="album-pho-content-wrapper"
-      className={styles['pho-content-wrapper']}
-    >
-      <Topbar viewName="albums">
-        <AlbumsToolbar navigate={navigate} />
-      </Topbar>
-      <Content list={albums} />
-      <Outlet />
-    </div>
+    <ContentUi className="u-pt-0-s u-pt-1">
+      <div
+        data-testid="album-pho-content-wrapper"
+        className={styles['pho-content-wrapper']}
+      >
+        <Topbar viewName="albums">
+          <AlbumsToolbar navigate={navigate} />
+        </Topbar>
+        <Content list={albums} />
+        <Outlet />
+      </div>
+    </ContentUi>
   )
 }
 

@@ -51,12 +51,12 @@ const BackupPageContent = () => {
 
 const BackupPage = () => {
   return (
-    <div
-      data-testid="backup-pho-content-wrapper"
-      className={styles['pho-content-wrapper']}
-    >
-      <Topbar viewName="backup"></Topbar>
-      <Content>
+    <Content className="u-pt-0-s u-pt-1">
+      <div
+        data-testid="backup-pho-content-wrapper"
+        className={styles['pho-content-wrapper']}
+      >
+        <Topbar viewName="backup"></Topbar>
         <BackupActionsProvider>
           <div className={backupStyles['pho-backup-container']}>
             <div className={backupStyles['pho-backup-wrapper']}>
@@ -66,8 +66,8 @@ const BackupPage = () => {
           <AllowPermissionsModal />
           <BackupError />
         </BackupActionsProvider>
-      </Content>
-    </div>
+      </div>
+    </Content>
   )
 }
 

@@ -120,16 +120,14 @@ export default class Selection extends Component {
 
     return (
       <SelectionContext.Provider value={selected}>
-        <div>
-          {active && hasActions && (
-            <SelectionBar
-              selected={selected}
-              hideSelectionBar={this.clear}
-              actions={checkedActions}
-            />
-          )}
-          {children(selected, active, selectionActions)}
-        </div>
+        {active && hasActions && (
+          <SelectionBar
+            selected={selected}
+            hideSelectionBar={this.clear}
+            actions={checkedActions}
+          />
+        )}
+        {children(selected, active, selectionActions)}
       </SelectionContext.Provider>
     )
   }

@@ -127,19 +127,20 @@ class Timeline extends Component {
         })}
       >
         {(selected, active, selection) => (
-          <div
-            data-testid="timeline-pho-content-wrapper"
-            className={styles['pho-content-wrapper']}
-          >
-            <Topbar viewName="photos">
-              <Toolbar
-                disabled={active}
-                uploadPhotos={this.uploadPhotos}
-                selectItems={selection.show}
-                t={t}
-              />
-            </Topbar>
-            <Content>
+          <Content className="u-pt-0-s u-pt-1">
+            <div
+              data-testid="timeline-pho-content-wrapper"
+              className={styles['pho-content-wrapper']}
+            >
+              <Topbar viewName="photos">
+                <Toolbar
+                  disabled={active}
+                  uploadPhotos={this.uploadPhotos}
+                  selectItems={selection.show}
+                  t={t}
+                />
+              </Topbar>
+
               {this.state.displayModal && this.showDeleteConfirm()}
               {this.state.showAddAlbumModal && (
                 <AddToAlbumModal
@@ -161,9 +162,9 @@ class Timeline extends Component {
                 fetchMore={fetchMore}
                 lastFetch={lastFetch}
               />
-            </Content>
-            <Outlet />
-          </div>
+              <Outlet />
+            </div>
+          </Content>
         )}
       </Selection>
     )

@@ -3,21 +3,3 @@
 
 .pho-sidebar
     justify-content  space-between
-
-.pho-content
-    padding 0
-    padding-top 1.875rem
-
-    +small-screen()
-        padding 0
-
-.pho-content-wrapper
-.pho-content-wrapper > [role=main] // @stylint ignore
-    position        relative
-    display         flex
-    flex-direction  column
-    flex            1 1 auto
-    box-sizing      border-box
-    height          auto
-    overflow-x      hidden
-    overflow-y      auto
@@ -8,6 +8,7 @@ import { I18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import { SharingContext } from 'cozy-sharing'
 import { BarProvider } from 'cozy-bar'
+import { Layout } from 'cozy-ui/transpiled/react/Layout'
 
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { HashRouter } from 'react-router-dom'
@@ -53,7 +54,9 @@ const AppLike = ({
               <HashRouter>
                 <BreakpointsProvider>
                   <AlertProvider>
-                    <PushBannerProvider>{children}</PushBannerProvider>
+                    <PushBannerProvider>
+                      <Layout>{children}</Layout>
+                    </PushBannerProvider>
                   </AlertProvider>
                 </BreakpointsProvider>
               </HashRouter>

@@ -5531,10 +5531,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/cozy-tsconfig/-/cozy-tsconfig-1.2.0.tgz#17e61f960f139fae4d26cbac2254b9ab632b269e"
   integrity sha512-TRHnY9goF3FzVlUbP7BcHxuN2XAA4AmppT4fHHZmTKaSwYTByVR1Al+riFMDbce94kJZ1wzl9WNLWQuqzGZ6Cw==
 
-cozy-ui@^123.2.0:
-  version "123.2.0"
-  resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-123.2.0.tgz#e94e2e011c7dcc79f2198eabb1e429c85122e808"
-  integrity sha512-lSV06kRPq3ykjvgRGA90Hpbz7iIw2buyxRga6rMpa6zBlDPy4Yq5m2+DI4U9ul8RdWEVFcJ3/ah7cs8BdHg+hQ==
+cozy-ui@^126.5.0:
+  version "126.5.0"
+  resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-126.5.0.tgz#afd0b375a15bb98b29f132c1795f9e93cde51469"
+  integrity sha512-TxKAeMRfNWU9oIyOL7V2t0ENPxa76St6QD3kpCF8iDK7qUf7ZHIYAQ8+NVH8GS20xNh1NLqxmKWOrrEFtQr2ug==
   dependencies:
     "@babel/runtime" "^7.3.4"
     "@date-io/date-fns" "1"
@@ -5560,6 +5560,7 @@ cozy-ui@^123.2.0:
     react-remove-scroll "^2.4.0"
     react-select "^4.3.0"
     react-swipeable-views "^0.13.3"
+    react-virtuoso "4.12.7"
     rooks "^5.11.2"
 
 [email protected]:
@@ -11950,6 +11951,11 @@ react-use-measure@^2.0.0:
   dependencies:
     debounce "^1.2.0"
 
+[email protected]:
+  version "4.12.7"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.12.7.tgz#300f2585c61d213d4d422420f0d43ffc9674e6f5"
+  integrity sha512-njJp764he6Fi1p89PUW0k2kbyWu9w/y+MwdxmwK2kvdwwzVDbz2c2wMj5xdSruBFVgFTsI7Z85hxZR7aSHBrbQ==
+
 [email protected]:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"