test(ContributorsLoading-responsive-breakpoints): verify Responsive Multi-device Columns & Mobile Viewport Layouts (JhaSourav07#3178)

## Description

Fixes JhaSourav07#2849 

Added responsive breakpoint test coverage for the contributors loading
component.

## Pillar

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

## Visual Preview

N/A (Test-only change)

## Checklist

- [x] I have read the CONTRIBUTING.md file.
- [x] I have run npm run format.
- [x] I have run npm run lint.
- [x] I have run npm run typecheck.
- [x] I have run npm run test.
- [x] I have run npm run test:coverage.
- [x] I have only one commit in this PR.

## Changes Made

- Created `app/contributors/loading.responsive-breakpoints.test.tsx`
- Added 5 responsive breakpoint test cases
- Verified loading component renders correctly on mobile-width viewports
- Verified vertical flex layout for mobile-friendly presentation
- Verified centered viewport positioning remains intact
- Verified no fixed-width container styles introduce horizontal
scrolling
- Verified loading spinner remains visible on smaller screens

## Result

- Improves responsive layout test coverage for the contributors loading
page
- Documents expected mobile viewport behavior through automated tests
- Helps prevent regressions affecting small-screen users
- Existing tests continue to pass

Author: JhaSourav07

app/contributors/loading.responsive-breakpoints.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Loading from './loading';
+
+describe('Loading - Responsive Multi-device Columns & Mobile Viewport Layouts', () => {
+  beforeEach(() => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 375,
+    });
+  });
+
+  it('renders correctly on a mobile-width viewport', () => {
+    const { container } = render(<Loading />);
+
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('uses a vertical flex layout suitable for mobile screens', () => {
+    const { container } = render(<Loading />);
+
+    const contentWrapper = container.querySelector('.flex-col');
+
+    expect(contentWrapper).toBeTruthy();
+  });
+
+  it('keeps content centered within the viewport', () => {
+    const { container } = render(<Loading />);
+
+    const wrapper = container.querySelector('.min-h-screen');
+
+    expect(wrapper?.className).toContain('items-center');
+    expect(wrapper?.className).toContain('justify-center');
+  });
+
+  it('does not use fixed-width container classes that could cause horizontal scrolling', () => {
+    const { container } = render(<Loading />);
+
+    const root = container.firstElementChild;
+
+    expect(root?.className).not.toContain('w-screen');
+    expect(root?.className).not.toContain('max-w');
+  });
+
+  it('renders the loading spinner on mobile layouts', () => {
+    const { container } = render(<Loading />);
+
+    const spinner = container.querySelector('.animate-spin');
+
+    expect(spinner).toBeTruthy();
+  });
+});