console,account: Fix various responsiveness issues in the overview

TheThingsNetwork · Jun 11, 2024 · 4805445 · 4805445
1 parent 13c7164
commit 4805445
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 42 deletions.
diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js
@@ -57,7 +57,7 @@ const Panel = ({
   shortCutLinkTarget,
   shortCutLinkDisabled,
 }) => (
-  <div className={classnames(styles.panel, className)}>
+  <div className={classnames(styles.panel, className, { [styles.divider]: divider })}>
     {title && (
       <div className={styles.panelHeader}>
         <div className="d-flex gap-cs-xs al-center">
@@ -84,7 +84,6 @@ const Panel = ({
         )}
       </div>
     )}
-    {divider && <hr className={styles.panelDivider} />}
     {children}
   </div>
 )

diff --git 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
@@ -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
@@ -59,15 +59,7 @@ DocsPanelLink.propTypes = {
 }
 
 const DocumentationDashboardPanel = () => (
-  <Panel
-    title={sharedMessages.documentation}
-    icon={IconBook}
-    shortCutLinkPath={docBaseUrl}
-    shortCutLinkTitle={sharedMessages.showMore}
-    shortCutLinkTarget="_blank"
-    divider
-    className="h-full"
-  >
+  <Panel title={sharedMessages.documentation} icon={IconBook} divider className="h-full">
     <DocsPanelLink
       path={`${docBaseUrl}/getting-started/`}
       title={m.gettingStarted}

diff --git a/pkg/webui/console/containers/notifications-dashboard-panel/index.js b/pkg/webui/console/containers/notifications-dashboard-panel/index.js
@@ -20,6 +20,7 @@ import { defineMessages } from 'react-intl'
 import { IconInbox } from '@ttn-lw/components/icon'
 import Panel from '@ttn-lw/components/panel'
 import Status from '@ttn-lw/components/status'
+import ScrollFader from '@ttn-lw/components/scroll-fader'
 
 import FetchTable from '@ttn-lw/containers/fetch-table'
 
@@ -123,15 +124,17 @@ const NotificationsDashboardPanel = () => {
           />
         </div>
       ) : (
-        <FetchTable
-          entity="notifications"
-          headers={headers}
-          pageSize={5}
-          baseDataSelector={baseDataSelectors}
-          getItemsAction={getItems}
-          getItemPathPrefix={item => `/notifications/inbox/${item.id}`}
-          paginated={false}
-        />
+        <ScrollFader className={style.scrollFader} faderHeight="4rem" topFaderOffset="3rem" light>
+          <FetchTable
+            entity="notifications"
+            headers={headers}
+            pageSize={5}
+            baseDataSelector={baseDataSelectors}
+            getItemsAction={getItems}
+            getItemPathPrefix={item => `/notifications/inbox/${item.id}`}
+            paginated={false}
+          />
+        </ScrollFader>
       )}
     </Panel>
   )

diff --git a/...webui/console/containers/notifications-dashboard-panel/notifications-dashboard-panel.styl b/...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
@@ -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
@@ -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 = ({
       )}
     </div>
   ) : (
-    <ScrollFader
-      className={styles.scrollFader}
-      ref={listRef}
-      faderHeight="4rem"
-      topFaderOffset="3rem"
-      light
-    >
+    <ScrollFader className={styles.scrollFader} faderHeight="4rem" topFaderOffset="3rem" light>
       <Table>
         <Table.Head className={styles.topEntitiesPanelOuterTableHeader}>{columns}</Table.Head>
         <Table.Body emptyMessage={m.empty}>{rows}</Table.Body>