Number of page layout adjustments

package.json

@@ -18,11 +18,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@amsterdam/design-system-assets": "^0.3.0",
-    "@amsterdam/design-system-css": "^0.14.0",
     "@amsterdam/design-system-react": "^0.14.0",
-    "@amsterdam/design-system-react-icons": "^0.1.13",
-    "@amsterdam/design-system-tokens": "^0.14.0",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.get": "^4.4.9",
     "@types/qs": "^6.9.18",

src/app/components/PageHeading/PageHeading.tsx

@@ -8,31 +8,41 @@ type Props = {
   border?: boolean
 }
 
-type Size = "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6" 
+type Size =
+  | "level-1"
+  | "level-2"
+  | "level-3"
+  | "level-4"
+  | "level-5"
+  | "level-6"
 
 const Wrapper = styled.div<{ $isBorder: boolean }>`
-  display: flex;  
+  display: flex;
   padding-bottom: 8px;
   margin: 24px 0px;
-  border-bottom: ${ ({ $isBorder }) => $isBorder ? "1px solid #b4b4b4" : "none" };
+  border-bottom: ${({ $isBorder }) =>
+    $isBorder ? "1px solid #b4b4b4" : "none"};
 `
 
 const StyledIcon = styled(Icon)<{ level: number }>`
   margin-right: 8px;
   svg {
-    height: ${ ({ level }) => `${ 40 - (level * 4) }px` };
-    width: ${ ({ level }) => `${ 40 - (level * 4) }px` };
+    height: ${({ level }) => `${40 - level * 4}px`};
+    width: ${({ level }) => `${40 - level * 4}px`};
   }
 `
 
-export const PageHeading: React.FC<Props> = ({ label, level = 2, icon, border = false }) =>  {
-  const size: Size = `level-${ level }` 
+export const PageHeading: React.FC<Props> = ({
+  label,
+  level = 2,
+  icon,
+  border = false
+}) => {
+  const size: Size = `level-${level}`
   return (
-    <Wrapper $isBorder={ border }>
-      { icon && <StyledIcon svg={icon} level={ level }/> }
-      <Heading size={ size } >
-        { label }
-      </Heading>
+    <Wrapper $isBorder={border}>
+      {icon && <StyledIcon svg={icon} level={level} />}
+      <Heading size={size}>{label}</Heading>
     </Wrapper>
   )
 }

src/app/components/Table/Table.tsx

@@ -12,6 +12,8 @@ import { TableType, SortingType, DESCEND } from "./types"
 
 const Wrap = styled.div`
   position: relative;
+  width: 100%;
+  overflow-x: auto;
 `
 
 const StyledTable = styled.table`

src/app/pages/CaseDetailsPage/Documents/DocumentsTable/DocumentsTable.tsx

@@ -40,11 +40,11 @@ const DocumentsTable: React.FC = () => {
 
   return (
     <Table
-      data={ documents ?? [] } 
+      data={ documents ?? [] }
       columns={ columns }
       emptyPlaceholder="Geen documenten gevonden"
       loading={ isBusy }
-    />    
+    />
   )
 }
 

src/app/pages/SearchPage/SearchPage.tsx

@@ -4,6 +4,7 @@ import { SearchField } from "@amsterdam/design-system-react"
 import SearchResults from "./SearchResults/SearchResults"
 import { PageHeading } from "app/components"
 import { useURLState } from "app/hooks"
+import { Grid } from "@amsterdam/design-system-react"
 
 const DELAY = 750
 
@@ -25,8 +26,11 @@ export const SearchPage: React.FC = () => {
   }
 
   return (
-    <>
-      <PageHeading label="Adres zoeken" />
+    <Grid>
+      <Grid.Cell span="all">
+        <PageHeading label="Adres zoeken" />
+      </Grid.Cell>
+      <Grid.Cell span="all">
       <SearchField onSubmit={(e) => e.preventDefault() }  style={{ width: 600, marginBottom: "2rem" }}>
         <SearchField.Input
           placeholder="Zoek op postcode of straat"
@@ -37,7 +41,8 @@ export const SearchPage: React.FC = () => {
         <SearchField.Button />
       </SearchField>
       <SearchResults searchString={ debouncedSearchString } />
-    </>
+      </Grid.Cell>
+    </Grid>
   )
 }
 

src/app/pages/TasksPage/TaskPage.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom"
 import { ColumnType, LinkButton, PageHeading, Table } from "app/components"
 import { useTasks } from "app/state/rest"
 import { formatDate } from "app/utils/dates"
-
+import { Grid } from "@amsterdam/design-system-react"
 
 const columns: ColumnType<Components.Schemas.CaseUserTask>[] = [
   {
@@ -42,17 +42,21 @@ const columns: ColumnType<Components.Schemas.CaseUserTask>[] = [
 export const TasksPage: React.FC = () => {
   const [data, { isBusy }] = useTasks()
   const navigate = useNavigate()
-  
+
   return (
-    <>
-      <PageHeading label="Takenoverzicht" />
-      <Table 
-        columns={ columns } 
+    <Grid>
+      <Grid.Cell span="all">
+        <PageHeading label="Takenoverzicht" />
+      </Grid.Cell>
+      <Grid.Cell span="all">
+      <Table
+        columns={ columns }
         data={ data as Components.Schemas.CaseUserTask[] } 
         loading={ isBusy }
         onClickRow={(obj) => navigate(`/zaken/${ obj.case }`)}
       />
-    </>
+      </Grid.Cell>
+    </Grid>
   )
 }
 

src/app/styles/design-system-overrides.css

@@ -1,5 +1,9 @@
 /* This file is used to override the default design system styles */
 
+body, html {
+  padding: 0;
+}
+
 .ams-dialog {
   --ams-label-font-weight: normal;
 }

src/index.css

@@ -1,4 +1,4 @@
 :root {
   font-family: "Amsterdam Sans", Arial, sans-serif;
-  padding: 0px 16px;
+  /* padding: 0px 16px; */
 }

vite.config.mts

@@ -4,12 +4,15 @@ import react from "@vitejs/plugin-react-swc"
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  css: {
+    devSourcemap: true
+  },
   server: {
     open: true // Opens browser when running npm start
-  },  
+  },
   resolve: {
     alias: {
-      "app": "/src/app"
+      app: "/src/app"
     }
   }
 })