Fix mobile view toggles and restore desktop dropzone width

This commit is contained in:
Anthony Stirling 2025-09-30 12:48:51 +01:00
parent 9a4afae13f
commit c35c66abbc
2 changed files with 17 additions and 4 deletions

View File

@ -16,7 +16,7 @@
.landing-dropzone__sheet {
position: relative;
width: min(100%, 32rem);
width: min(100%, 34rem);
margin: 0 auto;
padding: clamp(1.75rem, 4vw, 2.5rem);
border-radius: 0.5rem;
@ -57,7 +57,7 @@
justify-content: center;
gap: 0.6rem;
width: 100%;
max-width: 20rem;
max-width: min(100%, 30rem);
margin: clamp(0.5rem, 2vw, 0.9rem) auto;
}
@ -81,3 +81,9 @@
max-width: 100%;
}
}
@media (min-width: 901px) {
.landing-dropzone__sheet {
width: 36rem;
}
}

View File

@ -47,14 +47,21 @@ export default function HomePage() {
const container = sliderRef.current;
if (!container) return;
const offset = view === "tools" ? 0 : container.clientWidth;
const offsetWidth = container.getBoundingClientRect().width || container.clientWidth;
const maxOffset = Math.max(0, container.scrollWidth - container.clientWidth);
const offset = view === "tools" ? 0 : Math.max(0, Math.min(maxOffset, offsetWidth));
if (behavior === "auto") {
container.scrollLeft = offset;
return;
}
container.scrollTo({ left: offset, behavior });
if (typeof container.scrollTo === "function") {
container.scrollTo({ left: offset, behavior });
return;
}
container.scrollLeft = offset;
},
[]
);