MWB-944: update technical mappings and quality control tabs to scroll…

…able
meaningfy-ws · Jan 9, 2025 · 6b5d4d1 · 6b5d4d1
1 parent 7d10588
commit 6b5d4d1
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js b/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js
@@ -17,6 +17,7 @@ import {TableSearchBar} from "src/sections/components/table-search-bar";
 import {shaclTestSuitesApi as sectionApi} from 'src/api/shacl-test-suites';
 import {FileCollectionListTable} from 'src/sections/app/file-manager/file-collection-list-table';
 import {shaclTestFileResourcesApi as fileResourceApi} from 'src/api/shacl-test-suites/file-resources'
+import {NavigationTabsWrapper} from '../../../components/navigation-tabs-wrapper';
 
 const useItemsStore = () => {
     const [state, setState] = useState({
@@ -57,8 +58,11 @@ const Page = () => {
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
-            <Stack spacing={4}>
+            <NavigationTabsWrapper>
                 <QualityControlTabs/>
+            </NavigationTabsWrapper>
+            <Stack spacing={4}
+                   mt={5}>
                 <Stack
                     direction="row"
                     justifyContent="space-between"

diff --git a/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js b/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js
@@ -17,6 +17,7 @@ import {TableSearchBar} from "src/sections/components/table-search-bar";
 import {sparqlTestSuitesApi as sectionApi} from 'src/api/sparql-test-suites';
 import {FileCollectionListTable} from 'src/sections/app/file-manager/file-collection-list-table';
 import {sparqlTestFileResourcesApi as fileResourcesApi} from "src/api/sparql-test-suites/file-resources";
+import {NavigationTabsWrapper} from '../../../components/navigation-tabs-wrapper';
 
 const useItemsStore = () => {
     const [state, setState] = useState({
@@ -56,8 +57,11 @@ const Page = () => {
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
-            <Stack spacing={4}>
+            <NavigationTabsWrapper>
                 <QualityControlTabs/>
+            </NavigationTabsWrapper>
+            <Stack spacing={4}
+                   mt={5}>
                 <Stack
                     direction="row"
                     justifyContent="space-between"

diff --git a/mapping_workbench/frontend/src/pages/app/triple-map-fragments/index.js b/mapping_workbench/frontend/src/pages/app/triple-map-fragments/index.js
@@ -21,6 +21,7 @@ import {TechnicalMappingsTabs} from 'src/sections/app/technical-mappings';
 import {ListTable} from "src/sections/app/generic-triple-map-fragment/list-table";
 import {FileUploader} from "src/sections/app/generic-triple-map-fragment/file-uploader";
 import {genericTripleMapFragmentsApi as sectionApi} from 'src/api/triple-map-fragments/generic';
+import {NavigationTabsWrapper} from '../../../components/navigation-tabs-wrapper';
 
 const Page = () => {
     const uploadDialog = useDialog();
@@ -43,8 +44,11 @@ const Page = () => {
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
-            <Stack spacing={4}>
+            <NavigationTabsWrapper>
                 <TechnicalMappingsTabs/>
+            </NavigationTabsWrapper>
+            <Stack spacing={4}
+                   mt={5}>
                 <Stack
                     direction="row"
                     justifyContent="space-between"

diff --git a/mapping_workbench/frontend/src/pages/app/value-mapping-resources/index.js b/mapping_workbench/frontend/src/pages/app/value-mapping-resources/index.js
@@ -17,6 +17,7 @@ import {TechnicalMappingsTabs} from 'src/sections/app/technical-mappings';
 import {resourceFilesApi} from 'src/api/resource-collections/file-resources';
 import {resourceCollectionsApi as sectionApi} from 'src/api/resource-collections';
 import {FileCollectionListTable} from 'src/sections/app/file-manager/file-collection-list-table';
+import {NavigationTabsWrapper} from '../../../components/navigation-tabs-wrapper';
 
 const useItemsStore = () => {
     const [state, setState] = useState({
@@ -59,8 +60,11 @@ const Page = () => {
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
-            <Stack spacing={4}>
+            <NavigationTabsWrapper>
                 <TechnicalMappingsTabs/>
+            </NavigationTabsWrapper>
+            <Stack spacing={4}
+                   mt={5}>
                 <Stack
                     direction="row"
                     justifyContent="space-between"