Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-15 01:01:49 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: carousel on mobile screen (#1186)

Browse Source 
## Description

Adjusts the styling to improve the layout and appearance of the carousel
controls and thumbnails on smaller screens.

## Changes Made

- Updated the carousel control styling to be more responsive.
- Adjusted the font size and padding of the slide component for better
display on mobile screens.

## Screenshot
![CleanShot 2024-06-13 at 08 18
55@2x](https://github.com/documenso/documenso/assets/55143799/1bcb31a3-2b4f-48bc-8a22-9d8e16b71d17)


## Checklist

- [x] I have tested these changes locally and they work as expected.
- [ ] I have added/updated tests that prove the effectiveness of these
changes.
- [ ] I have updated the documentation to reflect these changes, if
applicable.
- [x] I have followed the project's coding style guidelines.
- [ ] I have addressed the code review feedback from the previous
submission, if applicable.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->



<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Timur Ercan
2024-06-13 13:39:33 +02:00
committed by GitHub
parent 1647f7c4a0 3356934590
commit 7b594b303d
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/marketing/src/components/(marketing)/carousel.tsx
View File

@ -235,16 +235,16 @@ export const Carousel = () => {
</div> </div>
</div> </div>
<div className="dark:bg-background absolute bottom-2 right-2 flex w-[5%] flex-col items-center space-y-1 rounded-lg bg-white p-1.5"> <div className="dark:bg-background absolute bottom-2 right-2 flex w-[20%] flex-col items-center space-y-1 rounded-lg bg-white p-1.5 sm:w-[5%]">
<span className="text-foreground dark:text-muted-foreground text-xs"> <span className="text-foreground dark:text-muted-foreground text-[10px] sm:text-xs">
{selectedIndex + 1}/{slides.length} {selectedIndex + 1}/{slides.length}
</span> </span>
<Progress value={progress} className="h-1" /> <Progress value={progress} className="h-1" />
</div> </div>
</Card> </Card>
<div className="mx-auto mt-12 max-w-4xl px-2"> <div className="mx-auto mt-6 w-full max-w-4xl px-2 sm:mt-12">
<div className="mt-2 flex justify-between" ref={emblaThumbsRef}> <div className="mt-2 flex flex-wrap justify-between gap-6" ref={emblaThumbsRef}>
{slides.map((slide, index) => ( {slides.map((slide, index) => (
<Slide <Slide
key={index} key={index}

2
apps/marketing/src/components/(marketing)/slide.tsx
View File

@ -17,7 +17,7 @@ export const Slide: React.FC<SlideProps> = (props) => {
onClick={onClick} onClick={onClick}
type="button" type="button"
className={cn( className={cn(
'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-4', 'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-1 text-xs sm:py-4 sm:text-base',
{ {
'border-primary text-foreground dark:text-muted-foreground border-b-2': selected, 'border-primary text-foreground dark:text-muted-foreground border-b-2': selected,
}, },