INJIWEB-1792,Removed double scrollbars displayed on the view card after clicking view card option.

[sanehema9]

Description :

• Updated ModalStyles to remove overflow-y-auto from the modal content container and replace with overflow-hidden.
• Extended PDFViewer to accept an optional className prop, allowing scroll behavior to be controlled externally.
• Applied overflow-y-auto only to the PDFViewer container so that the PDF content is the sole scrollable area.

Issue ticket number and Link

InjiWeb-1792 (https://mosip.atlassian.net/browse/INJIWEB-1792)

Video

INJIWEB-1792.mp4

Summary by CodeRabbit

• New Features

  • PDF preview now accepts an optional custom styling class to allow layout tweaks.

• Style

  • Modal container styling improved with height constraints and better overflow handling.
  • PDF preview adjusted for improved vertical scrolling and content visibility.

• Bug Fixes

  • Improved resource handling for PDF previews to ensure stable behavior when content changes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

PDFViewer gained an optional className prop and its effect hook now depends on blobUrl. VCDetailView passes overflow classes into PDFViewer and reformats JSX. ModalStyles adds overflow and max-height/width constraints and fixes export punctuation.

Changes

Cohort / File(s)	Summary
PDFViewer Component inji-web/src/components/Preview/PDFViewer.tsx	Added optional className?: string prop. Updated useEffect dependency to [blobUrl] (cleanup tied to blobUrl changes). DOM wrapper class now interpolates PDFViewerStyles.container with props.className.
VC Detail View inji-web/src/components/VC/VCDetailView.tsx	JSX reformatting (wrapped returns). Passes overflow-y-auto overflow-x-hidden h-full to PDFViewer. Minor action block and DownloadIcon prop formatting adjustments.
Modal Styles inji-web/src/modals/ModalStyles.ts	Added overflow-hidden, max-h-[80vh], and width constraints (w-11/12 sm:w-[70vw]) to modal container; added overflow-x-hidden to content. Fixed trailing commas and module export punctuation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• jackjain

Poem

🐰 I nibble code with gentle care,
A className hops into the view,
Modals snug with height to spare,
Overflow tucked, the layout's true.
Hooray—small tweaks, a brighter hue! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: removing double scrollbars on the view card modal by refactoring overflow behavior across PDFViewer and ModalStyles components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@inji-web/src/components/Preview/PDFViewer.tsx`:
- Line 39: The className string in PDFViewer.tsx is using double quotes and a
broken template literal; fix the JSX on the div with ref={containerRef} so it
uses a proper template literal (backticks) and provide a fallback for
props.className (e.g., empty string) when using the nullish coalescing operator;
reference PDFViewerStyles.container and props.className to build the final
className string.

🧹 Nitpick comments (1)

inji-web/src/components/Preview/PDFViewer.tsx (1)

19-32: Consider separating ResizeObserver and URL cleanup into distinct effects.

The ResizeObserver logic doesn't depend on blobUrl, yet it gets torn down and recreated whenever blobUrl changes. Separating concerns would avoid unnecessary observer churn:

♻️ Suggested refactor

 useEffect(() => {
     if (!containerRef.current) return;
     const observer = new ResizeObserver(entries => {
         for (let entry of entries) {
             setContainerWidth(entry.contentRect.width - containerPadding);
         }
     });
     observer.observe(containerRef.current);
-    return () => {
-        // cleanup the observer and URL
-        observer.disconnect();
-        URL.revokeObjectURL(blobUrl);
-    };
-}, [blobUrl]);
+    return () => observer.disconnect();
+}, []);
+
+useEffect(() => {
+    return () => URL.revokeObjectURL(blobUrl);
+}, [blobUrl]);

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 32edfb7 and 8d825da.

📒 Files selected for processing (3)

• inji-web/src/components/Preview/PDFViewer.tsx
• inji-web/src/components/VC/VCDetailView.tsx
• inji-web/src/modals/ModalStyles.ts

🧰 Additional context used

🧬 Code graph analysis (1)

inji-web/src/components/VC/VCDetailView.tsx (4)

inji-web/src/modals/Modal.tsx (1)

• Modal (31-81)

inji-web/src/components/Common/Buttons/ResponsiveIconButtonWithText.tsx (1)

• ResponsiveIconButtonWithText (19-75)

inji-web/src/components/Common/Icons/DownloadIcon.tsx (1)

• DownloadIcon (4-26)

inji-web/src/components/Preview/PDFViewer.tsx (1)

• PDFViewer (10-63)

🔇 Additional comments (2)

inji-web/src/modals/ModalStyles.ts (1)

12-20: LGTM! Styling changes align with PR objectives.

The modal container now properly constrains height with max-h-[80vh] and overflow-hidden, while the content container uses overflow-x-hidden instead of overflow-y-auto. This correctly delegates vertical scrolling to the PDFViewer component.

inji-web/src/components/VC/VCDetailView.tsx (1)

33-36: LGTM! Scroll behavior correctly delegated to PDFViewer.

Passing overflow-y-auto overflow-x-hidden h-full to PDFViewer ensures the PDF content is the sole scrollable area within the modal, as intended by this PR.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

[jackjain]

@sanehema9 unit tests are failing on the PR, please add unit tests for new code added. Also add proper title to the PR.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud