Finished partly feature 710

src/components/Cards/OfferCard/DeleteOffer/DeleteOffer.js

 import {
   fetchOffers,
   fetchProfileOffers,
+  pinOffer,
   removeOffer,
 } from "../../../../store/actions/offers/offersActions";
 import { Trans, useTranslation } from "react-i18next";
   };
 
   const removeOfferHandler = () => {
-    dispatch(removeOffer({ offerId, handleApiResponseSuccess }));
+    if (props.pin) dispatch(pinOffer({ offerId: props.offer?._id, handleApiResponseSuccess }));
+    else dispatch(removeOffer({ offerId, handleApiResponseSuccess }));
     props.closeModalHandler();
     if (history.location.pathname.includes("proizvodi")) {
       history.goBack();

src/components/Cards/OfferCard/OfferCard.js

             <></>
           )}
           <ButtonsContainer vertical={props.vertical}>
+            {props?.offer?.pinned && (
+              <PinIcon vertical={props.vertical} isMyOffer={props.isMyOffer} />
+            )}
             {props.isMyOffer ? (
               <>
                 <RemoveIconContainer
                 <PinOutlinedIcon />
               </PinIconContainer>
             )}
-            {props?.offer?.pinned && (
-              <PinIcon vertical={props.vertical} isMyOffer={props.isMyOffer} />
-            )}
           </ButtonsContainer>
         </OfferFlexContainer>
       </OfferCardContainer>

src/components/Cards/OfferCard/OfferCard.styled.js

   text-overflow: ellipsis;
   max-height: 33px;
   margin-bottom: 28px;
+  max-width: calc(100% - 200px);
   @media (max-width: 550px) {
     width: 100%;
     font-size: 18px;
   }
 `;
 export const PinIcon = styled(Pin)`
-  position: absolute;
-  top: 20px;
-  right: 68px;
-  ${(props) =>
-    props.isMyOffer &&
-    `
-    right: 134px;
-    top: 26px;
-    @media (max-width: 600px) {
-      top: 20px;
-      right: 94px;
-    }
-  `}
-  @media (max-width: 600px) {
-    top: 20px;
-    right: 55px;
-    ${(props) =>
-      props.vertical &&
-      `
-      top: initial;
-      bottom: 18px;
-      right: 18px;
-    `}
-  }
+  position: relative;
+  top: 6px;
 `;
 export const CategoryIcon = styled(Category)`
   width: 14px;

src/layouts/ProfileLayout/ProfileLayout.js

     >
       {props.children}
       <ContentRightCardContainer container spacing={2}>
-        <Content sm={12} md={8} lg={9} item>{props.content}</Content>
-        <RightCard sm={0} md={4} lg={3} item singleOffer={props.singleOffer} profile={props.profile}>
+        <Content sm={12} md={8} lg={8} xl={9} item>{props.content}</Content>
+        <RightCard sm={0} md={4} lg={4} xl={3} item singleOffer={props.singleOffer} profile={props.profile}>
           {props.rightCard}
         </RightCard>
       </ContentRightCardContainer>

src/request/apiEndpoints.js

     locations: "locations",
     mineOffers: "users",
     removeOffer: "/users/{userId}/offers/{offerId}",
-    pinOffer: "offers/{id}/pin",
+    pinOffer: "admin/offers/{id}/pin",
   },
   chat: {
     getChat: "chats",