From a3200e09cbfe7bba12fae7d33c4a79f13984c3d3 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Mon, 23 Jun 2025 21:50:28 +1000
Subject: [PATCH] Doing some manual CSS hax for a change

---
 examples/chat-ui/src/components/ChatApp.tsx   |  1 +
 .../chat-ui/src/components/OAuthCallback.tsx  |  1 +
 examples/chat-ui/src/index.css                | 28 ++++++++++++++-----
 examples/chat-ui/src/styles/scrollbar.css     |  2 ++
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index 835ec6c..57cc640 100644
--- a/examples/chat-ui/src/components/ChatApp.tsx
+++ b/examples/chat-ui/src/components/ChatApp.tsx
@@ -107,6 +107,7 @@ const ChatApp: React.FC<ChatAppProps> = () => {
       className="flex min-h-screen w-screen animated-bg-container"
       style={{ '--random-delay': `${animationDelay}s` } as React.CSSProperties}
     >
+      <div className="animated-bg"></div>
       <div className="flex flex-row flex-grow flex-1 min-h-screen relative">
         {/* Sidebar and Navbar components hidden but kept in codebase */}
         {false && (
diff --git a/examples/chat-ui/src/components/OAuthCallback.tsx b/examples/chat-ui/src/components/OAuthCallback.tsx
index b7a288b..5c7bc14 100644
--- a/examples/chat-ui/src/components/OAuthCallback.tsx
+++ b/examples/chat-ui/src/components/OAuthCallback.tsx
@@ -8,6 +8,7 @@ export function OAuthCallback() {
 
   return (
     <div className="min-h-screen animated-bg-container flex items-center justify-center p-4">
+      <div className="animated-bg"></div>
       <div className="bg-white rounded-lg shadow-xl p-8 text-center max-w-md w-full">
         <h1 className="text-2xl font-bold text-zinc-900 mb-4">Authenticating...</h1>
         <p className="text-zinc-600 mb-2">Please wait while we complete your authentication.</p>
diff --git a/examples/chat-ui/src/index.css b/examples/chat-ui/src/index.css
index f649baa..1986614 100644
--- a/examples/chat-ui/src/index.css
+++ b/examples/chat-ui/src/index.css
@@ -13,19 +13,33 @@
 
 .animated-bg-container {
   position: relative;
+  /*overflow: hidden;*/
+  /*height: 500vh;*/
 }
 
-.animated-bg-container::before {
+.animated-bg {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, #fdf2f8, #faf5ff, #eef2ff);
-  background-size: 100% 100vh;
+  top: 0vh;
+  left: 0vw;
+  right: 0vw;
+  bottom: 0vh;
+  overflow: hidden;
+}
+
+.animated-bg::before {
+  content: '';
+  position: absolute;
+  top: -100vh;
+  left: -1000vw;
+  right: -1000vw;
+  bottom: -100vh;
+  background: linear-gradient(180deg, #fdf2f8, #faf5ff, #eef2ff, #faf5ff, #fdf2f8);
+  /*background: linear-gradient(180deg, red, black, blue, black, red);*/
+  background-size: 100% 200vh;
   background-repeat: repeat-y;
   animation: hue-rotate 60s linear infinite;
   animation-delay: var(--random-delay, 0s);
   z-index: -1;
+  transform: rotate(-20deg);
 }
diff --git a/examples/chat-ui/src/styles/scrollbar.css b/examples/chat-ui/src/styles/scrollbar.css
index 5db1825..454d10d 100644
--- a/examples/chat-ui/src/styles/scrollbar.css
+++ b/examples/chat-ui/src/styles/scrollbar.css
@@ -2,6 +2,8 @@
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
+  /* Scrollbars are fuxing with the layout?? */
+  display: none;
 }
 
 ::-webkit-scrollbar-track {