From d4409402260e570d43bdb4ec4dadc318d2a93a6a Mon Sep 17 00:00:00 2001
From: cprice11 <krister.price+github@gmail.com>
Date: Mon, 14 Oct 2024 19:42:49 -0600
Subject: [PATCH] fixed some css on control view

---
 .../bus-bunching/controls/lib/index.js        | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/experiences/bus-bunching/controls/lib/index.js b/experiences/bus-bunching/controls/lib/index.js
index e243fa1..92e8843 100644
--- a/experiences/bus-bunching/controls/lib/index.js
+++ b/experiences/bus-bunching/controls/lib/index.js
@@ -22,24 +22,31 @@ const sectionWrapperStyle = {
 };
 
 const buttonWrapperStyle = {
-  width: "100%",
   display: "grid",
-  gridTemplateColumns: "repeat(5, 17%)",
-  gridTemplateRows: "repeat(4, 100%)",
-  gap: "3%",
-  alignItems: "center",
-  justifyContent: "center",
-  Height: "auto",
+  gap: "10px",
+  gridTemplateColumns: "repeat(5, minmax(70px, 1fr))",
 };
 
 const buttonStyle = {
+  position: "relative",
   width: "100%",
-  aspectRatio: "1 / 1",
-  borderRadius: "100%",
-  fontSize: "200%",
+  paddingTop: "100%",
+  borderRadius: "50%",
+};
+
+const contentStyle = {
+  position: "absolute",
+  top: "0",
+  left: "0",
+  right: "0",
+  bottom: "0",
+  display: "flex",
   alignItems: "center",
   justifyContent: "center",
-};
+  color: "white",
+  fontSize: "500%",
+
+}
 
 const ControlsComponent = () => {
   const { sendMessage } = useMessaging();
@@ -84,8 +91,8 @@ const ControlsComponent = () => {
   );
 
   const busStopSymbol = (index) => {
-    const stopStyle = {
-      ...buttonStyle,
+    let stopStyle = {
+      ...contentStyle,
       color: stopColors[index % stopColors.length],
     };
     return (