From db61e15cd94a3fe07ba6277cdbbddbf05dea0cb1 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Wed, 9 Mar 2022 21:46:32 +0800
Subject: [PATCH] fix(console): page layout issues

---
 .gitignore                                    |  1 +
 packages/console/src/App.module.scss          |  1 +
 .../src/components/Card/index.module.scss     |  1 -
 .../console/src/components/TabNav/index.tsx   |  6 ++++-
 .../src/components/Topbar/index.module.scss   |  4 ++--
 .../src/pages/ApiResources/index.module.scss  | 16 ++++++++-----
 .../console/src/pages/ApiResources/index.tsx  |  8 +++----
 .../src/pages/Applications/index.module.scss  | 16 ++++++++-----
 .../console/src/pages/Applications/index.tsx  |  6 ++---
 .../Connectors/components/ConnectorRow.tsx    |  3 ++-
 .../src/pages/Connectors/index.module.scss    | 21 +++++++++++------
 .../console/src/pages/Connectors/index.tsx    |  8 +++----
 packages/console/src/scss/normalized.scss     | 23 +++++++++++++++++--
 13 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/.gitignore b/.gitignore
index b52563268..3fc0a61b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,4 @@ cache
 *.env
 .idea/
 *.pem
+.history
diff --git a/packages/console/src/App.module.scss b/packages/console/src/App.module.scss
index 864906939..5b7c6a57f 100644
--- a/packages/console/src/App.module.scss
+++ b/packages/console/src/App.module.scss
@@ -5,4 +5,5 @@
   display: flex;
   padding-right: _.unit(5);
   margin-bottom: _.unit(6);
+  overflow: hidden;
 }
diff --git a/packages/console/src/components/Card/index.module.scss b/packages/console/src/components/Card/index.module.scss
index 4b86f7732..f930dbf67 100644
--- a/packages/console/src/components/Card/index.module.scss
+++ b/packages/console/src/components/Card/index.module.scss
@@ -3,6 +3,5 @@
 .card {
   background: var(--color-card-background);
   border-radius: _.unit(4);
-  padding: _.unit(6);
   height: 100%;
 }
diff --git a/packages/console/src/components/TabNav/index.tsx b/packages/console/src/components/TabNav/index.tsx
index d865d41fc..673805253 100644
--- a/packages/console/src/components/TabNav/index.tsx
+++ b/packages/console/src/components/TabNav/index.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 
 import * as styles from './index.module.scss';
@@ -5,9 +6,12 @@ import * as styles from './index.module.scss';
 export { default as TabNavLink } from './TabNavLink';
 
 type Props = {
+  className?: string;
   children: React.ReactNode;
 };
 
-const TabNav = ({ children }: Props) => <nav className={styles.nav}>{children}</nav>;
+const TabNav = ({ className, children }: Props) => (
+  <nav className={classNames(styles.nav, className)}>{children}</nav>
+);
 
 export default TabNav;
diff --git a/packages/console/src/components/Topbar/index.module.scss b/packages/console/src/components/Topbar/index.module.scss
index 2fa394790..6d8a0cbd9 100644
--- a/packages/console/src/components/Topbar/index.module.scss
+++ b/packages/console/src/components/Topbar/index.module.scss
@@ -1,9 +1,9 @@
 @use '@/scss/underscore' as _;
 
 .topbar {
-  height: 80px;
+  flex: 0 0 66px;
   width: 100%;
-  padding: _.unit(3) _.unit(8);
+  padding: _.unit(4) _.unit(6);
   display: flex;
   align-items: center;
 
diff --git a/packages/console/src/pages/ApiResources/index.module.scss b/packages/console/src/pages/ApiResources/index.module.scss
index bc03fd91e..36e32688b 100644
--- a/packages/console/src/pages/ApiResources/index.module.scss
+++ b/packages/console/src/pages/ApiResources/index.module.scss
@@ -3,17 +3,21 @@
 .headline {
   display: flex;
   justify-content: space-between;
+  padding: _.unit(6) _.unit(6) 0;
 }
 
 .table {
-  margin-top: _.unit(6);
-  width: 100%;
+  margin: _.unit(4) _.unit(6) _.unit(6);
 
-  tbody tr.clickable {
-    cursor: pointer;
+  tbody {
+    max-height: calc(100vh - _.unit(64));
 
-    &:hover {
-      background: var(--color-table-row-selected);
+    tr.clickable {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--color-table-row-selected);
+      }
     }
   }
 }
diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx
index d046878eb..51331c26e 100644
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@@ -56,14 +56,14 @@ const ApiResources = () => {
       <table className={styles.table}>
         <thead>
           <tr>
-            <td className={styles.apiResourceName}>{t('api_resources.api_name')}</td>
-            <td>{t('api_resources.api_identifier')}</td>
+            <th className={styles.apiResourceName}>{t('api_resources.api_name')}</th>
+            <th>{t('api_resources.api_identifier')}</th>
           </tr>
         </thead>
         <tbody>
           {error && (
             <tr>
-              <td colSpan={2}>error occured: {error.metadata.code}</td>
+              <td colSpan={2}>error occurred: {error.metadata.code}</td>
             </tr>
           )}
           {isLoading && (
@@ -73,7 +73,7 @@ const ApiResources = () => {
           )}
           {data?.map(({ id, name, indicator }) => (
             <tr key={id} className={styles.clickable}>
-              <td>
+              <td className={styles.apiResourceName}>
                 <ItemPreview title={name} icon={<ImagePlaceholder />} to={`/api-resources/${id}`} />
               </td>
               <td>
diff --git a/packages/console/src/pages/Applications/index.module.scss b/packages/console/src/pages/Applications/index.module.scss
index ec4c746f9..1dcf9ac27 100644
--- a/packages/console/src/pages/Applications/index.module.scss
+++ b/packages/console/src/pages/Applications/index.module.scss
@@ -3,17 +3,21 @@
 .headline {
   display: flex;
   justify-content: space-between;
+  padding: _.unit(6) _.unit(6) 0;
 }
 
 .table {
-  margin-top: _.unit(6);
-  width: 100%;
+  margin: _.unit(4) _.unit(6) _.unit(6);
 
-  tbody tr.clickable {
-    cursor: pointer;
+  tbody {
+    max-height: calc(100vh - _.unit(64));
 
-    &:hover {
-      background: var(--color-table-row-selected);
+    tr.clickable {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--color-table-row-selected);
+      }
     }
   }
 }
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index b7baa8c2f..05a00dfdb 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -65,8 +65,8 @@ const Applications = () => {
       <table className={styles.table}>
         <thead>
           <tr>
-            <td className={styles.applicationName}>{t('applications.application_name')}</td>
-            <td>{t('applications.client_id')}</td>
+            <th className={styles.applicationName}>{t('applications.application_name')}</th>
+            <th>{t('applications.client_id')}</th>
           </tr>
         </thead>
         <tbody>
@@ -88,7 +88,7 @@ const Applications = () => {
                 navigate(`/applications/${id}`);
               }}
             >
-              <td>
+              <td className={styles.applicationName}>
                 <ItemPreview
                   title={name}
                   subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
diff --git a/packages/console/src/pages/Connectors/components/ConnectorRow.tsx b/packages/console/src/pages/Connectors/components/ConnectorRow.tsx
index 4615cb344..d5e10afca 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorRow.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorRow.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import Button from '@/components/Button';
 import Status from '@/components/Status';
 
+import * as styles from '../index.module.scss';
 import ConnectorName from './ConnectorName';
 
 type Props = {
@@ -29,7 +30,7 @@ const ConnectorRow = ({ type, connector }: Props) => {
 
   return (
     <tr>
-      <td>
+      <td className={styles.connectorName}>
         <ConnectorName connector={connector} titlePlaceholder={typeLabel} />
       </td>
       <td>{typeLabel}</td>
diff --git a/packages/console/src/pages/Connectors/index.module.scss b/packages/console/src/pages/Connectors/index.module.scss
index eac0fbbec..74df442f2 100644
--- a/packages/console/src/pages/Connectors/index.module.scss
+++ b/packages/console/src/pages/Connectors/index.module.scss
@@ -3,18 +3,25 @@
 .headline {
   display: flex;
   justify-content: space-between;
+  padding: _.unit(6) _.unit(6) 0;
+}
+
+.tabs {
+  margin: _.unit(4) _.unit(6) 0;
 }
 
 .table {
-  margin-top: _.unit(6);
-  width: 100%;
-  font-size: var(--font-small-text);
+  margin: _.unit(4) _.unit(6) _.unit(6);
 
-  tbody tr.clickable {
-    cursor: pointer;
+  tbody {
+    max-height: calc(100vh - _.unit(74));
 
-    &:hover {
-      background: var(--color-table-row-selected);
+    tr.clickable {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--color-table-row-selected);
+      }
     }
   }
 }
diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx
index 8ef635585..421db13a0 100644
--- a/packages/console/src/pages/Connectors/index.tsx
+++ b/packages/console/src/pages/Connectors/index.tsx
@@ -45,16 +45,16 @@ const Connectors = () => {
         <CardTitle title="connectors.title" subtitle="connectors.subtitle" />
         {isSocial && <Button disabled title="admin_console.connectors.create" type="primary" />}
       </div>
-      <TabNav>
+      <TabNav className={styles.tabs}>
         <TabNavLink href="/connectors">{t('connectors.tab_email_sms')}</TabNavLink>
         <TabNavLink href="/connectors/social">{t('connectors.tab_social')}</TabNavLink>
       </TabNav>
       <table className={styles.table}>
         <thead>
           <tr>
-            <td className={styles.connectorName}>{t('connectors.connector_name')}</td>
-            <td>{t('connectors.connector_type')}</td>
-            <td>{t('connectors.connector_status')}</td>
+            <th className={styles.connectorName}>{t('connectors.connector_name')}</th>
+            <th>{t('connectors.connector_type')}</th>
+            <th>{t('connectors.connector_status')}</th>
           </tr>
         </thead>
         <tbody>
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
index 2ccedf6e4..3d5be7933 100644
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@@ -24,11 +24,21 @@ table {
   border-spacing: 0;
   overflow: hidden;
 
+  thead,
+  tbody,
+  tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+
   thead {
-    td {
+    th {
       font: var(--font-subhead-2);
       color: var(--color-component-caption);
       padding: _.unit(3) _.unit(4);
+      border-bottom: 1px solid var(--color-neutral-90);
+      text-align: left;
 
       &:first-child,
       &:last-child {
@@ -38,8 +48,13 @@ table {
   }
 
   tbody {
+    display: block;
+    overflow: auto;
+    table-layout: fixed;
+    max-height: calc(100% - _.unit(40));
+
     td {
-      border-top: 1px solid var(--color-neutral-90);
+      border-bottom: 1px solid var(--color-neutral-90);
       padding: _.unit(5) _.unit(4);
 
       &:first-child,
@@ -48,4 +63,8 @@ table {
       }
     }
   }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
 }