From 44d6f571a5a2b8bce0fd4e8a9eae76204284885b Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 17:07:13 +0000
Subject: [PATCH] Make decorative triangles static to prevent visual jumping

Replaced 'floating-triangles' CSS class with 'static-triangles' and removed animations from triangle decorations in the header and page backgrounds to ensure stable visual elements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/UjCt1XL
---
 client/src/components/search-header.tsx |  6 ++---
 client/src/index.css                    | 35 ++-----------------------
 client/src/pages/VideoPage.tsx          |  2 +-
 client/src/pages/home.tsx               |  2 +-
 client/src/pages/not-found.tsx          |  2 +-
 5 files changed, 8 insertions(+), 39 deletions(-)

diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index b63a647..d8dfcc6 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -47,9 +47,9 @@ export default function SearchHeader({
     <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
 
       
-      {/* Triangle decorations v headerju - z nižjim z-index da ne zakrivajo besedila */}
-      <div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-blue-400/8 rotate-12 z-0"></div>
-      <div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/6 -rotate-6 z-0"></div>
+      {/* Static triangle decorations - fixed positioning */}
+      <div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-blue-400/8 transform rotate-12 z-0 pointer-events-none"></div>
+      <div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/6 transform -rotate-6 z-0 pointer-events-none"></div>
       
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="flex items-center justify-between h-20">
diff --git a/client/src/index.css b/client/src/index.css
index 214160c..41269f6 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -272,44 +272,13 @@ input[data-testid*="search"]::placeholder {
   z-index: 1;
 }
 
-.floating-triangles {
+/* Static triangle decorations - no animations to prevent jumping */
+.static-triangles {
   position: relative;
   overflow: hidden;
 }
 
-.floating-triangles::before {
-  content: '';
-  position: absolute;
-  top: 15%;
-  right: 2%;
-  width: 0;
-  height: 0;
-  border-left: 20px solid transparent;
-  border-right: 20px solid transparent;
-  border-bottom: 30px solid rgba(59, 130, 246, 0.03);
-  transform: rotate(30deg);
-  z-index: -1;
-}
-
-.floating-triangles::after {
-  content: '';
-  position: absolute;
-  bottom: 25%;
-  left: 2%;
-  width: 0;
-  height: 0;
-  border-left: 18px solid transparent;
-  border-right: 18px solid transparent;
-  border-bottom: 28px solid rgba(147, 51, 234, 0.03);
-  transform: rotate(-15deg);
-  z-index: -1;
-}
-
 /* Background go4.video logo decorations */
-.floating-triangles {
-  position: relative;
-  overflow: hidden;
-}
 
 .bg-logo-large {
   position: absolute;
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 9179105..1375b57 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -121,7 +121,7 @@ export default function VideoPage() {
   }
 
   return (
-    <div className="min-h-screen bunny-dark floating-triangles">
+    <div className="min-h-screen bunny-dark static-triangles">
       {/* Header with triangle design */}
       <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
         {/* Triangle decorations in header - same as home page */}
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 55d7155..5c94d91 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -77,7 +77,7 @@ export default function Home() {
   }, [searchQuery, offset, refetch]);
 
   return (
-    <div className="min-h-screen bunny-dark floating-triangles">
+    <div className="min-h-screen bunny-dark static-triangles">
       <SearchHeader
         onSearch={handleSearch}
         onViewChange={setViewMode}
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index 4ba1db5..56c6412 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -5,7 +5,7 @@ import go4LogoPath from "@assets/go4_1756394900352.png";
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen bunny-dark floating-triangles">
+    <div className="min-h-screen bunny-dark static-triangles">
       {/* Header - same as other pages */}
       <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
         {/* Triangle decorations in header */}