fix(basket): set max height and overflow for basket

dataesr · Jun 6, 2024 · a074c02 · a074c02
1 parent 2b2b9a5
commit a074c02
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 33 deletions.
diff --git a/src/pages/api-operation-page/export-to-xlsx.tsx b/src/pages/api-operation-page/export-to-xlsx.tsx
@@ -22,37 +22,39 @@ const ExcelExportButton = ({ dataList, setDataList }) => {
 
   return (
     <div className="basket">
-      <Title look="h6" className="basket-title">
-        Liste des publications à exporter
-      </Title>
-      <ul style={{ listStyleType: "none", padding: 0 }}>
-        {Array.isArray(dataList) &&
-          dataList.map((item, index) => (
-            <li
-              key={index}
-              style={{
-                listStyleType: "none",
-                padding: 0,
-                borderBottom: "1px solid #000",
-              }}
-            >
-              <br />
-              <div className="basket-item">
-                <Text size="sm" bold>
-                  {item.publi_id}
-                </Text>
-                <i>à lier à</i>
-                <Text size="sm" bold>
-                  {item.fullName}
-                  <button onClick={() => handleRemoveClick(index)}>
-                    <AiOutlineDelete color="red" />
-                  </button>
-                </Text>
-              </div>
-            </li>
-          ))}
-      </ul>
-      <Button onClick={handleExportClick}>Exporter</Button>
+      <div className="basket-content">
+        <Title look="h6" className="basket-title">
+          Liste des publications à exporter
+        </Title>
+        <ul style={{ listStyleType: "none", padding: 0 }}>
+          {Array.isArray(dataList) &&
+            dataList.map((item, index) => (
+              <li
+                key={index}
+                style={{
+                  listStyleType: "none",
+                  padding: 0,
+                  borderBottom: "1px solid #000",
+                }}
+              >
+                <br />
+                <div className="basket-item">
+                  <Text size="sm" bold>
+                    {item.publi_id}
+                  </Text>
+                  <i>à lier à</i>
+                  <Text size="sm" bold>
+                    {item.fullName}
+                    <button onClick={() => handleRemoveClick(index)}>
+                      <AiOutlineDelete color="red" />
+                    </button>
+                  </Text>
+                </div>
+              </li>
+            ))}
+        </ul>
+        <Button onClick={handleExportClick}>Exporter</Button>
+      </div>
     </div>
   );
 };

diff --git a/src/pages/api-operation-page/styles.scss b/src/pages/api-operation-page/styles.scss
@@ -22,19 +22,23 @@
 .basket {
   position: fixed;
   right: 0;
-  top: 0;
+  top: 50px;
   padding: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  margin: 20px;
+  margin: 0 20px 20px 20px;
   z-index: 1000;
   background-color: white;
   border-radius: 20px;
   border: 2px solid black;
+}
+
+.basket-content {
   max-height: 500px;
   overflow-y: auto;
+  width: 100%;
 }
 .basket-item {
   display: flex;