fix(console): page layout issues

.gitignore

@@ -24,3 +24,4 @@ cache
 *.env
 .idea/
 *.pem
+.history

packages/console/src/App.module.scss

@@ -5,4 +5,5 @@
   display: flex;
   padding-right: _.unit(5);
   margin-bottom: _.unit(6);
+  overflow: hidden;
 }

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%;
 }

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;

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;
 

packages/console/src/pages/ApiResources/index.module.scss

@@ -3,13 +3,16 @@
 .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 {
+  tbody {
+    max-height: calc(100vh - _.unit(64));
+
+    tr.clickable {
       cursor: pointer;
 
       &:hover {
@@ -17,6 +20,7 @@
       }
     }
   }
+}
 
 .apiResourceName {
   width: 360px;

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>

packages/console/src/pages/Applications/index.module.scss

@@ -3,13 +3,16 @@
 .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 {
+  tbody {
+    max-height: calc(100vh - _.unit(64));
+
+    tr.clickable {
       cursor: pointer;
 
       &:hover {
@@ -17,6 +20,7 @@
       }
     }
   }
+}
 
 .applicationName {
   width: 360px;

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`)}

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>

packages/console/src/pages/Connectors/index.module.scss

@@ -3,14 +3,20 @@
 .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 {
+  tbody {
+    max-height: calc(100vh - _.unit(74));
+
+    tr.clickable {
       cursor: pointer;
 
       &:hover {
@@ -18,6 +24,7 @@
       }
     }
   }
+}
 
 .connectorName {
   width: 360px;

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>

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;
+  }
 }