Adjust slide bar length to match horizontal slide length
Modify the `MohamedSalahSlides` component in `client/src/pages/Report.tsx` to ensure the progress bar's width (`w-full max-w-[1000px]`) aligns with the slide's horizontal dimension, improving visual consistency. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/uCJPlBt
This commit is contained in:
@ -118,9 +118,9 @@ function MohamedSalahSlides() {
|
||||
</Document>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-4 flex flex-col items-center">
|
||||
{/* Progress Bar */}
|
||||
<div className="relative px-2" data-testid="slide-progress-container">
|
||||
<div className="relative w-full max-w-[1000px]" data-testid="slide-progress-container">
|
||||
<div
|
||||
className="relative py-2"
|
||||
onClick={handleSliderClick}
|
||||
@ -141,7 +141,7 @@ function MohamedSalahSlides() {
|
||||
/>
|
||||
{/* Slide markers */}
|
||||
<div className="absolute top-0 left-0 right-0 h-full pointer-events-none">
|
||||
<div className="relative h-full px-2">
|
||||
<div className="relative h-full">
|
||||
{numPages > 0 && Array.from({ length: numPages }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
@ -173,7 +173,7 @@ function MohamedSalahSlides() {
|
||||
</div>
|
||||
|
||||
{/* Control buttons */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between w-full max-w-[1000px]">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setCurrentSlide(Math.max(1, currentSlide - 1))}
|
||||
|
||||
Reference in New Issue
Block a user