🐛 Bug: Upper Header Text Too Small — Not Visible to Users

[tarun6k]

🐛 Bug: Upper Header Text Too Small — Not Visible to Users

---

Description

The upper header text (e.g., "दैनिक एक पक्षांक") displayed above the main date heading is too small and practically unreadable for users. The font size is significantly undersized compared to the surrounding content, making it difficult to identify or read — especially on mobile devices and lower-resolution screens.

This negatively impacts the user experience and accessibility of the application.

---

Current Behavior

• The upper text appears in an extremely small font size.
• Users cannot read or distinguish the text without zooming in.
• The text lacks contrast and visual prominence relative to the main heading below it.

Screenshot:

---

Expected Behavior

• The upper text should be clearly visible and readable at normal zoom levels.
• Font size should be proportionally sized — recommended minimum 14px–16px (or equivalent rem/em units).
• The text should maintain proper contrast ratio (WCAG AA standard: at least 4.5:1 for normal text).

---

Steps to Reproduce

1. Open the application / page containing the header section.
2. Observe the text displayed above the main date heading.
3. Notice that the upper text is too small to read comfortably.

---

Environment

Property	Value
OS	macOS / Windows / Android
Browser	Chrome / Safari / Firefox
Screen Size	All screen sizes affected
Language	Hindi (हिन्दी)

---

Suggested Fix

/* Increase the font size of the upper header text */
.upper-header-text {
    font-size: 1rem;        /* was ~0.5rem or smaller */
    font-weight: 500;
    color: #d32f2f;         /* Ensure sufficient contrast */
    letter-spacing: 0.5px;  /* Improve readability */
    line-height: 1.4;
}

Alternative Approaches

• Use responsive font sizing (clamp()) to scale across devices:

  font-size: clamp(0.875rem, 2vw, 1.125rem);

• Add aria-label for screen reader accessibility.
• Consider increasing font-weight to at least 500 for better visibility.

---

Impact

Aspect	Severity
Visibility	🔴 High
Usability	🟠 Medium
Accessibility	🔴 High
Priority	🔴 P1

---

Labels

bug · UI/UX · accessibility · typography · good first issue

---

Checklist

• Identify the CSS class/component responsible for the upper text
• Increase font size to a readable minimum (14px+)
• Verify contrast ratio meets WCAG AA (4.5:1)
• Test on mobile, tablet, and desktop viewports
• Test with screen readers for accessibility compliance
• Update any related design tokens or style variables