dont stretch page if not needed (#572)

kartverket · Jan 7, 2025 · 2f16791 · 2f16791
1 parent 9e21809
commit 2f16791
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 23 deletions.
diff --git a/frontend/beCompliant/src/components/Table.tsx b/frontend/beCompliant/src/components/Table.tsx
@@ -22,7 +22,7 @@ import { getSortFuncForColumn } from './table/TableSort';
 import { TableActions } from './tableActions/TableActions';
 import { TableFilters } from './tableActions/TableFilter';
 import { useEffect, useState } from 'react';
-import { Flex, IconButton, Text, Tooltip } from '@kvib/react';
+import { Box, Flex, IconButton, Text, Tooltip } from '@kvib/react';
 import { useNavigate } from 'react-router-dom';
 
 type Props = {
@@ -241,6 +241,7 @@ export function TableComponent({
         tableMetadata={tableMetadata}
         filterByAnswer={filterByAnswer}
       />
+
       <DataTable<RowData>
         table={table}
         unHideColumn={unHideColumn}

diff --git a/frontend/beCompliant/src/components/table/TableCell.tsx b/frontend/beCompliant/src/components/table/TableCell.tsx
@@ -86,7 +86,7 @@ export const TableCell = ({
       );
   }
   return (
-    <Box whiteSpace="normal" fontSize="md" maxW="600px">
+    <Box whiteSpace="normal" fontSize="md" maxW="650px">
       <Markdown components={markdownComponents}>
         {value.value[0].split('\n\n')[0]}
       </Markdown>

diff --git a/frontend/beCompliant/src/pages/ActivityPage.tsx b/frontend/beCompliant/src/pages/ActivityPage.tsx
@@ -185,29 +185,41 @@ export const ActivityPage = () => {
       <Box width="100%" paddingX="10">
         <Divider borderColor="gray.400" />
       </Box>
-      <Skeleton
-        isLoaded={
-          !tableIsPending &&
-          !userinfoIsPending &&
-          !contextIsPending &&
-          !answerIsPending &&
-          !commentIsPending
-        }
-        minW="100vw"
+      <Box
         minH="100vh"
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
       >
-        {!!tableData && !!context && !!userinfo && !!comments && !!answers && (
-          <TableComponent
-            filters={filters}
-            tableMetadata={tableData?.columns ?? []}
-            filterByAnswer={allSingleSelect ?? false}
-            contextId={context?.id}
-            data={filteredData}
-            tableData={tableData}
-            user={userinfo.user}
-          />
-        )}
-      </Skeleton>
+        <Skeleton
+          isLoaded={
+            !tableIsPending &&
+            !userinfoIsPending &&
+            !contextIsPending &&
+            !answerIsPending &&
+            !commentIsPending
+          }
+          minH="100vh"
+          minW="60vw"
+          w="auto"
+        >
+          {!!tableData &&
+            !!context &&
+            !!userinfo &&
+            !!comments &&
+            !!answers && (
+              <TableComponent
+                filters={filters}
+                tableMetadata={tableData?.columns ?? []}
+                filterByAnswer={allSingleSelect ?? false}
+                contextId={context?.id}
+                data={filteredData}
+                tableData={tableData}
+                user={userinfo.user}
+              />
+            )}
+        </Skeleton>
+      </Box>
       <SettingsModal
         onOpen={onSettingsOpen}
         onClose={onSettingsClose}