test(RepositoryGraph-responsive-breakpoints): verify Responsive Multi-device Columns & Mobile Viewport Layouts (Variation 7) (JhaSourav07#3553)

## Description

Fixes JhaSourav07#2609 

Added responsive breakpoint test coverage for `RepositoryGraph`.

## Pillar

- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

N/A (test-only change)

## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [x] I have starred the repo.
- [x] I have made sure that I have only one commit to merge in this PR.

## Changes Made

* Created
`components/dashboard/RepositoryGraph.responsive-breakpoints.test.tsx`
* Added mobile viewport rendering validation
* Added responsive filter control coverage
* Added graph container rendering verification for smaller screens
* Added resize event handling coverage
* Added responsive sidebar content validation

## Result

* Improves responsive layout coverage for RepositoryGraph
* Verifies mobile-width rendering behavior
* Helps prevent regressions across viewport sizes
* Confirms resize handling remains stable
* All newly added tests pass successfully

Author: JhaSourav07

components/dashboard/RepositoryGraph.responsive-breakpoints.test.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import React from 'react';
+import RepositoryGraph from './RepositoryGraph';
+import type { GraphNode, GraphLink } from '@/types';
+
+vi.mock('next/dynamic', () => {
+  const DynamicForceGraphMock = React.forwardRef((props: any, ref: any) => {
+    React.useImperativeHandle(ref, () => ({
+      centerAt: vi.fn(),
+      zoom: vi.fn(),
+    }));
+
+    return (
+      <div data-testid="force-graph-2d">
+        {props.graphData?.nodes?.map((node: any) => (
+          <div key={node.id}>{node.name}</div>
+        ))}
+      </div>
+    );
+  });
+
+  DynamicForceGraphMock.displayName = 'ForceGraph2D';
+
+  return {
+    default: () => DynamicForceGraphMock,
+  };
+});
+
+Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+  configurable: true,
+  value: 375,
+});
+
+const mockData = {
+  nodes: [
+    { id: 'user1', name: 'User 1', type: 'User', val: 30, color: '#FFF' },
+    {
+      id: 'repo1',
+      name: 'Repo 1',
+      type: 'Repo',
+      val: 15,
+      color: '#FFF',
+      stats: { stars: 10 },
+    },
+    {
+      id: 'fork1',
+      name: 'Fork 1',
+      type: 'Fork',
+      val: 10,
+      color: '#FFF',
+    },
+    {
+      id: 'contrib1',
+      name: 'Contrib 1',
+      type: 'Contribution',
+      val: 20,
+      color: '#FFF',
+    },
+  ] as GraphNode[],
+  links: [
+    { source: 'user1', target: 'repo1' },
+    { source: 'user1', target: 'fork1' },
+    { source: 'user1', target: 'contrib1' },
+  ] as GraphLink[],
+};
+
+describe('RepositoryGraph Responsive Breakpoints', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders graph successfully on mobile viewport width', () => {
+    render(<RepositoryGraph data={mockData} />);
+
+    expect(screen.getByText('🌐 Repository Dependency Graph')).toBeInTheDocument();
+  });
+
+  it('renders filter controls in wrapped mobile layout', () => {
+    render(<RepositoryGraph data={mockData} />);
+
+    expect(screen.getByText('Personal')).toBeInTheDocument();
+    expect(screen.getByText('Contributions')).toBeInTheDocument();
+    expect(screen.getByText('Forks')).toBeInTheDocument();
+  });
+
+  it('renders graph container at mobile width without crashing', () => {
+    render(<RepositoryGraph data={mockData} />);
+
+    expect(screen.getByTestId('force-graph-2d')).toBeInTheDocument();
+  });
+
+  it('handles resize events correctly on smaller viewports', () => {
+    render(<RepositoryGraph data={mockData} />);
+
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+
+    expect(screen.getByText('🌐 Repository Dependency Graph')).toBeInTheDocument();
+  });
+
+  it('keeps desktop insight content available in rendered output', () => {
+    render(<RepositoryGraph data={mockData} />);
+
+    expect(screen.getByText('Graph Insights')).toBeInTheDocument();
+
+    expect(screen.getByText(/Repositories connected/i)).toBeInTheDocument();
+  });
+});