From a7e0a604f45facbd0efad21cc574ff99209ea42b Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Thu, 26 Mar 2026 15:20:46 +0100
Subject: [PATCH 1/3] collapse tags (vibe coded)

---
 .../__tests__/components/GStatusTag.spec.js   |   4 +-
 frontend/src/components/GScrollContainer.vue  | 120 +++++++++++++++---
 frontend/src/components/GSeedStatusTag.vue    |  98 ++++++++++++--
 frontend/src/components/GSeedStatusTags.vue   |  31 ++++-
 frontend/src/components/GShootListRow.vue     |  18 ++-
 frontend/src/components/GStatusTag.vue        | 100 +++++++++++++--
 frontend/src/components/GStatusTags.vue       |  27 +++-
 frontend/src/plugins/vuetify.js               |   1 +
 8 files changed, 356 insertions(+), 43 deletions(-)

diff --git a/frontend/__tests__/components/GStatusTag.spec.js b/frontend/__tests__/components/GStatusTag.spec.js
index b2440311eb..713850ebc9 100644
--- a/frontend/__tests__/components/GStatusTag.spec.js
+++ b/frontend/__tests__/components/GStatusTag.spec.js
@@ -56,7 +56,7 @@ describe('components', () => {
       expect(vm.chipTooltip.title).toBe('foo-bar')
       expect(vm.chipIcon).toBe('')
       expect(vm.isError || vm.isUnknown || vm.isProgressing).toBe(false)
-      expect(vm.color).toBe('primary')
+      expect(vm.color).toBe('success')
       expect(vm.visible).toBe(true)
     })
 
@@ -89,7 +89,7 @@ describe('components', () => {
       const vm = wrapper.vm
       expect(vm.visible).toBe(false)
       expect(vm.isProgressing).toBe(true)
-      expect(vm.color).toBe('primary')
+      expect(vm.color).toBe('success')
       expect(vm.chipStatus).toBe('Progressing')
       expect(vm.chipIcon).toBe('')
     })
diff --git a/frontend/src/components/GScrollContainer.vue b/frontend/src/components/GScrollContainer.vue
index 1ad9edcb3f..94019a48db 100644
--- a/frontend/src/components/GScrollContainer.vue
+++ b/frontend/src/components/GScrollContainer.vue
@@ -6,11 +6,22 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <div
-    ref="scrollRef"
-    class="scrollable-container"
-    :style="{ '--fadeOpacity': fadeOpacity, '--fadeHeight': `${fadeHeight}px` }"
+    class="scroll-wrapper"
+    :class="wrapperClasses"
+    :style="cssVars"
   >
-    <slot />
+    <div
+      ref="scrollRef"
+      class="scrollable-container"
+      :class="containerClasses"
+    >
+      <div
+        ref="contentRef"
+        class="scrollable-content"
+      >
+        <slot />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -18,49 +29,128 @@ SPDX-License-Identifier: Apache-2.0
 import {
   ref,
   computed,
+  toRefs,
 } from 'vue'
 import {
   useScroll,
   useElementSize,
 } from '@vueuse/core'
 
+const props = defineProps({
+  direction: {
+    type: String,
+    default: 'vertical',
+    validator: value => ['vertical', 'horizontal'].includes(value),
+  },
+})
+
+const { direction } = toRefs(props)
+
 const scrollRef = ref(null)
-const { y } = useScroll(scrollRef)
-const { height } = useElementSize(scrollRef)
+const contentRef = ref(null)
+const { x, y } = useScroll(scrollRef)
+const { width, height } = useElementSize(scrollRef)
+const { width: contentWidth, height: contentHeight } = useElementSize(contentRef)
 
-const fadeHeight = Math.max(40, height.value / 2)
+const fadeSize = computed(() => {
+  if (direction.value === 'horizontal') {
+    return Math.max(20, width.value / 4)
+  }
+  return Math.max(40, height.value / 2)
+})
 
 const fadeOpacity = computed(() => {
   const el = scrollRef.value
   if (!el) {
-    return false
+    return 0
   }
 
-  const remainingY = el.scrollHeight - (y.value + height.value)
-  if (remainingY >= fadeHeight) {
-    return 1
+  if (direction.value === 'horizontal') {
+    const remainingX = contentWidth.value - (x.value + width.value)
+    if (remainingX <= 0) {
+      return 0
+    }
+    if (remainingX >= fadeSize.value) {
+      return 1
+    }
+    return remainingX / fadeSize.value
   }
 
-  return remainingY / fadeHeight
+  const remainingY = contentHeight.value - (y.value + height.value)
+  if (remainingY <= 0) {
+    return 0
+  }
+  if (remainingY >= fadeSize.value) {
+    return 1
+  }
+  return remainingY / fadeSize.value
 })
 
+const wrapperClasses = computed(() => ({
+  'scroll-wrapper--vertical': direction.value === 'vertical',
+  'scroll-wrapper--horizontal': direction.value === 'horizontal',
+}))
+
+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>
-.scrollable-container {
+.scroll-wrapper {
+  position: relative;
+}
+
+.scrollable-container--vertical {
   overflow-y: auto;
 }
 
-.scrollable-container::after {
+.scrollable-container--horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.scrollable-container--horizontal::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollable-container--horizontal > .scrollable-content {
+  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(--fadeHeight);
+  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>
diff --git a/frontend/src/components/GSeedStatusTag.vue b/frontend/src/components/GSeedStatusTag.vue
index 61a31f2821..4df4b911b0 100644
--- a/frontend/src/components/GSeedStatusTag.vue
+++ b/frontend/src/components/GSeedStatusTag.vue
@@ -5,7 +5,12 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div v-if="visible">
+  <div
+    v-if="visible"
+    class="status-tag-wrapper"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
     <g-popover
       v-model="internalValue"
       :placement="popperPlacement"
@@ -21,20 +26,23 @@ SPDX-License-Identifier: Apache-2.0
         <v-chip
           v-bind="props"
           ref="tagChipRef"
-          :class="{ 'cursor-pointer': condition.message }"
-          :variant="!isError ? 'tonal' : 'flat'"
+          :class="chipClasses"
+          :variant="chipVariant"
           :text-color="textColor"
           size="small"
           :color="color"
           class="status-tag"
         >
           <v-icon
-            v-if="chipIcon"
+            v-if="chipIcon && !isCollapsed"
             :icon="chipIcon"
             size="x-small"
             class="chip-icon"
           />
-          {{ chipText }}
+          <span
+            v-if="!isCollapsed"
+            class="chip-label"
+          >{{ chipText }}</span>
           <v-tooltip
             :activator="$refs.tagChipRef"
             location="top"
@@ -101,11 +109,33 @@ export default {
       type: String,
       required: true,
     },
+    containerHovered: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+      selfExpanded: false,
+      expandTimer: null,
+    }
   },
   computed: {
     ...mapState(useAuthnStore, [
       'isAdmin',
     ]),
+    isHealthy () {
+      return !this.isError && !this.isUnknown && !this.isProgressing
+    },
+    isCollapsed () {
+      return !this.isError && !this.selfExpanded && !this.internalValue
+    },
+    chipClasses () {
+      return {
+        'cursor-pointer': this.condition.message,
+        'status-tag--collapsed': this.isCollapsed,
+      }
+    },
     popoverKey () {
       return `g-seed-status-tag[${this.condition.type}]:${this.identifier}`
     },
@@ -204,13 +234,19 @@ export default {
       if (this.isProgressing && this.isAdmin) {
         return 'info'
       }
-      return 'primary'
+      return 'success'
     },
-    textColor () {
+    chipVariant () {
       if (this.isError) {
-        return 'white'
+        return 'flat'
+      }
+      return 'tonal'
+    },
+    textColor () {
+      if (this.isUnknown) {
+        return this.color
       }
-      return this.color
+      return 'white'
     },
     visible () {
       if (!this.isAdmin) {
@@ -219,12 +255,41 @@ export default {
       return true
     },
   },
+  watch: {
+    containerHovered (val) {
+      if (!val) {
+        clearTimeout(this.expandTimer)
+        this.selfExpanded = false
+      }
+    },
+  },
+  beforeUnmount () {
+    clearTimeout(this.expandTimer)
+  },
+  methods: {
+    onMouseEnter () {
+      clearTimeout(this.expandTimer)
+      this.expandTimer = setTimeout(() => {
+        this.selfExpanded = true
+      }, 100)
+    },
+    onMouseLeave () {
+      clearTimeout(this.expandTimer)
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
+  .status-tag-wrapper {
+    display: inline-flex;
+    align-items: center;
+  }
+
   .status-tag {
     margin: 0 1px;
+    transition: max-width 0.3s ease, padding 0.3s ease;
+    overflow: hidden;
 
     &.cursor-pointer :deep(.v-chip__content) {
       cursor: pointer;
@@ -232,11 +297,26 @@ export default {
 
     :deep(.v-chip__content) {
       margin: -2px;
+      white-space: nowrap;
     }
 
     .chip-icon {
       margin-left: -4px;
       margin-right: 1px;
     }
+
+    &.status-tag--collapsed {
+      max-width: 8px;
+      min-width: 8px;
+      padding: 0;
+      border-radius: 4px;
+      justify-content: center;
+
+      :deep(.v-chip__content) {
+        margin: 0;
+        padding: 0;
+      }
+    }
+
   }
 </style>
diff --git a/frontend/src/components/GSeedStatusTags.vue b/frontend/src/components/GSeedStatusTags.vue
index eade757b2c..e8bfb3524f 100644
--- a/frontend/src/components/GSeedStatusTags.vue
+++ b/frontend/src/components/GSeedStatusTags.vue
@@ -5,7 +5,11 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div class="d-flex flex-nowrap justify-start">
+  <div
+    class="d-flex flex-nowrap justify-start"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
     <g-seed-status-tag
       v-for="condition in conditions"
       :key="condition.type"
@@ -14,6 +18,7 @@ SPDX-License-Identifier: Apache-2.0
       :popper-placement="popperPlacement"
       :identifier="identifier"
       :stale-shoot="isStaleShoot"
+      :container-hovered="hovered"
     />
   </div>
   <template v-if="showStatusText">
@@ -38,7 +43,11 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script setup>
-import { toRefs } from 'vue'
+import {
+  ref,
+  onBeforeUnmount,
+  toRefs,
+} from 'vue'
 
 import GSeedStatusTag from '@/components/GSeedStatusTag.vue'
 import GExternalLink from '@/components/GExternalLink.vue'
@@ -80,4 +89,22 @@ const {
 const seedConditions = useSeedConditions(seedItem)
 
 const { conditions, errorCodeObjects } = useStatusConditions(seedConditions)
+
+const hovered = ref(false)
+let collapseTimer = null
+
+function onMouseEnter () {
+  clearTimeout(collapseTimer)
+  hovered.value = true
+}
+
+function onMouseLeave () {
+  collapseTimer = setTimeout(() => {
+    hovered.value = false
+  }, 1500)
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(collapseTimer)
+})
 </script>
diff --git a/frontend/src/components/GShootListRow.vue b/frontend/src/components/GShootListRow.vue
index 3b4d1c1d43..2f8625a5e8 100644
--- a/frontend/src/components/GShootListRow.vue
+++ b/frontend/src/components/GShootListRow.vue
@@ -110,17 +110,23 @@ SPDX-License-Identifier: Apache-2.0
         </div>
       </template>
       <template v-if="cell.header.key === 'readiness'">
-        <div class="d-flex">
+        <g-scroll-container
+          direction="horizontal"
+          class="readiness-container"
+        >
           <g-status-tags />
-        </div>
+        </g-scroll-container>
       </template>
       <template v-if="cell.header.key === 'seedReadiness'">
-        <div class="d-flex">
+        <g-scroll-container
+          direction="horizontal"
+          class="readiness-container"
+        >
           <g-seed-status-tags
             :identifier="shootUid"
             :is-stale-shoot="isStaleShoot"
           />
-        </div>
+        </g-scroll-container>
       </template>
       <template v-if="cell.header.key === 'controlPlaneHighAvailability'">
         <div class="d-flex justify-center">
@@ -451,6 +457,10 @@ const hasShootWorkerGroupWarning = computed(() => {
     max-width: 350px;
   }
 
+  .readiness-container {
+    max-width: 120px;
+  }
+
   .small-container {
     max-height: 37px;
     max-width: 350px;
diff --git a/frontend/src/components/GStatusTag.vue b/frontend/src/components/GStatusTag.vue
index c60a355ded..1634c94de9 100644
--- a/frontend/src/components/GStatusTag.vue
+++ b/frontend/src/components/GStatusTag.vue
@@ -5,7 +5,12 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div v-if="visible">
+  <div
+    v-if="visible"
+    class="status-tag-wrapper"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
     <g-popover
       v-model="internalValue"
       :placement="popperPlacement"
@@ -17,20 +22,23 @@ SPDX-License-Identifier: Apache-2.0
         <v-chip
           v-bind="props"
           ref="tagChipRef"
-          :class="{ 'cursor-pointer': condition.message }"
-          :variant="!isError ? 'tonal' : 'flat'"
+          :class="chipClasses"
+          :variant="chipVariant"
           :text-color="textColor"
           size="small"
           :color="color"
           class="status-tag"
         >
           <v-icon
-            v-if="chipIcon"
+            v-if="chipIcon && !isCollapsed"
             :icon="chipIcon"
             size="x-small"
             class="chip-icon"
           />
-          {{ chipText }}
+          <span
+            v-if="!isCollapsed"
+            class="chip-label"
+          >{{ chipText }}</span>
           <v-tooltip
             :activator="$refs.tagChipRef"
             location="top"
@@ -117,11 +125,33 @@ export default {
         return { uid: '' }
       },
     },
+    containerHovered: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+      selfExpanded: false,
+      expandTimer: null,
+    }
   },
   computed: {
     ...mapState(useAuthnStore, [
       'isAdmin',
     ]),
+    isHealthy () {
+      return !this.isError && !this.isUnknown && !this.isProgressing
+    },
+    isCollapsed () {
+      return !this.isError && !this.selfExpanded && !this.internalValue
+    },
+    chipClasses () {
+      return {
+        'cursor-pointer': this.condition.message,
+        'status-tag--collapsed': this.isCollapsed,
+      }
+    },
     popoverKey () {
       return `g-status-tag[${this.condition.type}]:${this.shootMetadata.uid}`
     },
@@ -219,7 +249,7 @@ export default {
     },
     color () {
       if (this.isUnknown || this.staleShoot) {
-        return 'unknown'
+        return 'unknown-lighten-3'
       }
       if (this.isError) {
         return 'error'
@@ -227,13 +257,19 @@ export default {
       if (this.isProgressing && this.isAdmin) {
         return 'info'
       }
-      return 'primary'
+      return 'success'
     },
-    textColor () {
+    chipVariant () {
       if (this.isError) {
-        return 'white'
+        return 'flat'
+      }
+      return 'tonal'
+    },
+    textColor () {
+      if (this.isUnknown) {
+        return this.color
       }
-      return this.color
+      return 'white'
     },
     visible () {
       if (!this.isAdmin) {
@@ -242,12 +278,41 @@ export default {
       return true
     },
   },
+  watch: {
+    containerHovered (val) {
+      if (!val) {
+        clearTimeout(this.expandTimer)
+        this.selfExpanded = false
+      }
+    },
+  },
+  beforeUnmount () {
+    clearTimeout(this.expandTimer)
+  },
+  methods: {
+    onMouseEnter () {
+      clearTimeout(this.expandTimer)
+      this.expandTimer = setTimeout(() => {
+        this.selfExpanded = true
+      }, 100)
+    },
+    onMouseLeave () {
+      clearTimeout(this.expandTimer)
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
+  .status-tag-wrapper {
+    display: inline-flex;
+    align-items: center;
+  }
+
   .status-tag {
     margin: 0 1px;
+    transition: max-width 0.3s ease, padding 0.3s ease;
+    overflow: hidden;
 
     &.cursor-pointer :deep(.v-chip__content) {
       cursor: pointer;
@@ -255,11 +320,26 @@ export default {
 
     :deep(.v-chip__content) {
       margin: -2px;
+      white-space: nowrap;
     }
 
     .chip-icon {
       margin-left: -4px;
       margin-right: 1px;
     }
+
+    &.status-tag--collapsed {
+      max-width: 8px;
+      min-width: 8px;
+      padding: 0;
+      border-radius: 4px;
+      justify-content: center;
+
+      :deep(.v-chip__content) {
+        margin: 0;
+        padding: 0;
+      }
+    }
+
   }
 </style>
diff --git a/frontend/src/components/GStatusTags.vue b/frontend/src/components/GStatusTags.vue
index c3aadf9640..aeddf7b365 100644
--- a/frontend/src/components/GStatusTags.vue
+++ b/frontend/src/components/GStatusTags.vue
@@ -5,7 +5,11 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div class="d-flex flex-nowrap justify-start">
+  <div
+    class="d-flex flex-nowrap justify-start"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
     <g-status-tag
       v-for="condition in conditions"
       :key="condition.type"
@@ -14,6 +18,7 @@ SPDX-License-Identifier: Apache-2.0
       :shoot-binding="shootCloudProviderBinding"
       :shoot-metadata="shootMetadata"
       :stale-shoot="isStaleShoot"
+      :container-hovered="hovered"
     />
   </div>
   <template v-if="showStatusText">
@@ -40,6 +45,8 @@ SPDX-License-Identifier: Apache-2.0
 <script setup>
 import {
   computed,
+  ref,
+  onBeforeUnmount,
   toRefs,
 } from 'vue'
 
@@ -79,4 +86,22 @@ const { conditions, errorCodeObjects } = useStatusConditions(shootReadiness)
 const isStaleShoot = computed(() => {
   return !shootStore.isShootActive(shootUid.value)
 })
+
+const hovered = ref(false)
+let collapseTimer = null
+
+function onMouseEnter () {
+  clearTimeout(collapseTimer)
+  hovered.value = true
+}
+
+function onMouseLeave () {
+  collapseTimer = setTimeout(() => {
+    hovered.value = false
+  }, 1500)
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(collapseTimer)
+})
 </script>
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index 509a90a8c6..9f51356d39 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -73,6 +73,7 @@ const variations = {
     'info',
     'success',
     'warning',
+    'unknown',
     'main-background',
     'toolbar-background',
   ],

From 0bea811ac877ce56c1342b9195ec8382010143d0 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Tue, 31 Mar 2026 13:10:49 +0200
Subject: [PATCH 2/3] auto scroll container

---
 .../__tests__/components/GStatusTags.spec.js  | 72 +++++++++++++++
 frontend/src/components/GSeedStatusTags.vue   | 87 +++++++++++++++++++
 frontend/src/components/GStatusTags.vue       | 87 +++++++++++++++++++
 3 files changed, 246 insertions(+)

diff --git a/frontend/__tests__/components/GStatusTags.spec.js b/frontend/__tests__/components/GStatusTags.spec.js
index 7f6f5fba05..440cff59b8 100644
--- a/frontend/__tests__/components/GStatusTags.spec.js
+++ b/frontend/__tests__/components/GStatusTags.spec.js
@@ -17,6 +17,9 @@ import { createShootItemComposable } from '@/composables/useShootItem'
 
 const { createVuetifyPlugin } = global.fixtures.helper
 
+const originalRequestAnimationFrame = window.requestAnimationFrame
+const originalCancelAnimationFrame = window.cancelAnimationFrame
+
 describe('components', () => {
   describe('g-status-tags', () => {
     const lastTransitionTime = 'last-transition-time'
@@ -51,6 +54,12 @@ describe('components', () => {
     }
 
     beforeEach(() => {
+      window.requestAnimationFrame = callback => {
+        callback()
+        return 1
+      }
+      window.cancelAnimationFrame = () => {}
+
       pinia = createTestingPinia({ stubActions: false })
       const authnStore = useAuthnStore(pinia) // eslint-disable-line no-unused-vars
       const configStore = useConfigStore(pinia)
@@ -75,6 +84,11 @@ describe('components', () => {
       }
     })
 
+    afterEach(() => {
+      window.requestAnimationFrame = originalRequestAnimationFrame
+      window.cancelAnimationFrame = originalCancelAnimationFrame
+    })
+
     it('should generate condition object for simple condition type', () => {
       const type = 'SampleConditionAvailability'
       const wrapper = mountStatusTags([type])
@@ -166,5 +180,63 @@ describe('components', () => {
       const shortNames = wrapper.vm.conditions.map(condition => condition.shortName)
       expect(shortNames).toEqual(['IC', 'C', 'D', 'CPO'])
     })
+
+    it('should auto scroll right when hovering near the right edge', async () => {
+      const wrapper = mountStatusTags(['APIServerAvailable'])
+      const scrollContainer = document.createElement('div')
+      Object.defineProperties(scrollContainer, {
+        scrollLeft: {
+          value: 0,
+          writable: true,
+        },
+        scrollWidth: {
+          value: 200,
+        },
+        clientWidth: {
+          value: 100,
+        },
+      })
+      scrollContainer.getBoundingClientRect = () => ({
+        left: 0,
+        right: 100,
+      })
+
+      wrapper.vm.containerRef = wrapper.element
+      wrapper.vm.containerRef.closest = vi.fn().mockReturnValue(scrollContainer)
+
+      wrapper.vm.onMouseMove({ clientX: 95 })
+      await wrapper.vm.$nextTick()
+
+      expect(scrollContainer.scrollLeft).toBeGreaterThan(0)
+    })
+
+    it('should stop auto scroll when cursor moves away from the edge', async () => {
+      const wrapper = mountStatusTags(['APIServerAvailable'])
+      const scrollContainer = document.createElement('div')
+      Object.defineProperties(scrollContainer, {
+        scrollLeft: {
+          value: 10,
+          writable: true,
+        },
+        scrollWidth: {
+          value: 200,
+        },
+        clientWidth: {
+          value: 100,
+        },
+      })
+      scrollContainer.getBoundingClientRect = () => ({
+        left: 0,
+        right: 100,
+      })
+
+      wrapper.vm.containerRef = wrapper.element
+      wrapper.vm.containerRef.closest = vi.fn().mockReturnValue(scrollContainer)
+
+      wrapper.vm.onMouseMove({ clientX: 50 })
+      await wrapper.vm.$nextTick()
+
+      expect(scrollContainer.scrollLeft).toBe(10)
+    })
   })
 })
diff --git a/frontend/src/components/GSeedStatusTags.vue b/frontend/src/components/GSeedStatusTags.vue
index e8bfb3524f..84cb00096e 100644
--- a/frontend/src/components/GSeedStatusTags.vue
+++ b/frontend/src/components/GSeedStatusTags.vue
@@ -6,9 +6,11 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <div
+    ref="containerRef"
     class="d-flex flex-nowrap justify-start"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
+    @mousemove="onMouseMove"
   >
     <g-seed-status-tag
       v-for="condition in conditions"
@@ -90,15 +92,99 @@ const seedConditions = useSeedConditions(seedItem)
 
 const { conditions, errorCodeObjects } = useStatusConditions(seedConditions)
 
+const EDGE_THRESHOLD = 24
+const SCROLL_STEP = 8
+
+const containerRef = ref(null)
 const hovered = ref(false)
 let collapseTimer = null
+let animationFrameId = null
+let scrollDirection = 0
+
+function getScrollContainer () {
+  return containerRef.value?.closest('.scrollable-container--horizontal') ?? null
+}
+
+function stopAutoScroll () {
+  scrollDirection = 0
+  if (animationFrameId) {
+    window.cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
+  }
+}
+
+function autoScroll () {
+  const scrollContainer = getScrollContainer()
+  if (!scrollContainer || !scrollDirection) {
+    stopAutoScroll()
+    return
+  }
+
+  const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth
+  if (maxScrollLeft <= 0) {
+    stopAutoScroll()
+    return
+  }
+
+  const nextScrollLeft = Math.min(
+    maxScrollLeft,
+    Math.max(0, scrollContainer.scrollLeft + (scrollDirection * SCROLL_STEP)),
+  )
+
+  if (nextScrollLeft === scrollContainer.scrollLeft) {
+    stopAutoScroll()
+    return
+  }
+
+  scrollContainer.scrollLeft = nextScrollLeft
+  animationFrameId = window.requestAnimationFrame(autoScroll)
+}
+
+function startAutoScroll (direction) {
+  if (!direction) {
+    stopAutoScroll()
+    return
+  }
+  if (scrollDirection === direction && animationFrameId) {
+    return
+  }
+
+  stopAutoScroll()
+  scrollDirection = direction
+  animationFrameId = window.requestAnimationFrame(autoScroll)
+}
 
 function onMouseEnter () {
   clearTimeout(collapseTimer)
   hovered.value = true
 }
 
+function onMouseMove (event) {
+  const scrollContainer = getScrollContainer()
+  if (!scrollContainer) {
+    return
+  }
+
+  const { left, right } = scrollContainer.getBoundingClientRect()
+  const isNearLeftEdge = event.clientX - left <= EDGE_THRESHOLD
+  const isNearRightEdge = right - event.clientX <= EDGE_THRESHOLD
+
+  if (isNearLeftEdge && scrollContainer.scrollLeft > 0) {
+    startAutoScroll(-1)
+    return
+  }
+
+  const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth
+  if (isNearRightEdge && scrollContainer.scrollLeft < maxScrollLeft) {
+    startAutoScroll(1)
+    return
+  }
+
+  stopAutoScroll()
+}
+
 function onMouseLeave () {
+  stopAutoScroll()
   collapseTimer = setTimeout(() => {
     hovered.value = false
   }, 1500)
@@ -106,5 +192,6 @@ function onMouseLeave () {
 
 onBeforeUnmount(() => {
   clearTimeout(collapseTimer)
+  stopAutoScroll()
 })
 </script>
diff --git a/frontend/src/components/GStatusTags.vue b/frontend/src/components/GStatusTags.vue
index aeddf7b365..ba9ea743be 100644
--- a/frontend/src/components/GStatusTags.vue
+++ b/frontend/src/components/GStatusTags.vue
@@ -6,9 +6,11 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <div
+    ref="containerRef"
     class="d-flex flex-nowrap justify-start"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
+    @mousemove="onMouseMove"
   >
     <g-status-tag
       v-for="condition in conditions"
@@ -87,15 +89,99 @@ const isStaleShoot = computed(() => {
   return !shootStore.isShootActive(shootUid.value)
 })
 
+const EDGE_THRESHOLD = 24
+const SCROLL_STEP = 8
+
+const containerRef = ref(null)
 const hovered = ref(false)
 let collapseTimer = null
+let animationFrameId = null
+let scrollDirection = 0
+
+function getScrollContainer () {
+  return containerRef.value?.closest('.scrollable-container--horizontal') ?? null
+}
+
+function stopAutoScroll () {
+  scrollDirection = 0
+  if (animationFrameId) {
+    window.cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
+  }
+}
+
+function autoScroll () {
+  const scrollContainer = getScrollContainer()
+  if (!scrollContainer || !scrollDirection) {
+    stopAutoScroll()
+    return
+  }
+
+  const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth
+  if (maxScrollLeft <= 0) {
+    stopAutoScroll()
+    return
+  }
+
+  const nextScrollLeft = Math.min(
+    maxScrollLeft,
+    Math.max(0, scrollContainer.scrollLeft + (scrollDirection * SCROLL_STEP)),
+  )
+
+  if (nextScrollLeft === scrollContainer.scrollLeft) {
+    stopAutoScroll()
+    return
+  }
+
+  scrollContainer.scrollLeft = nextScrollLeft
+  animationFrameId = window.requestAnimationFrame(autoScroll)
+}
+
+function startAutoScroll (direction) {
+  if (!direction) {
+    stopAutoScroll()
+    return
+  }
+  if (scrollDirection === direction && animationFrameId) {
+    return
+  }
+
+  stopAutoScroll()
+  scrollDirection = direction
+  animationFrameId = window.requestAnimationFrame(autoScroll)
+}
 
 function onMouseEnter () {
   clearTimeout(collapseTimer)
   hovered.value = true
 }
 
+function onMouseMove (event) {
+  const scrollContainer = getScrollContainer()
+  if (!scrollContainer) {
+    return
+  }
+
+  const { left, right } = scrollContainer.getBoundingClientRect()
+  const isNearLeftEdge = event.clientX - left <= EDGE_THRESHOLD
+  const isNearRightEdge = right - event.clientX <= EDGE_THRESHOLD
+
+  if (isNearLeftEdge && scrollContainer.scrollLeft > 0) {
+    startAutoScroll(-1)
+    return
+  }
+
+  const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth
+  if (isNearRightEdge && scrollContainer.scrollLeft < maxScrollLeft) {
+    startAutoScroll(1)
+    return
+  }
+
+  stopAutoScroll()
+}
+
 function onMouseLeave () {
+  stopAutoScroll()
   collapseTimer = setTimeout(() => {
     hovered.value = false
   }, 1500)
@@ -103,5 +189,6 @@ function onMouseLeave () {
 
 onBeforeUnmount(() => {
   clearTimeout(collapseTimer)
+  stopAutoScroll()
 })
 </script>

From 4ff9d4135402dcdac924143807741e2098e22c28 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Wed, 1 Apr 2026 20:05:27 +0200
Subject: [PATCH 3/3] Further Improvements

---
 frontend/src/components/GScrollContainer.vue | 59 +++++++++-----------
 frontend/src/components/GSeedStatusTags.vue  |  4 +-
 frontend/src/components/GStatusTags.vue      |  4 +-
 3 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/GScrollContainer.vue b/frontend/src/components/GScrollContainer.vue
index 94019a48db..f73fef702e 100644
--- a/frontend/src/components/GScrollContainer.vue
+++ b/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>
diff --git a/frontend/src/components/GSeedStatusTags.vue b/frontend/src/components/GSeedStatusTags.vue
index 84cb00096e..62480e71f1 100644
--- a/frontend/src/components/GSeedStatusTags.vue
+++ b/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)
diff --git a/frontend/src/components/GStatusTags.vue b/frontend/src/components/GStatusTags.vue
index ba9ea743be..eaa035c675 100644
--- a/frontend/src/components/GStatusTags.vue
+++ b/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)