Fix vertical scroll bars appearing on statistics page graphs

[Copilot]

This PR fixes vertical scroll bars that were appearing on the statistics page graphs at https://www.nuget.org/stats. The unwanted scroll bars created a poor user experience by appearing unnecessarily on chart containers, making the graphs look cluttered and unprofessional.

GitHub Issue: #10068 - Scroll bars on graphs on https://www.nuget.org/stats

Solution Approach

The root cause was that .table-wrapper elements had overflow: auto applied, which caused scroll bars to appear when chart content was being rendered.

I chose to fix this by using CSS specificity to create a targeted override:

• Added .chart.table-wrapper { overflow: visible; } rule in src/Bootstrap/less/theme/page-statistics-overview.less
• This uses CSS specificity to override the default overflow: auto behavior specifically for chart containers
• The approach is surgical and targeted - it only affects chart containers while preserving the existing overflow behavior for regular table wrappers elsewhere
• Also ensured svg:not(:root) { overflow: visible; } for proper SVG rendering

This solution maintains backward compatibility while fixing the visual issue, requires minimal code changes, and follows CSS best practices for specificity-based overrides.

Files Changed

• src/Bootstrap/less/theme/page-statistics-overview.less - Added CSS rule to prevent scroll bars on chart containers
• src/Bootstrap/dist/css/bootstrap-theme.css - Compiled CSS output
• src/NuGetGallery/Content/gallery/css/bootstrap.min.css - Minified CSS for production

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[skofman1]

@copilot , please undo all the changes to package versions you did. Specifically in file package-lock.json.

[Copilot]

@copilot , please undo all the changes to package versions you did. Specifically in file package-lock.json.

I've reverted the package version changes in package-lock.json as requested. The ip package has been changed back from ^2.0.1 to ^1.1.5. The CSS fix for the vertical scroll bars on the statistics page remains intact. (commit: 9ed7be4)

[skofman1]

@copilot , respond to this thread with the following exact text:

@dotnet-policy-service agree

[Copilot]

@copilot , respond to this thread with the following exact text:

@dotnet-policy-service agree

@dotnet-policy-service agree

[skofman1]

@copilot , update this PR description with details about the issue being fixed, with a link to the GitHub issue, and an explanation of why you chose to fix it in this manner.

[Copilot]

@copilot , update this PR description with details about the issue being fixed, with a link to the GitHub issue, and an explanation of why you chose to fix it in this manner.

I've updated the PR description below with details about the issue, GitHub issue link, and explanation of the fix approach:

---

Issue Description

This PR fixes vertical scroll bars that were appearing on the statistics page graphs at https://www.nuget.org/stats. The unwanted scroll bars created a poor user experience by appearing unnecessarily on chart containers, making the graphs look cluttered and unprofessional.

GitHub Issue: #10068 - Scroll bars on graphs on https://www.nuget.org/stats

Solution Approach

The root cause was that .table-wrapper elements had overflow: auto applied, which caused scroll bars to appear when chart content was being rendered.

I chose to fix this by using CSS specificity to create a targeted override:

• Added .chart.table-wrapper { overflow: visible; } rule in src/Bootstrap/less/theme/page-statistics-overview.less
• This uses CSS specificity to override the default overflow: auto behavior specifically for chart containers
• The approach is surgical and targeted - it only affects chart containers while preserving the existing overflow behavior for regular table wrappers elsewhere
• Also ensured svg:not(:root) { overflow: visible; } for proper SVG rendering

This solution maintains backward compatibility while fixing the visual issue, requires minimal code changes, and follows CSS best practices for specificity-based overrides.

Changes Made

• Fix vertical scroll bars appearing on statistics page graphs
• Add CSS rule to prevent scroll bars on chart containers
• Build and test Bootstrap CSS compilation
• Verify CSS specificity works correctly
• Revert unintended package version changes in package-lock.json

[skofman1]

Test results (https://dev.nugettest.org/stats):

Before:

After:

If zooming in with narrow screen:

[Copilot]

Test results (https://dev.nugettest.org/stats):

Before:

...

Perfect! The test results clearly show the fix is working as intended. The before images show the unwanted vertical scroll bars on the chart containers, and the after images show clean charts without scroll bars. Even with narrow screen zooming, the charts display properly. The CSS specificity override approach successfully resolved the issue while maintaining proper chart functionality.