Style timeline

ui/src/components/albumGallery/AlbumBox.tsx

@@ -30,7 +30,7 @@ const AlbumBoxImage = ({ src, ...props }: AlbumBoxImageProps) => {
   }
 
   return (
-    <div className="w-[220px] h-[220px] relative rounded-lg">
+    <div className="xs:w-[220px] xs:h-[220px] relative rounded-lg">
       {image}
       {placeholder}
     </div>
@@ -43,7 +43,8 @@ type AlbumBoxProps = {
 }
 
 export const AlbumBox = ({ album, customLink, ...props }: AlbumBoxProps) => {
-  const wrapperClasses = 'inline-block text-center text-gray-900 mx-3 my-2 h-60'
+  const wrapperClasses =
+    'inline-block text-center text-gray-900 mx-3 my-2 xs:h-60'
 
   if (album) {
     return (

ui/src/components/timelineGallery/TimelineGallery.tsx

@@ -172,11 +172,18 @@ const TimelineGallery = () => {
 
   return (
     <>
-      <FavoritesCheckbox
-        onlyFavorites={onlyFavorites}
-        setOnlyFavorites={setOnlyFavorites}
-      />
-      <GalleryWrapper ref={containerElem}>{timelineGroups}</GalleryWrapper>
+      <div className="mb-2">
+        <FavoritesCheckbox
+          onlyFavorites={onlyFavorites}
+          setOnlyFavorites={setOnlyFavorites}
+        />
+      </div>
+      <div
+        className="-mx-3 flex flex-wrap overflow-x-hidden"
+        ref={containerElem}
+      >
+        {timelineGroups}
+      </div>
       <PaginateLoader
         active={!finishedLoadingMore && !loading}
         text={t('general.loading.paginate.media', 'Loading more media')}

ui/src/components/timelineGallery/TimelineGroupAlbum.tsx

@@ -130,15 +130,15 @@ const TimelineGroupAlbum = ({
   }
 
   return (
-    <GroupAlbumWrapper>
-      <AlbumTitle>
-        <Link to={`/album/${album.id}`}>{album.title}</Link>
-      </AlbumTitle>
-      <MediaWrapper>
+    <div className="mx-2">
+      <Link to={`/album/${album.id}`} className="hover:underline">
+        {album.title}
+      </Link>
+      <div className="flex flex-wrap items-center h-[210px] relative -mx-1 pr-4 overflow-hidden">
         {mediaElms}
         {itemsBubble}
-      </MediaWrapper>
-    </GroupAlbumWrapper>
+      </div>
+    </div>
   )
 }
 

ui/src/components/timelineGallery/TimelineGroupDate.tsx

@@ -60,10 +60,10 @@ const TimelineGroupDate = ({
   const formattedDate = dateFormatter.format(new Date(group.date))
 
   return (
-    <GroupDateWrapper>
-      <DateTitle>{formattedDate}</DateTitle>
-      <GroupAlbumWrapper>{albumGroupElms}</GroupAlbumWrapper>
-    </GroupDateWrapper>
+    <div className="mx-3 mb-2">
+      <div className="text-xl m-0 -mb-2">{formattedDate}</div>
+      <div className="flex wrap -mx-2 my-0">{albumGroupElms}</div>
+    </div>
   )
 }
 

ui/tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
-      screen: {
+      screens: {
         xs: '480px',
       },
       boxShadow: {