update show graph

src/roast.css

@@ -5,6 +5,7 @@ body {
     margin: 0;
     padding: 0;
 }
+
 #timer {
     font-size: 48px;
     text-align: center;
@@ -13,26 +14,31 @@ body {
     border: 2px solid #666;
     margin: 0;
 }
+
 #create-plan {
     padding: 20px;
     text-align: center;
 }
+
 #create-plan input {
     width: 80%;
     padding: 10px;
     font-size: 18px;
 }
+
 #create-plan button {
     margin-top: 10px;
     padding: 10px 20px;
     font-size: 18px;
 }
+
 #controls {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
 }
+
 .button-group {
     display: flex;
     flex-wrap: wrap;
@@ -40,6 +46,7 @@ body {
     gap: 10px;
     margin: 10px;
 }
+
 .button-group button:not(.nav-btn) {
     font-size: 20px;
     border: 2px solid #666;
@@ -48,6 +55,7 @@ body {
     border-radius: 10px;
     cursor: pointer;
 }
+
 .button-group .nav-btn {
     padding: 15px 25px;
     font-size: 20px;
@@ -57,9 +65,11 @@ body {
     border-radius: 10px;
     cursor: pointer;
 }
+
 .button-group button:active {
     background-color: #ddd;
 }
+
 #event-buttons {
     display: flex;
     flex-wrap: wrap;
@@ -67,6 +77,7 @@ body {
     gap: 10px;
     margin: 20px;
 }
+
 #event-buttons button {
     padding: 15px 25px;
     font-size: 20px;
@@ -76,30 +87,38 @@ body {
     border-radius: 10px;
     cursor: pointer;
 }
+
 #event-buttons button:active {
     background-color: #ddd;
 }
+
 #log-table {
     width: 100%;
     border-collapse: collapse;
 }
+
 #log-table table {
     table-layout: fixed;
     width: 90%;
-    margin: auto;        
+    margin: auto;
 }
-#log-table th, #log-table td {
+
+#log-table th,
+#log-table td {
     border: 1px solid #666;
     padding: 10px;
     text-align: center;
 }
+
 #log-table th {
     background-color: #f0e6ff;
 }
+
 #export-csv {
     margin: 20px;
     text-align: center;
 }
+
 #export-csv button {
     padding: 10px 20px;
     font-size: 18px;
@@ -109,32 +128,42 @@ body {
     border-radius: 10px;
     cursor: pointer;
 }
+
 #export-csv button:active {
     background-color: #ddd;
 }
+
 .hidden {
     display: none;
 }
+
 #temp-buttons {
     margin: 8px;
 }
+
 #temp-buttons button {
     text-align: center;
     width: 3.5em;
 }
-
-.graph-container {
-    position: relative;
+#graph-container {
+    position: fixed; /* Centered and float over the screen */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* Aligns perfectly center */
     width: 100%;
     max-width: 800px;
     height: 400px;
-    display: flex;
     justify-content: center;
     align-items: center;
     background-color: #fff;
     border: 1px solid #ccc;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
+    z-index: 1000; /* Ensures it's above other elements */
+}
+
+.graph-display-flex {
+    display: flex;
 }
 
 canvas {