From d928feb663fd9cea86b9adec9221cda5cca85c80 Mon Sep 17 00:00:00 2001
From: rodribp <rodrigobonilla177@gmail.com>
Date: Mon, 22 Jun 2026 21:31:18 -0600
Subject: [PATCH] fix: goggles overflow-x with css mask on edges of
 .active-flags

---
 .../block-filters.component.html              |  2 +-
 .../block-filters.component.scss              | 60 ++++++++++++++++++-
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/block-filters/block-filters.component.html b/frontend/src/app/components/block-filters/block-filters.component.html
index e13ae975b..33dfb621d 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.html
+++ b/frontend/src/app/components/block-filters/block-filters.component.html
@@ -6,7 +6,7 @@
     <button class="menu-toggle" (click)="menuOpen = !menuOpen" title="Mempool Goggles&reg;">
       <app-svg-images name="goggles" width="100%" height="100%"></app-svg-images>
     </button>
-    <div class="active-tags">
+    <div class="active-tags" [class.menu-open]="menuOpen">
       <ng-container *ngFor="let filter of activeFilters;">
         <button class="btn filter-tag selected" (click)="toggleFilter(filter)">{{ filters[filter].label }}</button>
       </ng-container>
diff --git a/frontend/src/app/components/block-filters/block-filters.component.scss b/frontend/src/app/components/block-filters/block-filters.component.scss
index 268212729..df4b85372 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.scss
+++ b/frontend/src/app/components/block-filters/block-filters.component.scss
@@ -18,6 +18,41 @@
     flex-wrap: wrap;
     row-gap: 0.25em;
     margin-left: 0.5em;
+    width: 100%;
+
+    &.menu-open {
+      white-space: nowrap;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+      margin-right: 0.5em;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        #000 var(--fade-l),
+        #000 calc(100% - var(--fade-r)),
+        transparent 100%
+      );
+
+      mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        #000 var(--fade-l),
+        #000 calc(100% - var(--fade-r)),
+        transparent 100%
+      );
+
+      animation: goggles-fade-l linear both, goggles-fade-r linear both;
+      animation-timeline: scroll(self inline);
+      animation-range:0 1.5em, 0 100%;
+      animation-duration: 1ms;
+    }
   }
 
   .info-badges {
@@ -217,4 +252,27 @@
       font-size: 0.5em;
     }
   }
-}
\ No newline at end of file
+}
+
+@property --fade-l {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --fade-r {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes goggles-fade-l {
+  to {
+    --fade-l: 1em;
+  }
+}
+@keyframes goggles-fade-r {
+  from {
+    --fade-r: 1em;
+  }
+}