remove width & height fixed

InseeFr · Jan 18, 2024 · 2e63b0c · 2e63b0c
1 parent 873f167
commit 2e63b0c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 29 deletions.
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
@@ -15,13 +15,19 @@ export function SearchPage(props: SearchProps) {
   return (
     <Box
       className="Body"
-      sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "-24px" }}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+      }}
     >
       <Box
         sx={{
           py: 2,
           display: "flex",
-          width: "1512px",
+          width: "100%",
           height: "24px",
           flexDirection: "column",
           alignItems: "flex-start",
@@ -47,7 +53,7 @@ export function SearchPage(props: SearchProps) {
             }}
             className="Ariane2"
           >
-            {/* <Breadcrumbs
+            <Breadcrumbs
               aria-label="breadcrumb"
               className="Breadcrumbs"
               sx={{ alignItems: "center", display: "flex" }}
@@ -73,7 +79,7 @@ export function SearchPage(props: SearchProps) {
                       fontSize: 16,
                       fontFamily: "Roboto",
                       fontWeight: "400",
-                      lineHeight: 24,
+                      lineHeight: "24px",
                       letterSpacing: 0.15,
                       wordWrap: "break-word",
                     }}
@@ -89,28 +95,25 @@ export function SearchPage(props: SearchProps) {
                   fontSize: 16,
                   fontFamily: "Roboto",
                   fontWeight: "400",
-                  lineHeight: 24,
+                  lineHeight: "24px",
                   letterSpacing: 0.15,
                   wordWrap: "break-word",
                 }}
               >
                 recherche avancée
               </Typography>
-            </Breadcrumbs> */}
+            </Breadcrumbs>
           </Box>
         </Box>
       </Box>
-      <Box className="Content" style={{ width: 1415, height: 862, position: "relative" }}>
+      <Box className="Content" style={{ width: "95%", height: "100%" }}>
         <Box
           style={{
             paddingLeft: 6,
             paddingRight: 6,
-            left: -6,
-            top: 2.8,
-            position: "absolute",
             justifyContent: "flex-start",
             alignItems: "flex-start",
-            gap: 4,
+            gap: "48px",
             display: "inline-flex",
           }}
           className="Recherche"

diff --git a/src/pages/contacts/ContactList.tsx b/src/pages/contacts/ContactList.tsx
@@ -4,9 +4,9 @@ import { FilterListToggleButton } from "../FilterListToggleButton";
 import { Stack } from "@mui/material";
 import { FilterListBySelector } from "../FilterListBySelector";
 
-type ContactsListProps = {};
+// type ContactsListProps = {};
 
-export const ContactsList = ({}: ContactsListProps) => {
+export const ContactsList = () => {
   return (
     <Stack display={"flex"} flexDirection={"column"} spacing={"16px"}>
       <Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} alignItems={"center"}>
@@ -19,11 +19,11 @@ export const ContactsList = ({}: ContactsListProps) => {
       </Box>
       <Box
         sx={{
-          display: "grid",
+          display: "flex",
+          flexWrap: "wrap",
           rowGap: "29px",
           columnGap: "26px",
-          gridTemplateColumns: "repeat(3, 1fr)",
-          height: "700px",
+          height: "65vh",
           overflow: "auto",
         }}
       >

diff --git a/src/ui/Header.tsx b/src/ui/Header.tsx
@@ -6,25 +6,23 @@ import { PropsWithChildren } from "react";
 
 export function Header() {
   return (
-    <Row
-    px={8}
-    py={1}
-    height={74}
-    justifyContent="space-between"
-    bgcolor="white">
+    <Row px={8} py={1} height={74} justifyContent="space-between" bgcolor="white">
       <Row gap={2.5} component={HomeLink}>
         <img src="/logoInsee.png" alt="" width={48} height={50} />
-          <Row typography="headlineMedium" gap={.25} color="red.main" component="span">
-              <Box component="span" color="black.main" fontWeight={600}>Platine</Box>
-              Collecte
-          </Row>
+        <Row typography="headlineMedium" gap={0.25} color="red.main" component="span">
+          <Box component="span" color="black.main" fontWeight={600}>
+            Platine
+          </Box>
+          Collecte
+        </Row>
       </Row>
       <IconButton component={RouterLink} to="/reglages">
         <SettingsOutlinedIcon />
       </IconButton>
-    </Row>)
+    </Row>
+  );
 }
 
 const HomeLink = (props: PropsWithChildren) => {
-  return <Link component={RouterLink} underline="none" to="/" {...props}/>
-}
+  return <Link component={RouterLink} underline="none" to="/" {...props} />;
+};