# Dynamic Font Sizing & Responsive Layout Technical Architecture Specification

## 1. Overview & Architectural Goals

This specification defines the technical layout architecture, design tokens, and CSS reflow system required to build a dynamically scalable User Interface (UI) for the NextGen LMS platform. 

The system guarantees that when users increase font size up to **200%** (via in-app font controls or native browser scaling), the layout dynamically adapts without text truncation, clipping, overlapping, or horizontal body scrolling.

---

## 2. Core Technical Requirements

* **Scalable Units**: All font sizes, line heights, paddings, margins, and container min-heights MUST use relative units (`rem`, `em`, `%`, `vh/vw`, `ch`) rather than fixed pixel dimensions (`px`).
* **Flexible Container Sizing**: Containers must use `min-h-*`, `max-w-full`, `flex-wrap`, and `grid-cols-[repeat(auto-fit,minmax(280px,1fr))]` to enable fluid expansion as text grows.
* **Overflow & Reflow Protection**: Text elements must use `break-words`, `hyphens-auto`, or responsive flex wrapping so that scaling up to 200% flows vertically without clipping.

---

## 3. Design System & CSS Typography Architecture

### A. Root Scaling Tokens (`index.css`)

```css
/* Custom properties for dynamic font scale factor */
:root {
  --font-scale-factor: 1;
  --base-font-size: 16px;
  font-size: calc(var(--base-font-size) * var(--font-scale-factor));
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* User accessibility font scale overrides */
[data-font-size="100"] { --font-scale-factor: 1.00; }
[data-font-size="125"] { --font-scale-factor: 1.25; }
[data-font-size="150"] { --font-scale-factor: 1.50; }
[data-font-size="175"] { --font-scale-factor: 1.75; }
[data-font-size="200"] { --font-scale-factor: 2.00; }

/* Fluid Typography Classes */
.text-fluid-xs   { font-size: clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem); }
.text-fluid-sm   { font-size: clamp(0.875rem, 0.80rem + 0.35vw, 1.00rem);  }
.text-fluid-base { font-size: clamp(1.00rem,  0.90rem + 0.50vw, 1.125rem); }
.text-fluid-lg   { font-size: clamp(1.125rem, 1.00rem + 0.60vw, 1.25rem);  }
.text-fluid-xl   { font-size: clamp(1.25rem,  1.10rem + 0.75vw, 1.50rem);  }
.text-fluid-2xl  { font-size: clamp(1.50rem,  1.30rem + 1.00vw, 2.00rem);  }
```

---

## 4. Layout Implementation Blueprint

### Step 1: Authentication & User Login Portal Layout
* Use centered flex containers with dynamic padding (`p-4 md:p-8`).
* Input fields and labels use `min-h-[2.75rem]`, `w-full`, and relative `rem` font sizes to adapt when text scales up.

```tsx
<div className="min-h-screen w-full flex items-center justify-center p-4 sm:p-6 lg:p-8 bg-background">
  <div className="w-full max-w-md space-y-6 bg-card p-6 sm:p-8 rounded-[2rem] border border-border shadow-xl">
    <div className="space-y-2">
      <h1 className="text-fluid-2xl font-black text-text break-words">Welcome Back</h1>
      <p className="text-fluid-sm text-text-muted leading-relaxed">
        Log in to LMS to access your courses, attendance, and administrative controls.
      </p>
    </div>
  </div>
</div>
```

### Step 2: Global Accessibility & Font Size Controls Component
* Implement an accessible dropdown/toggle control in the navbar or user settings modal.
* Store choice in `localStorage` and apply `data-font-size="200"` to `document.documentElement`.

```tsx
import React, { useState, useEffect } from 'react';
import { Type, Check } from 'lucide-react';

export const FontSizeController: React.FC = () => {
  const [scale, setScale] = useState<number>(() => {
    return Number(localStorage.getItem('app-font-scale')) || 100;
  });

  const applyScale = (newScale: number) => {
    setScale(newScale);
    localStorage.setItem('app-font-scale', String(newScale));
    document.documentElement.setAttribute('data-font-size', String(newScale));
  };

  useEffect(() => {
    applyScale(scale);
  }, []);

  return (
    <div className="flex items-center gap-2 p-2 rounded-xl bg-muted/30 border border-border">
      <Type size={16} className="text-text-muted shrink-0" />
      <span className="text-xs font-bold uppercase tracking-wider text-text-muted">Font Size:</span>
      <div className="flex items-center gap-1">
        {[100, 125, 150, 175, 200].map((level) => (
          <button
            key={level}
            onClick={() => applyScale(level)}
            className={`px-2.5 py-1 rounded-lg text-xs font-black transition-all ${
              scale === level
                ? 'bg-primary text-white shadow-sm'
                : 'bg-muted hover:bg-muted/80 text-text-muted'
            }`}
          >
            {level}%
          </button>
        ))}
      </div>
    </div>
  );
};
```

### Step 3: Responsive Card Grid & Dashboard Reflow
* Replace hardcoded grid columns (`grid-cols-4`) with responsive auto-fit grids (`grid-cols-[repeat(auto-fit,minmax(280px,1fr))]`).
* Allow card titles and content to wrap dynamically without truncation.

```tsx
<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4 sm:gap-6">
  {cards.map((card) => (
    <div key={card.id} className="p-5 rounded-2xl bg-card border border-border flex flex-col justify-between min-h-[140px] space-y-3">
      <div className="flex items-start justify-between gap-3">
        <h3 className="font-extrabold text-fluid-base text-text leading-snug break-words flex-1">
          {card.title}
        </h3>
        <span className="shrink-0 p-2 rounded-xl bg-primary/10 text-primary">
          <card.icon size={20} />
        </span>
      </div>
      <p className="text-fluid-sm font-medium text-text-muted leading-relaxed break-words">
        {card.description}
      </p>
    </div>
  ))}
</div>
```

### Step 4: Page Layout Adaptation Across LMS Routes
* Enforce mobile-first responsive layout wrappers for all main routes:
  * **Sidebar**: Collapsible drawer on narrow viewports or large font scales.
  * **Main Content Area**: `flex-1 min-w-0 overflow-y-auto p-4 sm:p-6 lg:p-8`.
  * **Data Tables & Lists**: Container overflow handling (`overflow-x-auto`) to prevent horizontal clipping of page boundaries.

### Step 5: Modal & Dialog Reflow Safeguards (`Modal.tsx`)
* Modals must feature scrollable body containers (`max-h-[75vh] overflow-y-auto`) and wrapping flex headers so headers never overlap buttons at 200% font size.

```tsx
<div className="fixed inset-0 bg-[#002147]/60 backdrop-blur-sm z-[150] flex items-center justify-center p-4">
  <div className="bg-card border border-border rounded-[2.5rem] shadow-2xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[90vh]">
    {/* Modal Header */}
    <div className="p-6 border-b border-border flex items-start justify-between gap-4 shrink-0">
      <div className="min-w-0 flex-1">
        <h2 className="text-fluid-xl font-extrabold text-text break-words">{title}</h2>
        <p className="text-fluid-xs font-bold text-text-muted uppercase tracking-wider mt-1 break-words">{subtitle}</p>
      </div>
      <button onClick={onClose} className="p-2 rounded-xl bg-muted text-text-muted hover:text-text shrink-0">
        <X size={20} />
      </button>
    </div>
    
    {/* Scrollable Body */}
    <div className="p-6 overflow-y-auto space-y-6 flex-1 min-h-0">
      {children}
    </div>
  </div>
</div>
```

---

## 5. Layout Adaptability & Verification Matrix

| UI Component | Design Rule | Scalability Outcome (at 200% Font Scale) |
| :--- | :--- | :--- |
| **Page Headings & Titles** | `text-fluid-2xl`, `break-words` | Headings grow proportionally; wrap cleanly onto next line. |
| **Navigation & Layout Mode** | `html[data-font-size="150"]`, `html[data-font-size="175"]`, `html[data-font-size="200"]` | Automatically collapses rigid desktop sidebar and adapts mobile header, bottom nav bar, and hamburger drawer at 150% scale and up. |
| **Data Cards & Summary Grid** | `grid-cols-[repeat(auto-fit,minmax(280px,1fr))]` | Grid transforms from multi-column to single-column reflow. |
| **Form Inputs & Select Dropdowns** | `h-auto min-h-[3rem] py-3` | Inputs expand vertically to accommodate enlarged text. |
| **Action Buttons & Modals** | `flex-col sm:flex-row`, `min-w-0` | Buttons stack vertically on narrow bounds; zero overlapping. |

---

## 6. Accessibility & Readability Acceptance Checklist

- [x] All typography uses relative units (`rem`, `em`, `clamp`).
- [x] Setting root font scale to 200% displays legible text without overlapping nodes.
- [x] Layout reflows smoothly; no horizontal scrollbar on primary document body.
- [x] Modals, drawers, and popovers maintain scrollable content areas at large font scales.
- [x] Interactive touch targets remain at minimum 44x44px equivalent size.