fix ui responsive by ngochoa203 · Pull Request #158 · hqvjet/pathlight

ngochoa203 · 2026-01-08T22:35:23Z

No description provided.

Copilot

Pull request overview

This pull request implements comprehensive responsive design improvements across the entire frontend application, targeting better user experience on mobile and tablet devices.

Key changes:

Added responsive text sizing using Tailwind's responsive prefixes (sm:, md:, lg:) throughout all UI components
Implemented responsive padding, spacing, and layout adjustments for mobile-first design
Added responsive grid layouts that stack properly on smaller screens
Fixed a timer logic issue in the quiz play page with proper timeout handling

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 22 comments.

Show a summary per file

File	Description
QuizCard.tsx	Added responsive text sizes, flexible layouts, and adjusted padding for mobile/tablet views
QuizGenerationCard.tsx	Reduced padding and text sizes on mobile, adjusted step indicators
GenerationCard.tsx	Changed grid from 4 columns to 2 on mobile, added responsive sizing for steps
StatsGrid.tsx	Adjusted spacing, icon sizes, and text sizing for mobile views
ProfileCard.tsx	Added responsive padding and text sizing adjustments
Leaderboard.tsx	Implemented responsive table with hidden columns on mobile, adjusted text sizes
ActivityHeatmap.tsx	Added responsive padding and reduced text sizes for month labels
Stepper.tsx	Made stepper icons and text responsive for mobile screens
CourseCard.tsx	Restructured header layout for mobile, removed unused import, added responsive sizing
ProfilePage.tsx	Comprehensive responsive improvements for profile stats and layout
Dashboard.tsx	Added responsive layouts for header, stats grid, and streak display
AuthLayout.tsx	Adjusted spacing and layout gaps for mobile views
SignUpForm.tsx	Reduced form spacing and input padding on mobile
SignInForm.tsx	Added responsive input padding and button sizing
tracking/page.tsx	Made header and buttons stack on mobile with full-width layout
ranking/page.tsx	Comprehensive responsive improvements for ranking display and competitor cards
my-quizzes/page.tsx	Made filters and search stack on mobile, adjusted grid gaps
my-quizzes/[quizId]/play/page.tsx	Fixed timer timeout race condition, added responsive power-up grid layout
my-courses/page.tsx	Made search full-width on mobile, hid view toggle on small screens
my-courses/[courseId]/lessons/[lessonId]/page.tsx	Removed duplicate "next lesson" button

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-08T22:40:11Z

-            <td className="py-3 px-3">
-              <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-violet-500 to-purple-500 text-white shadow-sm">
+            <td className="py-2 sm:py-3 px-2 sm:px-3">
+              <span className="inline-flex items-center px-1.5 sm:px-2.5 py-0.5 sm:py-1 rounded-full text-[10px] sm:text-xs font-bold bg-gradient-to-r from-violet-500 to-purple-500 text-white shadow-sm">


The text size text-[10px] is extremely small and will be difficult to read on mobile devices. Consider using at least text-xs (12px) for better accessibility and user experience.

Suggested change

<span className="inline-flex items-center px-1.5 sm:px-2.5 py-0.5 sm:py-1 rounded-full text-[10px] sm:text-xs font-bold bg-gradient-to-r from-violet-500 to-purple-500 text-white shadow-sm">

<span className="inline-flex items-center px-1.5 sm:px-2.5 py-0.5 sm:py-1 rounded-full text-xs sm:text-xs font-bold bg-gradient-to-r from-violet-500 to-purple-500 text-white shadow-sm">

Copilot · 2026-01-08T22:40:12Z

-            <div className="text-xl font-bold text-sky-700">{quiz.num_questions}</div>
+        <div className="grid grid-cols-2 gap-2 sm:gap-3">
+          <div className="bg-sky-50 rounded-lg p-2 sm:p-3 border border-sky-100">
+            <div className="text-[10px] sm:text-xs text-gray-600 mb-0.5 sm:mb-1">Số câu hỏi</div>


The text size text-[10px] is extremely small and may violate accessibility guidelines (WCAG recommends minimum 12px). This will be difficult to read on mobile devices. Consider using text-xs (12px) as the minimum size.

Copilot · 2026-01-08T22:40:12Z

+            <td className="py-2 sm:py-3 px-2 sm:px-3 hidden sm:table-cell"><Avatar user={u} size={36} displayName={u.name} showInitialsFallback className="shadow-sm" cacheKey={u.avatarKey ?? u.id} /></td>
+            <td className="py-2 sm:py-3 px-2 sm:px-3">
+              <div className="font-semibold text-gray-900 truncate max-w-[120px] sm:max-w-none">{u.name}</div>
+              {isCurrentUser && <span className="text-[10px] sm:text-xs text-cyan-600 font-medium">(Bạn)</span>}


The text size text-[10px] is extremely small and may be difficult to read on mobile screens. Consider using text-xs (12px) as the minimum for accessibility.

Copilot · 2026-01-08T22:40:12Z

                  onClick={() => activatePowerUp(powerUp.id)}
                  disabled={!canUse || isActive}
-                  className={`group relative flex items-center gap-2 px-4 py-2.5 rounded-lg border-2 font-semibold text-sm transition-all ${
+                  className={`group relative flex flex-col lg:flex-row items-center justify-center lg:justify-start gap-1 sm:gap-1.5 lg:gap-2 px-2 sm:px-3 lg:px-4 py-2 sm:py-2.5 rounded-lg border-2 font-semibold text-[10px] sm:text-xs lg:text-sm transition-all ${


The text size text-[10px] is extremely small and will be difficult to read on mobile devices. Consider using at least text-xs (12px) for better accessibility.

Suggested change

className={`group relative flex flex-col lg:flex-row items-center justify-center lg:justify-start gap-1 sm:gap-1.5 lg:gap-2 px-2 sm:px-3 lg:px-4 py-2 sm:py-2.5 rounded-lg border-2 font-semibold text-[10px] sm:text-xs lg:text-sm transition-all ${

className={`group relative flex flex-col lg:flex-row items-center justify-center lg:justify-start gap-1 sm:gap-1.5 lg:gap-2 px-2 sm:px-3 lg:px-4 py-2 sm:py-2.5 rounded-lg border-2 font-semibold text-xs sm:text-xs lg:text-sm transition-all ${

Copilot · 2026-01-08T22:40:13Z

-        if (prev <= 0) {
-          // Time's up for this question
-          handleTimeUp();
+        if (prev <= 1) {


The condition changed from prev <= 0 to prev <= 1, which means the timeout will trigger 1 second earlier than before. This changes the business logic and may not align with user expectations. If a quiz question has 10 seconds, users would expect to see "0" before the timeout, not have it trigger when there's still 1 second remaining. Consider reverting to prev <= 0 or explaining why this change is necessary.

Suggested change

if (prev <= 1) {

if (prev <= 0) {

Copilot · 2026-01-08T22:40:16Z

          value={selectedYear}
          onChange={(e) => setSelectedYear(+e.target.value)}
-          className="text-[11px] rounded-full border border-cyan-300 bg-white/80 text-gray-700 px-3 py-1 focus:outline-none focus:ring-2 focus:ring-cyan-400"
+          className="text-[10px] sm:text-[11px] rounded-full border border-cyan-300 bg-white/80 text-gray-700 px-2 sm:px-3 py-1 focus:outline-none focus:ring-2 focus:ring-cyan-400"


The text size text-[10px] is extremely small and may cause readability issues on mobile devices. Consider using text-xs (12px) as the minimum for accessibility compliance.

Copilot · 2026-01-08T22:40:16Z

                  <div className="h-full bg-orange-500" style={{ width: `${expPercent}%` }} />
                </div>
-                <div className="mt-2 flex justify-between text-xs text-gray-600">
+                <div className="mt-1.5 sm:mt-2 flex justify-between text-[10px] sm:text-xs text-gray-600">


The text size text-[10px] is extremely small and may be difficult to read on mobile screens. Consider using text-xs (12px) as the minimum for accessibility.

Copilot · 2026-01-08T22:40:16Z

+                    <div className="text-[10px] sm:text-[11px] text-gray-500">Khóa học</div>
+                    <div className="font-semibold text-gray-900 text-xs sm:text-sm">{courseCount}</div>
                  </div>
-                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
-                    <div className="text-[11px] text-gray-500">Bài học</div>
-                    <div className="font-semibold text-gray-900">{lessonCount}</div>
+                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-2 sm:px-3 py-1.5 sm:py-2">
+                    <div className="text-[10px] sm:text-[11px] text-gray-500">Bài học</div>
+                    <div className="font-semibold text-gray-900 text-xs sm:text-sm">{lessonCount}</div>
                  </div>
-                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
-                    <div className="text-[11px] text-gray-500">Khóa đã hoàn thành</div>
-                    <div className="font-semibold text-gray-900">{completedCourses}</div>
+                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-2 sm:px-3 py-1.5 sm:py-2">
+                    <div className="text-[10px] sm:text-[11px] text-gray-500 leading-tight">Khóa đã hoàn thành</div>


The text size text-[10px] is extremely small and will be difficult to read on mobile devices. Consider using at least text-xs (12px) for better accessibility and user experience.

Copilot · 2026-01-08T22:40:17Z

-            <TrendingUp className="w-6 h-6 text-purple-500" />
-            <span className="text-sm font-medium text-purple-600 uppercase tracking-wide">
+            <TrendingUp className="w-5 h-5 sm:w-6 sm:h-6 text-purple-500" />
+            <span className="text-xs sm:text-sm font-medium text-purple-600 uppercase tracking-wide">


The text size text-[10px] is extremely small and may be difficult to read on mobile screens. Consider using text-xs (12px) as the minimum for accessibility.

Copilot · 2026-01-08T22:40:17Z

-                  <span className="text-xs opacity-75">({powerUp.usesLeft}/{powerUp.maxUses})</span>
+                  <PowerUpIcon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                  <span className="text-center lg:text-left leading-tight">{powerUp.name}</span>
+                  <span className="text-[9px] sm:text-xs opacity-75">({powerUp.usesLeft}/{powerUp.maxUses})</span>


The text size text-[9px] is extremely small (9px) and will be very difficult to read on mobile devices. This is below accessibility standards. Consider using at least text-xs (12px).

fix ui responsive

0235ea7

Copilot AI review requested due to automatic review settings January 8, 2026 22:35

Copilot started reviewing on behalf of ngochoa203 January 8, 2026 22:35 View session

Copilot AI reviewed Jan 8, 2026

View reviewed changes

ngochoa203 added 8 commits January 9, 2026 10:38

Merge branch 'develop' of github.com:hqvjet/pathlight into final-dev

c180549

fix tracking

4deb12d

fix

18904a6

fix

a83c7c2

fix tracking

048cfa4

fix

70734a7

fix

606c367

fix

16a42da

hqvjet merged commit a329d80 into develop Jan 9, 2026
7 checks passed

ngochoa203 deleted the final-dev branch January 9, 2026 07:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix ui responsive - #158

fix ui responsive#158
hqvjet merged 9 commits into
developfrom
final-dev

ngochoa203 commented Jan 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	<span className="inline-flex items-center px-1.5 sm:px-2.5 py-0.5 sm:py-1 rounded-full text-[10px] sm:text-xs font-bold bg-gradient-to-r from-violet-500 to-purple-500 text-white shadow-sm">
	<span className="inline-flex items-center px-1.5 sm:px-2.5 py-0.5 sm:py-1 rounded-full text-xs sm:text-xs font-bold bg-gradient-to-r from-violet-500 to-purple-500 text-white shadow-sm">

	className={`group relative flex flex-col lg:flex-row items-center justify-center lg:justify-start gap-1 sm:gap-1.5 lg:gap-2 px-2 sm:px-3 lg:px-4 py-2 sm:py-2.5 rounded-lg border-2 font-semibold text-[10px] sm:text-xs lg:text-sm transition-all ${
	className={`group relative flex flex-col lg:flex-row items-center justify-center lg:justify-start gap-1 sm:gap-1.5 lg:gap-2 px-2 sm:px-3 lg:px-4 py-2 sm:py-2.5 rounded-lg border-2 font-semibold text-xs sm:text-xs lg:text-sm transition-all ${

Conversation

ngochoa203 commented Jan 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants