Further Improvements

Author: grolu

frontend/src/components/GScrollContainer.vue

@@ -8,12 +8,12 @@ SPDX-License-Identifier: Apache-2.0
   <div
     class="scroll-wrapper"
     :class="wrapperClasses"
-    :style="cssVars"
   >
     <div
       ref="scrollRef"
       class="scrollable-container"
       :class="containerClasses"
+      :style="maskStyle"
     >
       <div
         ref="contentRef"
@@ -86,6 +86,28 @@ const fadeOpacity = computed(() => {
   return remainingY / fadeSize.value
 })
 
+const maskStyle = computed(() => {
+  if (fadeOpacity.value <= 0) {
+    return {}
+  }
+
+  const effectiveFadeSize = Math.round(fadeSize.value * fadeOpacity.value)
+
+  if (direction.value === 'horizontal') {
+    const gradient = `linear-gradient(to right, black 0, black calc(100% - ${effectiveFadeSize}px), transparent 100%)`
+    return {
+      maskImage: gradient,
+      WebkitMaskImage: gradient,
+    }
+  }
+
+  const gradient = `linear-gradient(to bottom, black 0, black calc(100% - ${effectiveFadeSize}px), transparent 100%)`
+  return {
+    maskImage: gradient,
+    WebkitMaskImage: gradient,
+  }
+})
+
 const wrapperClasses = computed(() => ({
   'scroll-wrapper--vertical': direction.value === 'vertical',
   'scroll-wrapper--horizontal': direction.value === 'horizontal',
@@ -95,20 +117,17 @@ const containerClasses = computed(() => ({
   'scrollable-container--vertical': direction.value === 'vertical',
   'scrollable-container--horizontal': direction.value === 'horizontal',
 }))
-
-const cssVars = computed(() => ({
-  '--fadeOpacity': fadeOpacity.value,
-  '--fadeSize': `${fadeSize.value}px`,
-}))
 </script>
 
 <style scoped>
 .scroll-wrapper {
   position: relative;
+  overflow: hidden;
 }
 
 .scrollable-container--vertical {
   overflow-y: auto;
+  max-height: inherit;
 }
 
 .scrollable-container--horizontal {
@@ -125,32 +144,4 @@ const cssVars = computed(() => ({
   display: inline-flex;
   white-space: nowrap;
 }
-
-/* Vertical: bottom fade - on the non-scrolling wrapper */
-.scroll-wrapper--vertical::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: var(--fadeSize);
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(var(--v-theme-surface)));
-  pointer-events: none;
-  opacity: var(--fadeOpacity);
-  z-index: 1;
-}
-
-/* Horizontal: right fade - on the non-scrolling wrapper */
-.scroll-wrapper--horizontal::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  width: var(--fadeSize);
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--v-theme-surface)));
-  pointer-events: none;
-  opacity: var(--fadeOpacity);
-  z-index: 1;
-}
 </style>

frontend/src/components/GSeedStatusTags.vue

@@ -92,8 +92,8 @@ const seedConditions = useSeedConditions(seedItem)
 
 const { conditions, errorCodeObjects } = useStatusConditions(seedConditions)
 
-const EDGE_THRESHOLD = 24
-const SCROLL_STEP = 8
+const EDGE_THRESHOLD = 12
+const SCROLL_STEP = 2
 
 const containerRef = ref(null)
 const hovered = ref(false)

frontend/src/components/GStatusTags.vue

@@ -89,8 +89,8 @@ const isStaleShoot = computed(() => {
   return !shootStore.isShootActive(shootUid.value)
 })
 
-const EDGE_THRESHOLD = 24
-const SCROLL_STEP = 8
+const EDGE_THRESHOLD = 12
+const SCROLL_STEP = 2
 
 const containerRef = ref(null)
 const hovered = ref(false)