1571: fix table height issue

digitalfabrik · Aug 28, 2024 · 31424f6 · 31424f6
1 parent 12deb10
commit 31424f6
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/administration/src/bp-modules/ButtonBar.tsx b/administration/src/bp-modules/ButtonBar.tsx
@@ -1,6 +1,8 @@
 import { Card } from '@blueprintjs/core'
 import styled from 'styled-components'
 
+import dimensions from './constants/dimensions'
+
 const ButtonBar = styled(Card)`
   width: 100%;
   padding: 15px;
@@ -12,6 +14,7 @@ const ButtonBar = styled(Card)`
   & button {
     margin: 5px;
   }
+  height: ${dimensions.bottomBarHeight}px;
 `
 
 export default ButtonBar
diff --git a/administration/src/bp-modules/NavigationBar.tsx b/administration/src/bp-modules/NavigationBar.tsx
@@ -7,11 +7,13 @@ import { WhoAmIContext } from '../WhoAmIProvider'
 import { Role } from '../generated/graphql'
 import { ProjectConfigContext } from '../project-configs/ProjectConfigContext'
 import UserMenu from './UserMenu'
+import dimensions from './constants/dimensions'
 
 const PrintAwareNavbar = styled(Navbar)`
   @media print {
     display: none;
   }
+  height: ${dimensions.navigationBarHeight};
 `
 
 interface Props {

diff --git a/administration/src/bp-modules/constants/dimensions.ts b/administration/src/bp-modules/constants/dimensions.ts
@@ -0,0 +1,10 @@
+type DimensionsType = {
+  navigationBarHeight: number
+  bottomBarHeight: number
+}
+
+const dimensions: DimensionsType = {
+  navigationBarHeight: 50,
+  bottomBarHeight: 70,
+}
+export default dimensions
diff --git a/administration/src/bp-modules/stores/StoresTable.tsx b/administration/src/bp-modules/stores/StoresTable.tsx
@@ -4,13 +4,13 @@ import { useCallback } from 'react'
 import styled from 'styled-components'
 
 import { StoreFieldConfig } from '../../project-configs/getProjectConfig'
+import dimensions from '../constants/dimensions'
 import { AcceptingStoreEntry } from './AcceptingStoreEntry'
 
 const TableContainer = styled.div`
   width: 100vw;
-  height: 85vh;
+  height: calc(100vh - ${dimensions.navigationBarHeight + dimensions.bottomBarHeight}px);
   display: flex;
-  align-self: center;
 `
 
 const StyledCell = styled(Cell)`