From 8245b7b3b203a55cdce0d257f7ef2e6a046d6627 Mon Sep 17 00:00:00 2001
From: billy <billy@shuttle>
Date: Sun, 30 Mar 2025 15:36:54 -0400
Subject: [PATCH] Update App layout and enhance BuildingButton styles for
 improved UI. Adjusted spacing and column count in SimpleGrid for better
 building display, and refined text size and button properties in
 BuildingButton for enhanced readability and usability.

---
 src/App.tsx                       |  6 +++---
 src/components/BuildingButton.tsx | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 11c9533..4ad94bd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -94,8 +94,8 @@ function App() {
         cursor={hasStarted ? "pointer" : "default"}
       >
         <ResourceDisplay />
-        <Box pt="100px">
-          <Container maxW="container.xl">
+        <Box pt="100px flex flex-col w-full">
+          <Container maxW="container.xl m-auto">
             <VStack spacing={8}>
               <VStack spacing={8} w="full">
                 {/* Game Title */}
@@ -103,7 +103,7 @@ function App() {
                   <Heading as="h1" size="lg" color="brand.300">Clicker Clicker 2</Heading>
                 </Box>
                 {/* Buildings Grid */}
-                <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
+                <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap={4}>
                   {availableBuildings.map((building) => (
                     <BuildingButton
                       key={building.id}
diff --git a/src/components/BuildingButton.tsx b/src/components/BuildingButton.tsx
index 03d66c4..aa52cb8 100644
--- a/src/components/BuildingButton.tsx
+++ b/src/components/BuildingButton.tsx
@@ -147,7 +147,7 @@ export function BuildingButton({
             borderBottomRightRadius="md"
             boxShadow="0 1px 3px rgba(0,0,0,0.5)"
           >
-            <Text fontWeight="bold" fontSize="sm" color="brand.200" variant="pixel">{title}</Text>
+            <Text fontWeight="bold" fontSize="xs" color="brand.200" variant="pixel">{title}</Text>
           </Box>
           
           {/* Overlay for owned count */}
@@ -198,6 +198,13 @@ export function BuildingButton({
             color="text.dark"
             size="sm"
             flexGrow={1}
+            px={1}
+            height="auto"
+            minH="2rem"
+            whiteSpace="normal"
+            textAlign="center"
+            lineHeight="1.2"
+            fontSize="xs"
           >
             Buy ({formatNumber(cost)} points)
           </Button>
@@ -211,6 +218,13 @@ export function BuildingButton({
               size="sm"
               flexGrow={1}
               variant="outline"
+              px={1}
+              height="auto"
+              minH="2rem"
+              whiteSpace="normal"
+              textAlign="center"
+              lineHeight="1.2"
+              fontSize="xs"
             >
               Upgrade ({formatNumber(upgradeCost)} points)
             </Button>