Improve dimensions on table views

UN-OCHA · Feb 5, 2025 · c7fd65d · c7fd65d
1 parent f071b73
commit c7fd65d
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 40 deletions.
diff --git a/apps/hpc-ftsadmin/src/app/app.tsx b/apps/hpc-ftsadmin/src/app/app.tsx
@@ -45,7 +45,6 @@ const Main = styled.main`
 
 const LoggedInContainer = styled.div`
   width: 100%;
-  margin-bottom: ${(p) => p.theme.marginPx.lg * 2}px;
 `;
 
 const TitlePrimary = styled.div`

diff --git a/apps/hpc-ftsadmin/src/app/components/tables/flows-table.tsx b/apps/hpc-ftsadmin/src/app/components/tables/flows-table.tsx
@@ -907,7 +907,7 @@ export default function FlowsTable(props: FlowsTableProps) {
               </TableContainer>
             </Box>
             <TablePagination
-              sx={{ display: 'block' }}
+              sx={tw`shrink-0`}
               data-test="flows-table-pagination"
               rowsPerPageOptions={rowsPerPageOptions}
               component="div"

diff --git a/apps/hpc-ftsadmin/src/app/components/tables/organizations-table.tsx b/apps/hpc-ftsadmin/src/app/components/tables/organizations-table.tsx
@@ -511,7 +511,7 @@ export default function OrganizationTable(props: OrganizationTableProps) {
                   </TableContainer>
                 </Box>
                 <TablePagination
-                  sx={{ display: 'block' }}
+                  sx={tw`shrink-0`}
                   data-test="flows-table-pagination"
                   rowsPerPageOptions={rowsPerPageOptions}
                   component="div"

diff --git a/apps/hpc-ftsadmin/src/app/pages/flows/flow.tsx b/apps/hpc-ftsadmin/src/app/pages/flows/flow.tsx
@@ -31,6 +31,7 @@ type FlowRestPending = Omit<flows.GetFlowResult, 'activeVersion'> & {
 const PaddingContainer = tw.div`
   xl:px-12
   px-6
+  mb-16
 `;
 
 const UpdatedCreatedBy = tw.h4`

diff --git a/apps/hpc-ftsadmin/src/app/pages/flows/flows-list.tsx b/apps/hpc-ftsadmin/src/app/pages/flows/flows-list.tsx
@@ -1,4 +1,4 @@
-import { C, CLASSES, combineClasses } from '@unocha/hpc-ui';
+import { C, CLASSES, combineClasses, styled } from '@unocha/hpc-ui';
 import { t } from '../../../i18n';
 import PageMeta from '../../components/page-meta';
 import { AppContext } from '../../context';
@@ -26,10 +26,14 @@ interface Props {
 const Container = tw.div`
   flex
 `;
-const LandingContainer = tw.div`
-  w-full
-  overflow-x-clip
-  h-full
+const LandingContainer = styled.div`
+  height: calc(100vh - ${(p) => p.theme.sizing.totalHeaderHeight});
+  ${tw`
+    w-full
+    overflow-x-clip
+    flex
+    flex-col
+  `}
 `;
 export default (props: Props) => {
   const rowsPerPageOptions = [10, 25, 50, 100];

diff --git a/apps/hpc-ftsadmin/src/app/pages/flows/pending-flows-list.tsx b/apps/hpc-ftsadmin/src/app/pages/flows/pending-flows-list.tsx
@@ -1,4 +1,4 @@
-import { C, CLASSES, combineClasses } from '@unocha/hpc-ui';
+import { C, CLASSES, combineClasses, styled } from '@unocha/hpc-ui';
 import { t } from '../../../i18n';
 import PageMeta from '../../components/page-meta';
 import { AppContext } from '../../context';
@@ -22,8 +22,14 @@ interface Props {
 const Container = tw.div`
   flex
 `;
-const LandingContainer = tw.div`
-  w-full
+const LandingContainer = styled.div`
+  height: calc(100vh - ${(p) => p.theme.sizing.totalHeaderHeight});
+  ${tw`
+    w-full
+    overflow-x-clip
+    flex
+    flex-col
+  `}
 `;
 
 export default (props: Props) => {

diff --git a/apps/hpc-ftsadmin/src/app/pages/keywords/keyword-list.tsx b/apps/hpc-ftsadmin/src/app/pages/keywords/keyword-list.tsx
@@ -1,4 +1,4 @@
-import { C, CLASSES, combineClasses } from '@unocha/hpc-ui';
+import { C, CLASSES, combineClasses, styled } from '@unocha/hpc-ui';
 import { t } from '../../../i18n';
 import PageMeta from '../../components/page-meta';
 import { AppContext } from '../../context';
@@ -21,8 +21,14 @@ interface Props {
 const Container = tw.div`
   flex
 `;
-const LandingContainer = tw.div`
-  w-full
+const LandingContainer = styled.div`
+  height: calc(100vh - ${(p) => p.theme.sizing.totalHeaderHeight});
+  ${tw`
+    w-full
+    overflow-x-clip
+    flex
+    flex-col
+  `}
 `;
 export default (props: Props) => {
   const [query, setQuery] = useQueryParams({

diff --git a/apps/hpc-ftsadmin/src/app/pages/organizations/organization-list.tsx b/apps/hpc-ftsadmin/src/app/pages/organizations/organization-list.tsx
@@ -1,4 +1,4 @@
-import { C, CLASSES, combineClasses } from '@unocha/hpc-ui';
+import { C, CLASSES, combineClasses, styled } from '@unocha/hpc-ui';
 import { t } from '../../../i18n';
 import PageMeta from '../../components/page-meta';
 import { AppContext, getEnv } from '../../context';
@@ -27,8 +27,14 @@ interface Props {
 const Container = tw.div`
   flex
 `;
-const LandingContainer = tw.div`
-  w-full
+const LandingContainer = styled.div`
+  height: calc(100vh - ${(p) => p.theme.sizing.totalHeaderHeight});
+  ${tw`
+    w-full
+    overflow-x-clip
+    flex
+    flex-col
+  `}
 `;
 export default (props: Props) => {
   const rowsPerPageOptions = [10, 25, 50, 100];

diff --git a/apps/hpc-ftsadmin/src/app/pages/organizations/organization.tsx b/apps/hpc-ftsadmin/src/app/pages/organizations/organization.tsx
@@ -17,6 +17,7 @@ interface Props {
 type OrganizationRouteParams = { id: string };
 const Container = tw.div`
   flex
+  mb-16
 `;
 const LandingContainer = tw.div`
   w-full

diff --git a/libs/hpc-ui/src/lib/components/header.tsx b/libs/hpc-ui/src/lib/components/header.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import {
   MenuItem,
   Popper,
@@ -116,7 +116,7 @@ const Header = (props: Props) => {
 
 export default styled(Header)`
   background: ${(p) => p.theme.colors.primary.normal};
-  min-height: 35px;
+  min-height: ${(p) => p.theme.sizing.header.minHeight}px;
 
   .${CLS.LOGO} {
     width: 23px;

diff --git a/libs/hpc-ui/src/lib/components/main-navigation.tsx b/libs/hpc-ui/src/lib/components/main-navigation.tsx
@@ -1,7 +1,6 @@
 import { Link, useLocation } from 'react-router';
 
 import {
-  Icon,
   List as MUIList,
   ListItem as MUIListItem,
   ListItemButton as MUIListItemButton,
@@ -49,14 +48,12 @@ interface Props {
   className?: string;
 }
 
-const HEADER_HEIGHT_PX = 60;
-const BORDER_BOTTOM_WIDTH = '3px';
-
 const Nav = styled.nav`
-  border-bottom: ${BORDER_BOTTOM_WIDTH} solid ${(p) => p.theme.colors.dividers};
+  border-bottom: ${(p) => p.theme.sizing.mainNavigation.borderBottom}px solid
+    ${(p) => p.theme.colors.dividers};
 
   > div {
-    height: ${HEADER_HEIGHT_PX}px;
+    height: ${(p) => p.theme.sizing.mainNavigation.height}px;
 
     > .${CLS.HEADER} {
       display: flex;
@@ -119,7 +116,7 @@ const Nav = styled.nav`
       margin: 0;
       padding: 0;
       display: flex;
-      margin-bottom: -${BORDER_BOTTOM_WIDTH};
+      margin-bottom: -${(p) => p.theme.sizing.mainNavigation.borderBottom}px;
       list-style: none;
       border-right: 1px solid ${(p) => p.theme.colors.dividers};
 
@@ -130,10 +127,10 @@ const Nav = styled.nav`
           display: flex;
           align-items: center;
           justify-content: center;
-          height: ${HEADER_HEIGHT_PX}px;
+          height: ${(p) => p.theme.sizing.mainNavigation.height}px;
           padding: 0 21px;
-          border-bottom: ${BORDER_BOTTOM_WIDTH} solid
-            ${(p) => p.theme.colors.dividers};
+          border-bottom: ${(p) => p.theme.sizing.mainNavigation.borderBottom}px
+            solid ${(p) => p.theme.colors.dividers};
           color: ${(p) => p.theme.colors.text};
           font-weight: bold;
           text-transform: uppercase;

diff --git a/libs/hpc-ui/src/lib/components/search-filter.tsx b/libs/hpc-ui/src/lib/components/search-filter.tsx
@@ -41,17 +41,19 @@ const FlexDiv = tw.div`
   justify-between
   items-center
 `;
-const StyledDrawer = tw(Drawer)`
-  sticky
-  top-0
-  z-0
-  overflow-y-visible
-  h-screen
-  [&>div]:relative
-  [&>div]:border-y-0
-  [&>div]:border-s-0
-  [&>div]:border-e
-  [&>div]:w-full
+const StyledDrawer = styled(Drawer)`
+  height: calc(100vh - ${(p) => p.theme.sizing.totalHeaderHeight});
+  ${tw`
+    sticky
+    top-0
+    z-0
+    overflow-y-visible
+    [&>div]:relative
+    [&>div]:border-y-0
+    [&>div]:border-s-0
+    [&>div]:border-e
+    [&>div]:w-full
+  `}
 `;
 const Dragger = tw.div`
   cursor-col-resize

diff --git a/libs/hpc-ui/src/lib/theme.tsx b/libs/hpc-ui/src/lib/theme.tsx
@@ -43,6 +43,19 @@ const COLOR_PALETTE = {
   },
 };
 
+const MAIN_NAVIGATION_HEIGHT_PX = 60;
+const MAIN_NAVIGATION_BORDER_BOTTOM_PX = 3;
+
+const HEADER_MIN_HEIGHT_PX = 35;
+/**
+ * In dev environments, there is an extra header of 40px
+ */
+const TOTAL_HEADER_HEIGHT = `${
+  MAIN_NAVIGATION_HEIGHT_PX +
+  MAIN_NAVIGATION_BORDER_BOTTOM_PX +
+  HEADER_MIN_HEIGHT_PX
+}px`;
+
 export const THEME = {
   colors: {
     pallete: COLOR_PALETTE,
@@ -78,6 +91,14 @@ export const THEME = {
      * (this excludes the height of any top and bottom borders)
      */
     singleLineBlockItemHeightPx: 49,
+    header: {
+      minHeight: HEADER_MIN_HEIGHT_PX,
+    },
+    mainNavigation: {
+      height: MAIN_NAVIGATION_HEIGHT_PX,
+      borderBottom: MAIN_NAVIGATION_BORDER_BOTTOM_PX,
+    },
+    totalHeaderHeight: TOTAL_HEADER_HEIGHT,
   },
   animations: {
     fast: '0.2s ease-out',
-Original file line number
+Diff line change
@@ Expand Up @@
     const PaddingContainer = tw.div`
       xl:px-12
       px-6
+      mb-16
     `;
     const UpdatedCreatedBy = tw.h4`
@@ Expand Down @@