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/__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/GScrollContainer.vue b/frontend/src/components/GScrollContainer.vue
index 1ad9edcb3f..f73fef702e 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"
   >
-    <slot />
+    <div
+      ref="scrollRef"
+      class="scrollable-container"
+      :class="containerClasses"
+      :style="maskStyle"
+    >
+      <div
+        ref="contentRef"
+        class="scrollable-content"
+      >
+        <slot />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -18,49 +29,119 @@ 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) {
+  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
+  }
+
+  const remainingY = contentHeight.value - (y.value + height.value)
+  if (remainingY <= 0) {
+    return 0
+  }
+  if (remainingY >= fadeSize.value) {
     return 1
   }
+  return remainingY / fadeSize.value
+})
+
+const maskStyle = computed(() => {
+  if (fadeOpacity.value <= 0) {
+    return {}
+  }
 
-  return remainingY / fadeHeight
+  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',
+}))
+
+const containerClasses = computed(() => ({
+  'scrollable-container--vertical': direction.value === 'vertical',
+  'scrollable-container--horizontal': direction.value === 'horizontal',
+}))
 </script>
 
 <style scoped>
-.scrollable-container {
+.scroll-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.scrollable-container--vertical {
   overflow-y: auto;
+  max-height: inherit;
 }
 
-.scrollable-container::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: var(--fadeHeight);
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(var(--v-theme-surface)));
-  pointer-events: none;
-  opacity: var(--fadeOpacity);
+.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;
+}
 </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..62480e71f1 100644
--- a/frontend/src/components/GSeedStatusTags.vue
+++ b/frontend/src/components/GSeedStatusTags.vue
@@ -5,7 +5,13 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div class="d-flex flex-nowrap justify-start">
+  <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"
       :key="condition.type"
@@ -14,6 +20,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 +45,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 +91,107 @@ const {
 const seedConditions = useSeedConditions(seedItem)
 
 const { conditions, errorCodeObjects } = useStatusConditions(seedConditions)
+
+const EDGE_THRESHOLD = 12
+const SCROLL_STEP = 2
+
+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)
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(collapseTimer)
+  stopAutoScroll()
+})
 </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..eaa035c675 100644
--- a/frontend/src/components/GStatusTags.vue
+++ b/frontend/src/components/GStatusTags.vue
@@ -5,7 +5,13 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div class="d-flex flex-nowrap justify-start">
+  <div
+    ref="containerRef"
+    class="d-flex flex-nowrap justify-start"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @mousemove="onMouseMove"
+  >
     <g-status-tag
       v-for="condition in conditions"
       :key="condition.type"
@@ -14,6 +20,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 +47,8 @@ SPDX-License-Identifier: Apache-2.0
 <script setup>
 import {
   computed,
+  ref,
+  onBeforeUnmount,
   toRefs,
 } from 'vue'
 
@@ -79,4 +88,107 @@ const { conditions, errorCodeObjects } = useStatusConditions(shootReadiness)
 const isStaleShoot = computed(() => {
   return !shootStore.isShootActive(shootUid.value)
 })
+
+const EDGE_THRESHOLD = 12
+const SCROLL_STEP = 2
+
+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)
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(collapseTimer)
+  stopAutoScroll()
+})
 </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',
   ],