From a79ebaf044b512194702e20b01800768c44de4ef 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       | 4 ++++
 3 files changed, 6 insertions(+), 2 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 eca3663..059c788 100644
--- a/src/app/components/bingocontroller.tsx
+++ b/src/app/components/bingocontroller.tsx
@@ -21,7 +21,7 @@ export default function BingoController({buzzwords} : {buzzwords?: string[]}){
 	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={5} 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 e72c404..cca8e48 100644
--- a/src/app/components/bingoitem.tsx
+++ b/src/app/components/bingoitem.tsx
@@ -9,6 +9,10 @@ export default function BingoItem({text}: Props){
 	const [clicked, setClicked] = React.useState(false);
 
 	return(
+<<<<<<< HEAD
 		<td><a className={clsx("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>
+>>>>>>> c0e15bc (feat: Improved layout on mobile devices)
 	);
 }