fix: not being able to scroll to bottom

This commit is contained in:
Damien Ostler 2024-05-27 17:18:44 -04:00
parent 10f36e54ff
commit 8ad20079de
2 changed files with 10 additions and 4 deletions

View File

@ -94,6 +94,7 @@ function PageComponent() {
placeholder="Search by title..." placeholder="Search by title..."
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />
{(tags.length>0) ? (
<nav className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-4 justify-items-center"> <nav className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-4 justify-items-center">
{tags.map((tag, index) => ( {tags.map((tag, index) => (
<a <a
@ -108,9 +109,14 @@ function PageComponent() {
</a> </a>
))} ))}
</nav> </nav>
):(
<div className="flex justify-center">
<p className="text-white">Loading Tags...</p>
</div>
)}
</div> </div>
</section> </section>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-60 gap-x-5 h-full mx-auto animate-in"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-60 gap-x-5 h-full mb-96 animate-in">
{galleries && galleries.map((gallery, index) => ( {galleries && galleries.map((gallery, index) => (
<div className="mx-auto"> <div className="mx-auto">
<GalleryThumbnail <GalleryThumbnail

View File

@ -167,7 +167,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
<div > <div >
<div className="z-20" <div className="z-20"
onClick={resetPanZoom} style={{ width: selectedImage ? "100%" : "auto", height: selectedImage ? "100%" : "auto" }}> onClick={resetPanZoom} style={{ width: selectedImage ? "100%" : "auto", height: selectedImage ? "100%" : "auto" }}>
<div className='flex justify-center items-center pt-2 '> <div className='flex justify-center items-center pt-2 pb-20'>
{renderButtons()} {renderButtons()}
</div> </div>
{selectedImage ? ( {selectedImage ? (
@ -193,7 +193,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
</> </>
) : ( ) : (
<div <div
className="z-30 pb-10" className="z-30"
style={{ style={{
display: selectedImage ? "flex" : "block", display: selectedImage ? "flex" : "block",
alignItems: "flex-start", alignItems: "flex-start",
@ -202,7 +202,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
<Masonry <Masonry
breakpointCols={columns} breakpointCols={columns}
className="my-masonry-grid pl-6" className="my-masonry-grid pl-6 "
style={{ width: selectedImage ? "50%" : "100%" }} style={{ width: selectedImage ? "50%" : "100%" }}
> >
{images {images