initial responsive rendering

This commit is contained in:
2026-02-24 16:59:27 +06:00
parent 82534f958d
commit eccc219924
11 changed files with 14 additions and 14 deletions

View File

@ -11,7 +11,7 @@ import { Progress } from "../../components/ui/progress";
export const Analytics = () => {
return (
<main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
<main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
<h1 className="font-satoshi-bold text-3xl text-center tracking-tight">
Analytics
</h1>

View File

@ -84,7 +84,7 @@ export const Home = () => {
};
return (
<main className="min-h-screen bg-gray-50 space-y-6 mx-auto px-8 sm:px-6 lg:px-90 py-12">
<main className="min-h-screen bg-gray-50 space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
Welcome, {user?.name || "Student"}
</h1>
@ -179,7 +179,7 @@ export const Home = () => {
</TabsTrigger>
</TabsList>
<TabsContent value="all" className="pt-6">
<div className="gap-6 flex flex-col md:grid md:grid-cols-2">
<div className="gap-6 flex flex-col md:grid md:grid-cols-3 lg:grid-cols-4">
{practiceSheets.length > 0 ? (
practiceSheets.map((sheet) => (
<Card key={sheet?.id} className="rounded-4xl">
@ -228,7 +228,7 @@ export const Home = () => {
</div>
</TabsContent>
<TabsContent value="NOT_STARTED" className="pt-6">
<div className="gap-6 flex flex-col md:grid md:grid-cols-2">
<div className="gap-6 flex flex-col md:grid md:grid-cols-3 lg:grid-cols-4">
{notStartedSheets.map((sheet) => (
<Card key={sheet?.id} className="rounded-4xl">
<CardHeader>
@ -266,7 +266,7 @@ export const Home = () => {
</div>
</TabsContent>
<TabsContent value="COMPLETED" className="pt-6">
<div className="gap-6 flex flex-col md:grid md:grid-cols-2">
<div className="gap-6 flex flex-col md:grid md:grid-cols-3 lg:grid-cols-4">
{completedSheets.length > 0 ? (
completedSheets.map((sheet) => (
<Card key={sheet?.id} className="rounded-4xl">

View File

@ -61,7 +61,7 @@ export const Lessons = () => {
}, [user]);
return (
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<header className="space-y-2">
<h1 className="font-satoshi-black text-2xl">Lessons</h1>
<p className="font-satoshi-medium text-sm text-gray-500">

View File

@ -26,7 +26,7 @@ export const Practice = () => {
const userXp = useExamConfigStore.getState().userXp;
console.log(userXp);
return (
<main className="h-fit max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
<main className="h-fit max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
<header className="flex justify-between items-center">
<div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
<BookOpen size={20} color="white" />

View File

@ -12,7 +12,7 @@ export const Profile = () => {
};
return (
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 md:px-26 lg:px-8 py-8">
<main className="min-h-screen space-y-6 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h1 className="text-lg font-satoshi-bold text-center">Profile</h1>
<section>
<h3 className="text-2xl font-satoshi-bold">{user?.name}</h3>

View File

@ -84,7 +84,7 @@ export const Rewards = () => {
const isTopThree = (leaderboard?.user_rank?.rank ?? Infinity) < 3;
return (
<main className="flex flex-col gap-8 items-start mx-auto sm:px-6 lg:px-8 py-8">
<main className="flex flex-col gap-8 items-start max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<header className="flex flex-col items-center h-fit w-full gap-3">
<h1 className="font-satoshi-black text-3xl">Leaderboards</h1>
{loading ? (

View File

@ -72,7 +72,7 @@ export const Drills = () => {
}, [user]);
return (
<main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
<main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
<header className="space-y-2">
<h1 className="font-satoshi-bold text-3xl">Drills</h1>
<p className="font-satoshi text-md text-gray-500">

View File

@ -30,7 +30,7 @@ export const HardTestModules = () => {
navigate(`/student/practice/${selected}/test`, { replace: true });
}
return (
<main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
<main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
<header className="space-y-2">
<h1 className="font-satoshi-bold text-3xl">Hard Test Modules</h1>
<p className="font-satoshi text-md text-gray-500">

View File

@ -73,7 +73,7 @@ export const Pretest = () => {
}, [carouselApi]);
return (
<main className="max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-6">
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
<header className="space-y-2">
<h1 className="text-4xl font-satoshi-bold">{practiceSheet?.title}</h1>
<p className="text-lg font-satoshi text-gray-700">

View File

@ -91,7 +91,7 @@ export const Results = () => {
const previousXP = results ? results.total_xp - results.xp_gained : 0;
return (
<main className="min-h-screen bg-gray-50 space-y-6 mx-auto px-8 sm:px-6 lg:px-90 py-10">
<main className="min-h-screen bg-gray-50 space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<header className="flex gap-4">
<button
onClick={() => handleFinishExam()}

View File

@ -90,7 +90,7 @@ export const TargetedPractice = () => {
}, [user]);
return (
<main className="relative min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
<main className="relative min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
<header className="space-y-2">
<h1 className="font-satoshi-bold text-3xl">Targeted Practice</h1>
<p className="font-satoshi text-md text-gray-500">