david/euchre_camp
Public Access
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

fix: prevent content overflow on right side of screen
Pull Request / unit-tests (pull_request) Successful in 58s
Details
Pull Request / e2e-tests (pull_request) Failing after 3m3s
Details
Pull Request / analyze-bump-type (pull_request) Has been skipped
Details

Browse Source 
Fixes #23

- Added overflow-x-hidden to body in root layout as defensive measure
- Changed table containers from overflow-hidden to overflow-x-auto
  in admin/players page and RankingsClient (3 tables)
- Added min-w-0 and overflow-hidden to Navigation flex containers
  to prevent links from pushing content off screen
- Added flex-shrink-0 to EuchreCamp wordmark link
This commit is contained in:
David Gwilliam
2026-04-26 20:02:57 -07:00
parent 36339d7914
commit 6fd273c16c
4 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/players/page.tsx
+1 -1
View File
@@ -258,7 +258,7 @@ export default function AdminPlayersPage() {
</div> </div>
{/* Player Table */} {/* Player Table */}
<div className="bg-white shadow rounded-lg overflow-hidden"> <div className="bg-white shadow rounded-lg overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200"> <table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr> <tr>
src/app/layout.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export default function RootLayout({
lang="en" lang="en"
className={`${inter.variable} h-full antialiased`} className={`${inter.variable} h-full antialiased`}
> >
<body className="min-h-full flex flex-col"> <body className="min-h-full flex flex-col overflow-x-hidden">
<SessionProvider> <SessionProvider>
{children} {children}
<Footer /> <Footer />
src/app/rankings/RankingsClient.tsx
+3 -3
View File
@@ -59,7 +59,7 @@ export default function RankingsClient({ players }: { players: PlayerWithRatings
{/* Elo Rating Tab */} {/* Elo Rating Tab */}
{activeTab === "elo" && ( {activeTab === "elo" && (
<div className="bg-white shadow overflow-hidden sm:rounded-lg"> <div className="bg-white shadow overflow-x-auto sm:rounded-lg">
<h2 className="text-xl font-semibold text-gray-900 px-6 py-4 border-b"> <h2 className="text-xl font-semibold text-gray-900 px-6 py-4 border-b">
Elo Rating Rankings Elo Rating Rankings
</h2> </h2>
@@ -117,7 +117,7 @@ export default function RankingsClient({ players }: { players: PlayerWithRatings
{/* OpenSkill Rating Tab */} {/* OpenSkill Rating Tab */}
{activeTab === "openskill" && ( {activeTab === "openskill" && (
<div className="bg-white shadow overflow-hidden sm:rounded-lg"> <div className="bg-white shadow overflow-x-auto sm:rounded-lg">
<h2 className="text-xl font-semibold text-gray-900 px-6 py-4 border-b"> <h2 className="text-xl font-semibold text-gray-900 px-6 py-4 border-b">
OpenSkill Rating Rankings OpenSkill Rating Rankings
</h2> </h2>
@@ -178,7 +178,7 @@ export default function RankingsClient({ players }: { players: PlayerWithRatings
{/* Glicko2 Rating Tab */} {/* Glicko2 Rating Tab */}
{activeTab === "glicko2" && ( {activeTab === "glicko2" && (
<div className="bg-white shadow overflow-hidden sm:rounded-lg"> <div className="bg-white shadow overflow-x-auto sm:rounded-lg">
<h2 className="text-xl font-semibold text-gray-900 px-6 py-4 border-b"> <h2 className="text-xl font-semibold text-gray-900 px-6 py-4 border-b">
Glicko2 Rating Rankings Glicko2 Rating Rankings
</h2> </h2>
src/components/Navigation.tsx
+4 -4
View File
@@ -50,14 +50,14 @@ export default function Navigation() {
<nav className="bg-white shadow-sm"> <nav className="bg-white shadow-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16"> <div className="flex justify-between h-16">
<div className="flex items-center"> <div className="flex items-center min-w-0 overflow-hidden">
<Link <Link
href="/wordmark-redirect" href="/wordmark-redirect"
className="text-xl font-bold text-gray-900 no-underline" className="text-xl font-bold text-gray-900 no-underline flex-shrink-0"
> >
EuchreCamp EuchreCamp
</Link> </Link>
<div className="hidden md:ml-6 md:flex md:space-x-8"> <div className="hidden md:ml-6 md:flex md:space-x-8 min-w-0 overflow-hidden">
<Link <Link
href="/rankings" href="/rankings"
className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
@@ -110,7 +110,7 @@ export default function Navigation() {
)} )}
</div> </div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center min-w-0 overflow-hidden">
{loading ? ( {loading ? (
<div className="text-gray-500">Loading...</div> <div className="text-gray-500">Loading...</div>
) : session ? ( ) : session ? (