From afbe2a41987528950437f5a73d396bf46c9e9872 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 9 Feb 2026 15:15:44 -0600
Subject: [PATCH] fix(site): improve time demo css

---
 site/src/components/docs/demos/Demo.astro           |  2 +-
 .../docs/demos/time/html/css/CurrentDuration.css    | 13 +++++++++++++
 .../docs/demos/time/html/css/CurrentTime.css        | 10 ++++++++++
 .../docs/demos/time/html/css/CustomNegativeSign.css | 10 ++++++++++
 .../docs/demos/time/html/css/CustomSeparator.css    | 13 +++++++++++++
 .../docs/demos/time/html/css/Remaining.css          | 10 ++++++++++
 .../docs/demos/time/react/css/CurrentDuration.css   | 13 +++++++++++++
 .../docs/demos/time/react/css/CurrentTime.css       | 10 ++++++++++
 .../demos/time/react/css/CustomNegativeSign.css     | 10 ++++++++++
 .../docs/demos/time/react/css/CustomSeparator.css   | 13 +++++++++++++
 .../docs/demos/time/react/css/Remaining.css         | 10 ++++++++++
 11 files changed, 113 insertions(+), 1 deletion(-)

diff --git a/site/src/components/docs/demos/Demo.astro b/site/src/components/docs/demos/Demo.astro
index 9d3cc57b..226218f2 100644
--- a/site/src/components/docs/demos/Demo.astro
+++ b/site/src/components/docs/demos/Demo.astro
@@ -18,7 +18,7 @@ const { files } = Astro.props;
 ---
 
 <div class="my-6 w-full max-w-3xl mx-auto flex flex-col rounded-lg overflow-hidden border border-light-40 dark:border-dark-80">
-  <div class="relative z-20 p-6 bg-light-80 dark:bg-dark-100">
+  <div class="relative z-20 bg-light-80 dark:bg-dark-100">
     <slot />
   </div>
   <TabsRoot client:idle maxWidth={false} className="my-0 rounded-none border-0 border-t border-light-40 dark:border-dark-80">
diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.css b/site/src/components/docs/demos/time/html/css/CurrentDuration.css
index eff28ff2..d2eaa1bd 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentDuration.css
+++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.css
@@ -7,5 +7,18 @@
 }
 
 .time-current-duration__group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.css b/site/src/components/docs/demos/time/html/css/CurrentTime.css
index 25bccc71..a01d8c06 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentTime.css
+++ b/site/src/components/docs/demos/time/html/css/CurrentTime.css
@@ -7,5 +7,15 @@
 }
 
 .time-current-time__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css
index 3a2ef6fa..3f2c05cf 100644
--- a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css
+++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css
@@ -7,5 +7,15 @@
 }
 
 .time-custom-negative-sign__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.css b/site/src/components/docs/demos/time/html/css/CustomSeparator.css
index a6e2c604..d6050440 100644
--- a/site/src/components/docs/demos/time/html/css/CustomSeparator.css
+++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.css
@@ -7,5 +7,18 @@
 }
 
 .time-custom-separator__group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/html/css/Remaining.css b/site/src/components/docs/demos/time/html/css/Remaining.css
index 0e13d895..aba8cd8a 100644
--- a/site/src/components/docs/demos/time/html/css/Remaining.css
+++ b/site/src/components/docs/demos/time/html/css/Remaining.css
@@ -7,5 +7,15 @@
 }
 
 .time-remaining__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.css b/site/src/components/docs/demos/time/react/css/CurrentDuration.css
index eff28ff2..d2eaa1bd 100644
--- a/site/src/components/docs/demos/time/react/css/CurrentDuration.css
+++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.css
@@ -7,5 +7,18 @@
 }
 
 .time-current-duration__group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.css b/site/src/components/docs/demos/time/react/css/CurrentTime.css
index 25bccc71..a01d8c06 100644
--- a/site/src/components/docs/demos/time/react/css/CurrentTime.css
+++ b/site/src/components/docs/demos/time/react/css/CurrentTime.css
@@ -7,5 +7,15 @@
 }
 
 .time-current-time__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css
index 3a2ef6fa..3f2c05cf 100644
--- a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css
+++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css
@@ -7,5 +7,15 @@
 }
 
 .time-custom-negative-sign__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.css b/site/src/components/docs/demos/time/react/css/CustomSeparator.css
index a6e2c604..d6050440 100644
--- a/site/src/components/docs/demos/time/react/css/CustomSeparator.css
+++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.css
@@ -7,5 +7,18 @@
 }
 
 .time-custom-separator__group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }
diff --git a/site/src/components/docs/demos/time/react/css/Remaining.css b/site/src/components/docs/demos/time/react/css/Remaining.css
index 0e13d895..aba8cd8a 100644
--- a/site/src/components/docs/demos/time/react/css/Remaining.css
+++ b/site/src/components/docs/demos/time/react/css/Remaining.css
@@ -7,5 +7,15 @@
 }
 
 .time-remaining__value {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-block: 8px;
+  padding-inline: 20px;
   font-variant-numeric: tabular-nums;
 }