Skip to content

This PR fixes responsive layout issues with benchmark charts on narrow mobile screens. #221 #228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sapnilbiswas merged 2 commits into from
Apr 23, 2026
Merged

This PR fixes responsive layout issues with benchmark charts on narrow mobile screens. #221 #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
921acf4
changes done
tejaswiverma121-byte Apr 23, 2026
ff1a04e
changes
tejaswiverma121-byte Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions frontend/src/components/benchmarks/TrendChart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,21 +36,30 @@ const TrendChart = ({ data, dataKey, title, color = "#22c55e", height = 350, the
};

return (
<div className="trend-chart" style={{ width: '100%', height }}>
<div className="trend-chart" style={{ width: '100%', height, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
<h4 className="trend-chart__title" style={{
fontSize: '0.9375rem',
fontWeight: 600,
marginBottom: '1rem'
marginBottom: '1rem',
flexShrink: 0
}}>
{title}
</h4>
<ResponsiveContainer width="100%" height="100%">
<ResponsiveContainer width="100%" height="100%" minWidth={0}>
<LineChart data={formattedData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
Comment on lines +39 to 49
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, locate the file and check its size
find . -name "TrendChart.jsx" -type f

Repository: Stanzin7/ExtensionShield

Length of output: 119

🏁 Script executed:

# Once found, read the file to see the actual code
cat -n frontend/src/components/benchmarks/TrendChart.jsx

Repository: Stanzin7/ExtensionShield

Length of output: 3639

🏁 Script executed:

# Check for CSS files that might style .trend-chart
find ./frontend -name "*.css" -o -name "*.scss" | xargs grep -l "trend-chart" 2>/dev/null | head -5

Repository: Stanzin7/ExtensionShield

Length of output: 117

🏁 Script executed:

# Also check if TrendChart is used with height constraints
grep -r "TrendChart" ./frontend --include="*.jsx" --include="*.js" -B 2 -A 2 | head -30

Repository: Stanzin7/ExtensionShield

Length of output: 2243

🏁 Script executed:

# Check the SCSS for chart layout constraints
cat ./frontend/src/pages/research/BenchmarksPage.scss

Repository: Stanzin7/ExtensionShield

Length of output: 20830

🏁 Script executed:

# Check BenchmarksPage.jsx for actual TrendChart usage with height parameter
cat ./frontend/src/pages/research/BenchmarksPage.jsx | head -150

Repository: Stanzin7/ExtensionShield

Length of output: 5675

Wrap ResponsiveContainer in a flex child to prevent chart overflow under fixed-height container.

When TrendChart uses its default height={350}, the flex column allocates the full 350px to ResponsiveContainer via height="100%" while the title (with flexShrink: 0) also consumes space. This causes the chart to overflow its container. Add a wrapper with flex: 1 and minHeight: 0 around ResponsiveContainer to distribute remaining height after the title.

Suggested fix 
      <h4 className="trend-chart__title" style={{ 
        fontSize: '0.9375rem', 
        fontWeight: 600, 
        marginBottom: '1rem',
        flexShrink: 0
      }}>
        {title}
      </h4>
+     <div style={{ flex: 1, minHeight: 0, minWidth: 0 }}>
       <ResponsiveContainer width="100%" height="100%" minWidth={0}>
         <LineChart data={formattedData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--theme-border-subtle)" />
           <XAxis 
             dataKey="date" 
             stroke="var(--theme-text-subtle)"
             style={{ fontSize: '0.75rem' }}
             interval="preserveEnd"
             minTickGap={20}
             angle={-35}
             textAnchor="end"
             dx={-5}
             dy={10}
             height={60}
             tickLine={false}
           />
           <YAxis 
             stroke="var(--theme-text-subtle)"
             style={{ fontSize: '0.75rem' }}
           />
           <Tooltip content={<CustomTooltip />} />
           <Line 
             type="monotone" 
             dataKey="value" 
             stroke={color} 
             strokeWidth={2}
             dot={{ fill: color, r: 4 }}
             activeDot={{ r: 6 }}
             isAnimationActive={true}
             animationDuration={1200}
             animationEasing="ease-out"
           />
         </LineChart>
       </ResponsiveContainer>
+     </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="trend-chart" style={{ width: '100%', height, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
<h4 className="trend-chart__title" style={{
fontSize: '0.9375rem',
fontWeight: 600,
marginBottom: '1rem'
marginBottom: '1rem',
flexShrink: 0
}}>
{title}
</h4>
<ResponsiveContainer width="100%" height="100%">
<ResponsiveContainer width="100%" height="100%" minWidth={0}>
<LineChart data={formattedData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<div className="trend-chart" style={{ width: '100%', height, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
<h4 className="trend-chart__title" style={{
fontSize: '0.9375rem',
fontWeight: 600,
marginBottom: '1rem',
flexShrink: 0
}}>
{title}
</h4>
<div style={{ flex: 1, minHeight: 0, minWidth: 0 }}>
<ResponsiveContainer width="100%" height="100%" minWidth={0}>
<LineChart data={formattedData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/benchmarks/TrendChart.jsx` around lines 39 - 49, The
ResponsiveContainer inside the TrendChart component can overflow because the
parent is a flex column and the title uses flexShrink: 0; wrap the
ResponsiveContainer in a new div (e.g., a flex child wrapper) with style {flex:
1, minHeight: 0} so the wrapper consumes the remaining space and allows
ResponsiveContainer (width="100%" height="100%") to size correctly; locate the
JSX around ResponsiveContainer in TrendChart.jsx and insert the wrapper div
directly around the ResponsiveContainer element to fix the layout.

<CartesianGrid strokeDasharray="3 3" stroke="var(--theme-border-subtle)" />
<XAxis
dataKey="date"
stroke="var(--theme-text-subtle)"
style={{ fontSize: '0.75rem' }}
interval="preserveEnd"
minTickGap={20}
angle={-35}
textAnchor="end"
dx={-5}
dy={10}
height={60}
tickLine={false}
/>
<YAxis
stroke="var(--theme-text-subtle)"
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/research/BenchmarksPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,15 +261,14 @@
line-height: 1.5;
}

/* Charts */
.charts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem;

@media (max-width: 968px) {
grid-template-columns: 1fr;
grid-template-columns: minmax(0, 1fr);
}
}

Expand All @@ -296,6 +295,7 @@
border-radius: 16px;
padding: 1.5rem;
transition: all 0.3s ease;
min-width: 0;

.trend-chart__title {
color: var(--extensionshield-text-primary, #f8fafc);
Expand Down
Loading