Skip to content

Add responsive design enhancements for larger screens #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Isaiahriveraa merged 1 commit into from
Jan 26, 2026
Merged

Add responsive design enhancements for larger screens #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/games/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,14 +276,14 @@ export default function GamesPage() {

{/* Games Grid */}
{loading && games.length === 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3">
{[...Array(6)].map((_, i) => (
<GameCardSkeleton key={i} />
))}
</div>
) : !loading && games.length > 0 ? (
<div className="max-h-[calc(100vh-20rem)] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-zinc-800 scrollbar-track-transparent">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3">
{games.map((game) => (
<ErrorBoundary key={game._id}>
<MinimalGameCard
Expand Down
2 changes: 1 addition & 1 deletion src/components/experimental/layout/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function Header({

{/* Desktop Header */}
<header className="hidden lg:block sticky top-0 z-40 bg-zinc-950/90 backdrop-blur-sm border-b border-dotted border-zinc-800">
<div className="max-w-2xl mx-auto px-8 py-4 flex items-center justify-between">
<div className="max-w-2xl xl:max-w-5xl 2xl:max-w-7xl mx-auto px-8 xl:px-10 2xl:px-12 py-4 flex items-center justify-between">
{showSearch && (
<div className="flex items-center gap-4 text-xs text-zinc-600">
<span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/experimental/layout/PageContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function PageContainer({
return (
<main
className={cn(
'max-w-lg lg:max-w-2xl mx-auto px-6 lg:px-8 pb-24 lg:pb-12',
'max-w-lg lg:max-w-2xl xl:max-w-5xl 2xl:max-w-7xl mx-auto px-6 lg:px-8 xl:px-10 2xl:px-12 pb-24 lg:pb-12',

Copilot AI Jan 26, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR contains numerous changes that are unrelated to the stated purpose of "responsive design enhancements for larger screens". The following files contain changes that should be in separate PRs:

  • clerk-appearance.js: Changes to Clerk styling configuration
  • BettingService.js and related tests: Changes to betting validation logic
  • HuskyBidsLoader.jsx: Addition of subtitle feature
  • Login and SignUp pages: Integration of loading states and refactoring
  • useBetValidation hook and tests: Removal of startTime field references
  • LoadingContext.jsx: Logic changes to loading state management
  • tasks/page.jsx: Addition of memoization comment

These unrelated changes make the PR difficult to review, increase risk, and violate the single responsibility principle for pull requests. Please separate these into focused PRs.

Copilot uses AI. Check for mistakes.
className
)}
{...props}
Expand Down
Loading