diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js index 45479899bea..59e1ff7ba26 100644 --- a/pkg/webui/components/panel/index.js +++ b/pkg/webui/components/panel/index.js @@ -57,7 +57,7 @@ const Panel = ({ shortCutLinkTarget, shortCutLinkDisabled, }) => ( -
+
{title && (
@@ -84,7 +84,6 @@ const Panel = ({ )}
)} - {divider &&
} {children}
) diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index d8909ad79d1..154198d8c2c 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -26,10 +26,13 @@ &-header display: flex + flex-wrap: wrap justify-content: space-between - align-items: center - margin-bottom: $cs.m + align-items: flex-start gap: $cs.m + min-height: 2.5rem // Fix the header height to have a uniform look between panels. + margin-bottom: $cs.m + flex-shrink: 0 &-title font-weight: $fwv2.bold @@ -51,11 +54,11 @@ text-underline-offset: .4rem text-decoration-color: var(--c-text-brand-normal) - &-divider - border-bottom: 1px solid var(--c-border-neutral-light) - margin-top: $cs.l - margin-bottom: $cs.l - height: 0px + &.divider + .panel-header + padding-bottom: $cs.m + border-bottom: 1px solid var(--c-border-neutral-light) + margin-bottom: $cs.l .panel-header-icon font-size: $fs.xl @@ -65,8 +68,3 @@ border-radius: $br.l color: var(--c-bg-brand-normal) font-variation-settings: 'FILL' 1 - -@container panel (max-width: 485px) - .panel-header - flex-direction: column - align-items: flex-start diff --git a/pkg/webui/components/table/table/table.styl b/pkg/webui/components/table/table/table.styl index 8e0d15d0bce..75ab660a538 100644 --- a/pkg/webui/components/table/table/table.styl +++ b/pkg/webui/components/table/table/table.styl @@ -29,6 +29,10 @@ .section &-header + position: sticky + background: var(--c-bg-neutral-min) + z-index: $zi.slight + top: 0 display: table-header-group &-body diff --git a/pkg/webui/console/containers/documentation-dashboard-panel/index.js b/pkg/webui/console/containers/documentation-dashboard-panel/index.js index 188fd6114db..d0297387aee 100644 --- a/pkg/webui/console/containers/documentation-dashboard-panel/index.js +++ b/pkg/webui/console/containers/documentation-dashboard-panel/index.js @@ -59,15 +59,7 @@ DocsPanelLink.propTypes = { } const DocumentationDashboardPanel = () => ( - + { />
) : ( - `/notifications/inbox/${item.id}`} - paginated={false} - /> + + `/notifications/inbox/${item.id}`} + paginated={false} + /> + )} ) diff --git a/pkg/webui/console/containers/notifications-dashboard-panel/notifications-dashboard-panel.styl b/pkg/webui/console/containers/notifications-dashboard-panel/notifications-dashboard-panel.styl index 9980488b6fe..3c85cd3f343 100644 --- a/pkg/webui/console/containers/notifications-dashboard-panel/notifications-dashboard-panel.styl +++ b/pkg/webui/console/containers/notifications-dashboard-panel/notifications-dashboard-panel.styl @@ -14,7 +14,7 @@ .notification-panel height: 100% - min-height: 26rem + height: 31rem display: flex flex-direction: column @@ -42,3 +42,9 @@ .name-header padding-left: $cs.m + $cs.s + +.scroll-fader + overflow-y: auto + width: 100% + table-layout: fixed + scrollbar-width: none diff --git a/pkg/webui/console/containers/top-entities-dashboard-panel/index.js b/pkg/webui/console/containers/top-entities-dashboard-panel/index.js index 131e8110ca6..aa8c1400108 100644 --- a/pkg/webui/console/containers/top-entities-dashboard-panel/index.js +++ b/pkg/webui/console/containers/top-entities-dashboard-panel/index.js @@ -29,7 +29,7 @@ import TopDevicesList from './top-devices' import styles from './top-entities-panel.styl' const m = defineMessages({ - title: 'Your top entities', + title: 'Top entities', }) const TopEntitiesDashboardPanel = () => { diff --git a/pkg/webui/console/containers/top-entities-dashboard-panel/list.js b/pkg/webui/console/containers/top-entities-dashboard-panel/list.js index 573a81dc285..820f71602f6 100644 --- a/pkg/webui/console/containers/top-entities-dashboard-panel/list.js +++ b/pkg/webui/console/containers/top-entities-dashboard-panel/list.js @@ -44,7 +44,6 @@ const EntitiesList = ({ EntitiesItemComponent: EntitiesItemProp, entity, }) => { - const listRef = useRef() const itemsTotalCount = useSelector(state => itemsCountSelector(state, entity)) const EntitiesItemComponent = EntitiesItemProp ?? EntitiesItem @@ -82,13 +81,7 @@ const EntitiesList = ({ )}
) : ( - + {columns}{rows}