console: Include additional console redesign fixes

pkg/webui/components/link/link.styl

@@ -43,6 +43,7 @@
       &:visited
         color: var(--c-text-neutral-heavy)
 
+  // stylelint-disable declaration-no-important
   &:disabled
     cursor: not-allowed !important
     background: transparent

pkg/webui/components/map/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   MapContainer,
   Marker,
@@ -108,6 +108,7 @@ const MarkerRenderer = ({ marker }) => {
 
 const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => {
   const map = useMap()
+  const [userInteracted, setUserInteracted] = useState(false)
 
   useEffect(() => {
     const handleWheel = e => {
@@ -118,23 +119,36 @@ const Controller = ({ onClick, centerOnMarkers, markers, bounds }) => {
         const zoomLevel = map.getZoom() - delta // Calculate the new zoom level
 
         map.setZoom(zoomLevel)
+        setUserInteracted(true) // Mark user interaction
       }
     }
 
+    const handleUserInteracted = () => {
+      setUserInteracted(true) // Mark user interaction on zoom
+    }
+
+    // Ensure the map resizes correctly when the container changes size
+    map.invalidateSize()
+
     map.getContainer().addEventListener('wheel', handleWheel)
+    map.on('zoomend', handleUserInteracted)
+    map.on('moveend', handleUserInteracted)
 
     return () => {
       map.getContainer().removeEventListener('wheel', handleWheel)
+      map.off('zoomend', handleUserInteracted)
+      map.off('moveend', handleUserInteracted)
     }
   }, [map])
 
+  useEffect(() => {
+    if (centerOnMarkers && markers.length > 1 && !userInteracted) {
+      map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 })
+    }
+  }, [map, centerOnMarkers, markers, bounds, userInteracted])
+
   useMapEvent('click', onClick)
-  // Fix incomplete tile loading in some rare cases.
-  map.invalidateSize()
-  // Attach click handler.
-  if (centerOnMarkers && markers.length > 1) {
-    map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 })
-  }
+
   return markers.map(marker => (
     <MarkerRenderer
       key={`${marker.position.latitude}-${marker.position.longitude}`}

pkg/webui/components/scroll-fader/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useLayoutEffect, useRef } from 'react'
 import classnames from 'classnames'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
@@ -38,31 +38,32 @@ const ScrollFader = React.forwardRef(
       const scrollGradientBottom = container.querySelector(`.${style.scrollGradientBottom}`)
 
       if (scrollGradientTop) {
-        scrollGradientTop.style.display = 'block' // Ensure gradient is visible
         const opacity = scrollTop < fadeHeight ? scrollTop / fadeHeight : 1
         scrollGradientTop.style.opacity = opacity
       }
 
       if (scrollGradientBottom) {
-        scrollGradientBottom.style.display = 'block' // Ensure gradient is visible
         const scrollEnd = scrollable - fadeHeight
         const opacity = scrollTop < scrollEnd ? 1 : (scrollable - scrollTop) / fadeHeight
         scrollGradientBottom.style.opacity = opacity
       }
     }, [fadeHeight])
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       const container = internalRef.current
       if (!container) return
 
+      // Perform initial fader calculation
+      handleScroll()
+
+      // Observe mutations in the DOM to recalculate faders if content changes
       const mutationObserver = new MutationObserver(() => {
         handleScroll()
       })
 
       // Run the calculation whenever the children change.
       mutationObserver.observe(container, { attributes: false, childList: true, subtree: true })
 
-      handleScroll() // Call once on mount if needed
       container.addEventListener('scroll', handleScroll)
       window.addEventListener('resize', handleScroll)
 

pkg/webui/components/scroll-fader/scroll-fader.styl

@@ -20,7 +20,6 @@
   right: 0
   z-index: $zi.slight + 1
   opacity: 0
-  display: none   // Initially hidden
   pointer-events: none
 
 .scroll-gradient-top

pkg/webui/components/table/tabular.styl

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 .container
-  overflow: visible
+  overflow: auto
   scrollbar-width: none
 
 .pagination