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 ? (
<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 />
<Settings />
<TarokkaGrid />

4
app/layout.tsx
View File

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

2
app/page.tsx
View File

@@ -16,7 +16,7 @@ export default function Home() {
};
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">
<h1 className="text-5xl font-bold text-center text-primary">Tarokka</h1>
<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 (
<ToolTip content={tooltip || getTooltip()}>
<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}
>
<div

2
components/TarokkaGrid.tsx
View File

@@ -15,7 +15,7 @@ export default function TarokkaGrid() {
const arrangeCards = (_cell: unknown, index: number) => cards[cardMap[index]];
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 })
.map(arrangeCards)
.map((card, index) => (