Updating styling on parts and invoicing modals BOD-404

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -1,4 +1,4 @@
-import { Select, Tag } from "antd";
+import { Col, Row, Select, Tag } from "antd";
 import React, { useEffect, useState, forwardRef } from "react";
 import { HeartOutlined } from "@ant-design/icons";
 const { Option } = Select;
@@ -30,7 +30,7 @@ const VendorSearchSelect = (
       showSearch
       value={option}
       style={{
-        width: 300,
+        width: "100%",
       }}
       onChange={setOption}
       optionFilterProp="name"
@@ -45,21 +45,27 @@ const VendorSearchSelect = (
               name={o.name}
               discount={o.discount}
             >
-              <div style={{ display: "flex" }}>
-                {o.name}
-                <Tag color="green">{`${o.discount * 100}%`}</Tag>
-                <HeartOutlined />
-              </div>
+              <Row>
+                <Col span={16}>{o.name}</Col>
+                <Col span={4}>
+                  <HeartOutlined />
+                </Col>
+                <Col span={4}>
+                  <Tag color="green">{`${o.discount * 100}%`}</Tag>
+                </Col>
+              </Row>
             </Option>
           ))
         : null}
       {options
         ? options.map((o) => (
             <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
-              <div style={{ display: "flex" }}>
-                {o.name}
-                <Tag color="green">{`${o.discount * 100}%`}</Tag>
-              </div>
+              <Row>
+                <Col span={20}>{o.name}</Col>
+                <Col span={4}>
+                  <Tag color="green">{`${o.discount * 100}%`}</Tag>
+                </Col>
+              </Row>
             </Option>
           ))
         : null}