From c0e15bccf3c33aaaf992fe2a0514f3de4c5ffef2 Mon Sep 17 00:00:00 2001
From: datalore <d4t4.l0r3@protonmail.ch>
Date: Sat, 17 Feb 2024 19:04:31 +0100
Subject: [PATCH] feat: Improved layout on mobile devices

---
 src/app/components/bingo.tsx           | 2 +-
 src/app/components/bingocontroller.tsx | 2 +-
 src/app/components/bingoitem.tsx       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/bingo.tsx b/src/app/components/bingo.tsx
index a952d80..4040892 100644
--- a/src/app/components/bingo.tsx
+++ b/src/app/components/bingo.tsx
@@ -13,7 +13,7 @@ export default function Bingo({size, items}: Props){
 		rows[i] = activeItems.slice(i * size, (i + 1) * size);
 	}
 	return(
-		<table className='w-1/2 table table-xs sm:table-sm md:table-md bg-primary text-primary-content m-auto'>
+		<table className='table table-xs bg-primary text-primary-content m-auto'>
 		<tbody>
 		{rows.map((item, index) => <BingoRow key={index} items={item}/>)}
 		</tbody>
diff --git a/src/app/components/bingocontroller.tsx b/src/app/components/bingocontroller.tsx
index 69c75cf..d2e2435 100644
--- a/src/app/components/bingocontroller.tsx
+++ b/src/app/components/bingocontroller.tsx
@@ -22,7 +22,7 @@ export default function BingoController({buzzwords, maxSize} : {buzzwords?: stri
 	const sizeError = (items.length < size);
 	return(
 		<>
-		<div className="w-3/4 flex flex-col m-auto gap-4">
+		<div className="w-full md:w-3/4 flex flex-col m-auto gap-4">
 		<Bingo size={size} items={items}/>
 		<form className="w-1/3 m-auto">
 		<input type="range" min={3} max={maxSize!} value={size} className="range range-xs sm:range-sm md:range-md range-secondary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/>
diff --git a/src/app/components/bingoitem.tsx b/src/app/components/bingoitem.tsx
index 2571d22..5eb4eda 100644
--- a/src/app/components/bingoitem.tsx
+++ b/src/app/components/bingoitem.tsx
@@ -9,6 +9,6 @@ export default function BingoItem({text}: Props){
 	const [clicked, setClicked] = React.useState(false);
 
 	return(
-		<td><a className={clsx("text-xs btn btn-xs sm:btn-sm md:btn-md w-full", {"btn-ghost":(!clicked)}, {"btn-accent":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
+		<td><a className={clsx("btn btn-xs w-full overflow-hidden", {"btn-ghost":(!clicked)}, {"btn-accent":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
 	);
 }