Merge pull request #7322 from TheThingsNetwork/fix/console-redesign-i…

…ssues

Fix console redesign issues

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 [useManualZoom, setUseManualZoom] = 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)
+        setUseManualZoom(true) // Mark user interaction
       }
     }
 
+    const handleUserInteracted = () => {
+      setUseManualZoom(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 && !useManualZoom) {
+      map.fitBounds(bounds, { padding: [50, 50], maxZoom: 14 })
+    }
+  }, [map, centerOnMarkers, markers, bounds, useManualZoom])
+
   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'
@@ -49,18 +49,21 @@ const ScrollFader = React.forwardRef(
       }
     }, [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/table/tabular.styl

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

pkg/webui/console/containers/sidebar/sidebar.styl

@@ -24,9 +24,10 @@
   left: 0
   height: 100vh
   sidebar-transition(left)
-  // Stylus has trouble adding multiple properties to a function
-  // so we have to overwrite it like this.
-  transition-property: left, width
+  +media-query-min($bp.xl)
+    // Stylus has trouble adding multiple properties to a function
+    // so we have to overwrite it like this.
+    transition-property: left, width
   +media-query($bp.xxl)
     --sidebar-width: 22rem
   +media-query($bp.lg-xl)
@@ -60,18 +61,19 @@
     z-index: $zi.mobile-menu - 1
     cursor: pointer
 
-  &-minimized
-    position: absolute
-    top: 3.8rem
-    left: calc(-1 * var(--sidebar-width))
-    bottom: 0
-    height: calc(100vh - 3.8rem)
-    z-index: $zi.mobile-menu
+  +media-query-min($bp.lg-xl)
+    &-minimized
+      position: absolute
+      top: 3.8rem
+      left: calc(-1 * var(--sidebar-width))
+      bottom: 0
+      height: calc(100vh - 3.8rem)
+      z-index: $zi.mobile-menu
 
-  &-open&.sidebar-minimized
-    left: 0
-    box-shadow: 0 0 2rem 0 rgba(0,0,0,.05)
+    &-open&.sidebar-minimized
+      left: 0
+      box-shadow: 0 0 2rem 0 rgba(0,0,0,.05)
 
-    & + .sidebar-backdrop
-      opacity: .05
-      visibility: visible
+      & + .sidebar-backdrop
+        opacity: .05
+        visibility: visible