Fix Critical Mobile Viewport Configuration and Subject Route Collision Issues

[NamanBharsakale]

Overview

Two critical issues have been identified that impact both user experience and application routing behavior.

The first issue affects mobile browser rendering due to an invalid viewport configuration, while the second causes route collisions because multiple subjects share the same URL identifier.

Addressing these issues will improve mobile compatibility, ensure correct navigation, and prevent subject-page conflicts.

---

1. Fix Invalid Mobile Viewport Configuration

Severity

Critical

Affected File

app/layout.tsx

Problem

The viewport configuration currently defines:

initialScale: 0

However, according to browser viewport standards, initialScale must be within a valid range (typically between 0.1 and 10).

An initialScale value of 0 is invalid and may cause mobile browsers to:

• Render pages with incorrect zoom levels.
• Display broken layouts.
• Produce inconsistent viewport behavior across devices.
• Result in invisible or improperly scaled content during initial page load.

Current Configuration

export const viewport = {
  width: "device-width",
  initialScale: 0
};

Expected Fix

Update the viewport configuration to use a valid scale value.

export const viewport = {
  width: "device-width",
  initialScale: 1
};

Benefits

• Proper mobile rendering.
• Standards-compliant viewport configuration.
• Consistent behavior across browsers and devices.
• Improved user experience on smartphones and tablets.

---

2. Resolve Duplicate Subject Code Causing Route Collisions

Severity

Critical

Affected File

app/components/subjects.tsx

Problem

Two different subjects currently use the same route code:

"Environmental Studies": "es"

"Entrepreneurship & Startup": "es"

Because routing relies on these codes, both subjects generate identical URLs.

Current Impact

Users navigating to one subject may:

• Be redirected to the wrong subject page.
• Access incorrect content.
• Experience broken navigation.
• Encounter routing ambiguity.

Example:

/subjects/es

could represent two entirely different subjects.

Expected Fix

Assign a unique route identifier to each subject.

Example:

"Environmental Studies": "es"

"Entrepreneurship & Startup": "ent"

Benefits

• Eliminates route conflicts.
• Ensures deterministic navigation.
• Maintains unique URLs for all subjects.
• Prevents accidental content overlap.

---

Acceptance Criteria

• initialScale is updated to a valid value.
• Mobile pages render correctly across supported devices.
• Every subject has a unique route code.
• Subject URLs no longer collide.
• Existing routing functionality remains unaffected.
• Navigation to Environmental Studies and Entrepreneurship & Startup works independently.
• Relevant tests or validation checks are added where applicable.

---

Impact

User Experience

• Fixes mobile viewport rendering issues.
• Ensures reliable navigation between subjects.

Reliability

• Prevents route conflicts and incorrect page resolution.

Maintainability

• Enforces uniqueness of subject route identifiers.
• Reduces the likelihood of future routing bugs.

---

Kindly assign this issue to me under GSSoC'26. I would like to work on this issue and submit a comprehensive, well-tested fix.

[NamanBharsakale]

Hey @pushkarscripts ,
I've fixed this issue #297. Can you review this pr and provide your feedback.

[vipul674]

I would like to work on this under GSSoC'26. Please assign it to me.