Skip to content

Commit 578f4b9

Browse files
yilinxiayilinxia
committed
fix scroll issue
1 parent 4d2aae3 commit 578f4b9

1 file changed

Lines changed: 76 additions & 71 deletions

File tree

‎src/views/TopicHistogram.tsx‎

Lines changed: 76 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,7 @@ const TopicHistogram: FC = () => {
378378
};
379379

380380
return (
381-
<main className="container py-4">
381+
<main className="container-fluid py-4" style={{ height: '100vh', overflowY: 'auto' }}>
382382
{/* API Key Modal */}
383383
{showApiKeyModal && (
384384
<div className="modal fade show" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
@@ -441,76 +441,79 @@ const TopicHistogram: FC = () => {
441441
</div>
442442
)}
443443

444-
{/* Header with back button, title, and step indicator all in one line */}
445-
<div className="d-flex align-items-center justify-content-between mb-4">
446-
{/* Left side with back button and titles */}
447-
<div className="d-flex align-items-center">
448-
<button
449-
className="btn btn-outline-secondary me-3"
450-
onClick={goBackToHome}
451-
style={{ borderRadius: "50%", width: "40px", height: "40px", padding: "0" }}
452-
>
453-
<FaArrowLeft className="m-auto" />
454-
</button>
455-
<div>
456-
<h1 className="mb-0">Topic-Centric Filtering</h1>
457-
{currentStep === 1 && (
458-
<h2 className="h5 text-muted mb-0 mt-1">Select Topics by Frequency</h2>
459-
)}
460-
{currentStep === 2 && (
461-
<h2 className="h5 text-muted mb-0 mt-1">Refine Your Topics</h2>
462-
)}
444+
{/* Header container to match card width */}
445+
<div className="mx-auto" style={{ maxWidth: currentStep === 1 ? '90%' : '900px' }}>
446+
{/* Header with back button, title, and step indicator all in one line */}
447+
<div className="d-flex align-items-center justify-content-between mb-4">
448+
{/* Left side with back button and titles */}
449+
<div className="d-flex align-items-center">
450+
<button
451+
className="btn btn-outline-secondary me-3"
452+
onClick={goBackToHome}
453+
style={{ borderRadius: "50%", width: "40px", height: "40px", padding: "0" }}
454+
>
455+
<FaArrowLeft className="m-auto" />
456+
</button>
457+
<div>
458+
<h1 className="mb-0">Topic-Centric Filtering</h1>
459+
{currentStep === 1 && (
460+
<h2 className="h5 text-muted mb-0 mt-1">Select Topics by Frequency</h2>
461+
)}
462+
{currentStep === 2 && (
463+
<h2 className="h5 text-muted mb-0 mt-1">Refine Your Topics</h2>
464+
)}
465+
</div>
463466
</div>
464-
</div>
465467

466-
{/* Right side with step indicator */}
467-
<div className="d-flex align-items-center gap-4">
468-
{/* Step numbers with connecting line */}
469-
<div className="d-flex align-items-center gap-2 position-relative">
470-
<div
471-
className={`rounded-circle d-flex align-items-center justify-content-center text-dark ${currentStep >= 1 ? "bg-primary text-white" : "bg-secondary-subtle"}`}
472-
style={{ width: "32px", height: "32px", zIndex: 1 }}
473-
>
474-
1
468+
{/* Right side with step indicator */}
469+
<div className="d-flex align-items-center gap-4">
470+
{/* Step numbers with connecting line */}
471+
<div className="d-flex align-items-center gap-2 position-relative">
472+
<div
473+
className={`rounded-circle d-flex align-items-center justify-content-center text-dark ${currentStep >= 1 ? "bg-primary text-white" : "bg-secondary-subtle"}`}
474+
style={{ width: "32px", height: "32px", zIndex: 1 }}
475+
>
476+
1
477+
</div>
478+
{/* Connecting line */}
479+
<div
480+
style={{
481+
width: "40px",
482+
height: "2px",
483+
backgroundColor: currentStep >= 2 ? "#0d6efd" : "#adb5bd",
484+
transition: "background-color 0.3s ease"
485+
}}
486+
/>
487+
<div
488+
className={`rounded-circle d-flex align-items-center justify-content-center text-dark ${currentStep >= 2 ? "bg-primary text-white" : "bg-secondary-subtle"}`}
489+
style={{ width: "32px", height: "32px", zIndex: 1 }}
490+
>
491+
2
492+
</div>
475493
</div>
476-
{/* Connecting line */}
477-
<div
494+
495+
{/* Step counter */}
496+
<div className="text-muted">
497+
Step {currentStep} of 2
498+
</div>
499+
500+
<button
501+
className="btn btn-outline-secondary"
502+
onClick={() => setShowApiKeyModal(true)}
478503
style={{
504+
borderRadius: "50%",
479505
width: "40px",
480-
height: "2px",
481-
backgroundColor: currentStep >= 2 ? "#0d6efd" : "#adb5bd",
482-
transition: "background-color 0.3s ease"
506+
height: "40px",
507+
padding: "0",
508+
display: "flex",
509+
alignItems: "center",
510+
justifyContent: "center"
483511
}}
484-
/>
485-
<div
486-
className={`rounded-circle d-flex align-items-center justify-content-center text-dark ${currentStep >= 2 ? "bg-primary text-white" : "bg-secondary-subtle"}`}
487-
style={{ width: "32px", height: "32px", zIndex: 1 }}
512+
title={apiKey ? 'Change Gemini API Key' : 'Set Gemini API Key'}
488513
>
489-
2
490-
</div>
491-
</div>
492-
493-
{/* Step counter */}
494-
<div className="text-muted">
495-
Step {currentStep} of 2
514+
<FaCog className="m-auto" />
515+
</button>
496516
</div>
497-
498-
<button
499-
className="btn btn-outline-secondary"
500-
onClick={() => setShowApiKeyModal(true)}
501-
style={{
502-
borderRadius: "50%",
503-
width: "40px",
504-
height: "40px",
505-
padding: "0",
506-
display: "flex",
507-
alignItems: "center",
508-
justifyContent: "center"
509-
}}
510-
title={apiKey ? 'Change Gemini API Key' : 'Set Gemini API Key'}
511-
>
512-
<FaCog className="m-auto" />
513-
</button>
514517
</div>
515518
</div>
516519

@@ -526,7 +529,7 @@ const TopicHistogram: FC = () => {
526529

527530
{/* Step 1: Topic Frequency Selection */}
528531
{currentStep === 1 && (
529-
<div className="card shadow-sm" style={{ minHeight: '800px', display: 'flex', flexDirection: 'column' }}>
532+
<div className="card shadow-sm mx-auto" style={{ minHeight: 'auto', display: 'flex', flexDirection: 'column', maxWidth: '90%' }}>
530533
<div className="card-body d-flex flex-column">
531534
<p className="text-muted mb-4">
532535
Adjust the frequency range to select topics related to{" "}
@@ -685,13 +688,15 @@ const TopicHistogram: FC = () => {
685688

686689
{/* Step 2: Topic Refinement */}
687690
{currentStep === 2 && (
688-
<div className="card-body d-flex flex-column">
689-
<TopicRefiner
690-
finalTopics={finalTopics}
691-
setFinalTopics={setFinalTopics}
692-
prevStep={prevStep}
693-
handleSubmit={handleSubmit}
694-
/>
691+
<div className="card shadow-sm mx-auto" style={{ maxWidth: '900px' }}>
692+
<div className="card-body d-flex flex-column">
693+
<TopicRefiner
694+
finalTopics={finalTopics}
695+
setFinalTopics={setFinalTopics}
696+
prevStep={prevStep}
697+
handleSubmit={handleSubmit}
698+
/>
699+
</div>
695700
</div>
696701
)}
697702
</main>

0 commit comments

Comments
 (0)