Ad hover cut off left border UI & archive ad button

src/assets/styles/components/_ads.scss

@@ -276,7 +276,7 @@ h3 {
 }
 
 .slick-list {
-  padding: 0.75rem !important;
+  padding: 1.25rem !important;
   overflow-y: visible !important;
   @include media-below($bp-xl) {
   }
@@ -296,6 +296,7 @@ h3 {
   justify-content: center;
   align-items: center;
   padding: 72px;
+  width: 90% !important;
   background: #ffffff;
   border: 1px solid #e4e4e4;
   border-radius: 18px;
@@ -645,11 +646,22 @@ h3 {
   padding-left: 36px;
 }
 
+.ad-details-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 36px;
+}
+
+.ad-details-expired-at {
+  position: relative;
+  left: -80px;
+}
+
 .ad-details-buttons {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-top: 36px;
   @include media-below($bp-xl) {
     justify-content: center;
   }

src/pages/AdsPage/AdDetailsPage.js

@@ -18,6 +18,7 @@ import { selectLogo } from "../../util/helpers/technologiesLogos";
 import { archiveActiveAdReq } from "../../store/actions/archiveActiveAd/archiveActiveAdActions";
 import { ADS_PAGE } from "../../constants/pages";
 import { useHistory } from "react-router-dom";
+import archiveIcon from "../../assets/images/archive.png";
 
 const AdDetailsPage = () => {
   const theme = useTheme();
@@ -117,13 +118,22 @@ const AdDetailsPage = () => {
                 <sub>| {ad.totalApplicants} prijavljenih</sub>
               </div>
             </div>
-            {!matches && (
-              <div className="ad-details-tech-logo-date">
-                <p>
-                  <span>{t("ads.adDetailsExpiredAt")}: </span>
-                  {new Date(ad.expiredAt).toLocaleDateString()}
-                </p>
-              </div>
+            {!(new Date(ad.expiredAt) < new Date()) && (
+              <IconButton
+                onClick={archiveAdHandler}
+                className={`c-btn--primary-outlined editEnableBtn c-btn userPageBtn
+              }`}
+              >
+                {!matches && "Arhiviraj"}
+                <img
+                  style={{
+                    position: "relative",
+                    top: -0.25,
+                    paddingLeft: matches ? "0px" : "10px",
+                  }}
+                  src={archiveIcon}
+                />
+              </IconButton>
             )}
           </div>
           <div className="ad-details-content">
@@ -223,23 +233,28 @@ const AdDetailsPage = () => {
               )}
             </div>
           )}
-          <div className="ad-details-buttons">
-            <Link className="ad-details-buttons-link" to="/ads">
-              Nazad na sve oglase
-            </Link>
-            {!(new Date(ad.expiredAt) < new Date()) && (
-              <IconButton
-                className="c-btn c-btn--primary add-ad-btn"
-                onClick={archiveAdHandler}
-              >
-                ARCHIVE AD
-              </IconButton>
-            )}
-            {!(new Date(ad.expiredAt) < new Date()) && (
-              <IconButton className="c-btn c-btn--primary add-ad-btn">
-                PRIJAVI SE
-              </IconButton>
+          <div className="ad-details-actions">
+            {!matches && (
+              <div className="ad-details-expired-at">
+                <div className="ad-details-tech-logo-date">
+                  <p>
+                    <span>{t("ads.adDetailsExpiredAt")}: </span>
+                    {new Date(ad.expiredAt).toLocaleDateString()}
+                  </p>
+                </div>
+              </div>
             )}
+            <div className="ad-details-buttons">
+              <Link className="ad-details-buttons-link" to="/ads">
+                Nazad na sve oglase
+              </Link>
+
+              {!(new Date(ad.expiredAt) < new Date()) && (
+                <IconButton className="c-btn c-btn--primary add-ad-btn">
+                  PRIJAVI SE
+                </IconButton>
+              )}
+            </div>
           </div>
         </div>
       )}