Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve board container UI

Browse source 
Enhance DominoRetilingPuzzle board by enlarging the container to remove scrolling, and add cleaner boundaries with padding and rounded corners. Adjust surrounding layout accordingly.

X-Lovable-Edit-ID: edt-922d5ab6-04d3-4109-911c-0f050d43acb5
This commit is contained in:
gpt-engineer-app[bot] 2025-12-08 09:41:19 +00:00
commit 065ce19cd1
1 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/DominoRetilingPuzzle.tsx
View file

@ -186,7 +186,7 @@ const DominoRetilingPuzzle: React.FC<DominoRetilingPuzzleProps> = ({ showSocialS
return 'bg-rose-400 border-rose-600';
};
const cellSize = Math.min(50, 400 / boardSize);
const cellSize = Math.max(32, Math.min(44, 480 / boardSize));
// Render the board
const renderBoard = () => {
@ -422,10 +422,13 @@ const DominoRetilingPuzzle: React.FC<DominoRetilingPuzzleProps> = ({ showSocialS
{/* Board */}
<Card>
<CardContent className="p-6">
<div className="flex justify-center overflow-x-auto">
<CardContent className="p-8">
<div className="flex justify-center">
<div
className="relative border-2 border-foreground/30 bg-background"
className="relative bg-background rounded-lg border border-border shadow-sm p-3"
>
<div
className="relative"
style={{
width: BOARD_COLS * cellSize,
height: BOARD_ROWS * cellSize,
@ -434,6 +437,7 @@ const DominoRetilingPuzzle: React.FC<DominoRetilingPuzzleProps> = ({ showSocialS
{renderBoard()}
</div>
</div>
</div>
{selectedDomino !== null && (
<p className="text-center text-sm text-muted-foreground mt-4">
Domino picked up. Hover over empty cells to preview placement, then click to place.