gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

fix mobile spacing and scrolling

Browse Source
This commit is contained in:
Gavin McDonald
2025-07-08 08:24:40 -04:00
parent 62c3b7b557
commit 11245bf4d8
5 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[gameID]/page.tsx
View File

@@ -24,7 +24,7 @@ export default function GamePage() {
return noGame ? ( return noGame ? (
<NotFound /> <NotFound />
) : ( ) : (
<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center"> <main className="h-dvh flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
<SpectatorLink /> <SpectatorLink />
<Settings /> <Settings />
<TarokkaGrid /> <TarokkaGrid />

4
app/layout.tsx
View File

@@ -25,8 +25,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en" className={`${eagleLake.variable} antialiased`}> <html lang="en" className={`${eagleLake.variable} antialiased overscroll-none`}>
<body className={`${eagleLake.className} antialiased`}> <body className={`${eagleLake.className} antialiased h-dvh`}>
<AppProvider>{children}</AppProvider> <AppProvider>{children}</AppProvider>
</body> </body>
</html> </html>

2
app/page.tsx
View File

@@ -16,7 +16,7 @@ export default function Home() {
}; };
return ( return (
<main className="min-h-screen flex justify-center items-center text-yellow-400 bg-[url('/img/table3.png')] bg-cover bg-center"> <main className="flex justify-center items-center h-dvh text-yellow-400 bg-[url('/img/table3.png')] bg-cover bg-center">
<div className="flex flex-col items-center gap-8 text-center"> <div className="flex flex-col items-center gap-8 text-center">
<h1 className="text-5xl font-bold text-center text-primary">Tarokka</h1> <h1 className="text-5xl font-bold text-center text-primary">Tarokka</h1>
<p className="text-l text-center w-[350px] m-auto"> <p className="text-l text-center w-[350px] m-auto">

2
components/Card.tsx
View File

@@ -54,7 +54,7 @@ export default function Card({ card, cardIndex }: CardProps) {
return ( return (
<ToolTip content={tooltip || getTooltip()}> <ToolTip content={tooltip || getTooltip()}>
<TiltCard <TiltCard
className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `} className={`h-[21vh] w-[15vh] max-w-[30vw] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
cardIndex={cardIndex} cardIndex={cardIndex}
> >
<div <div

2
components/TarokkaGrid.tsx
View File

@@ -15,7 +15,7 @@ export default function TarokkaGrid() {
const arrangeCards = (_cell: unknown, index: number) => cards[cardMap[index]]; const arrangeCards = (_cell: unknown, index: number) => cards[cardMap[index]];
return ( return (
<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto"> <div className="grid grid-cols-3 grid-rows-3 gap-2 sm:gap-4 md:gap-8 w-fit mx-auto">
{Array.from({ length: 9 }) {Array.from({ length: 9 })
.map(arrangeCards) .map(arrangeCards)
.map((card, index) => ( .map((card, index) => (