Doing some manual CSS hax for a change

Author: geelen

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 && (

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>

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);
 }

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 {