diff --git a/src/App.jsx b/src/App.jsx
index 5c46efc..5d9bbf5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2952,7 +2952,14 @@ function UptimePage({ uptime }) {
           </p>
         </div>
 
-        <div className="relative mt-5 flex h-28 items-end gap-1 rounded-md border border-border bg-bg p-3">
+        <div
+          className="relative mt-5 grid h-28 items-end gap-px rounded-md border border-border bg-bg p-3"
+          style={{
+            gridTemplateColumns: history.length
+              ? `repeat(${history.length}, minmax(0, 1fr))`
+              : '1fr',
+          }}
+        >
           {history.map((sample, index) => {
             const height = `${Math.max(12, (sample.onlineChecks / sample.totalChecks) * 100)}%`
             const left = history.length > 1 ? (index / (history.length - 1)) * 100 : 50
@@ -2960,7 +2967,7 @@ function UptimePage({ uptime }) {
             return (
               <div
                 aria-label={`${sample.ok ? 'Uptime' : 'Downtime'} at ${dateFormat.format(new Date(sample.timestamp))}`}
-                className={`min-w-2 flex-1 rounded-sm ${sample.ok ? 'bg-success' : 'bg-danger'}`}
+                className={`w-full min-w-0 rounded-sm ${sample.ok ? 'bg-success' : 'bg-danger'}`}
                 key={sample.timestamp}
                 onBlur={() => setHoveredSnapshot(null)}
                 onFocus={() => setHoveredSnapshot({ ...sample, left })}