fixed code on description page

src/components/Candidate/Candidate.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useHistory, useParams, Link } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { currentCandidate, selectCurrentCandidate } from '../../redux/outstaffingSlice';
 import style from './Candidate.module.css';
@@ -113,9 +113,11 @@ const Candidate = () => {
                 ) : (
                   <p className={style.candidate__textSecondary}>Описание отсутствует...</p>
                 )}
+                <Link to={'/form'}>
                   <button type="submit" className={style.candidate__btn}>
                     Выбрать к собеседованию
                   </button>
+                </Link>
                 <SectionSkills skillsArr={skillValues} />
               </div>
             </div>

src/components/Candidate/Candidate.module.css

@@ -222,6 +222,7 @@
   margin-top: 60px;
   border-radius: 10px;
   margin-bottom: 60px;
+  flex-wrap: wrap;
 }
 
 @media (max-width: 575.98px) {

src/components/Description/Description.js

@@ -43,11 +43,13 @@ const Description = ({ onLoadMore }) => {
                   </div>
                   <div className="col-xl-2"></div>
                   <div className="col-12 col-xl-6">
+                    <div className={style.description__spBox}>
                       {el.skillValues.map((e) => (
                         <span key={e.id} className={style.description__sp}>
                           {e.skill.name}
                         </span>
                       ))}
+                    </div>
                     <img className={style.description__rectangle} src={rectangle} alt="" />
                   </div>
                   <div className="col-xl-4"></div>
@@ -76,11 +78,13 @@ const Description = ({ onLoadMore }) => {
                   </div>
                   <div className="col-xl-2"></div>
                   <div className="col-12 col-xl-6">
+                    <div className={style.description__spBox}>
                       {el.skillValues.map((e) => (
                         <span key={e.id} className={style.description__sp}>
                           {e.skill.name}
                         </span>
                       ))}
+                    </div>
                     <img className={style.description__rectangle} src={rectangle} alt="" />
                   </div>
                   <div className="col-xl-4"></div>

src/components/Description/Description.module.css

@@ -82,6 +82,7 @@
   line-height: 24px;
   text-align: left;
   line-height: 28px;
+  word-wrap: break-word;
 }
 
 .description__text > p:first-child {
@@ -132,10 +133,10 @@
   .description__button {
     width: 220px;
     height: 50px;
-    position: absolute;
-    bottom: -170px;
     z-index: 5;
     margin-left: 85px;
+    margin-top: 40px;
+    margin-bottom: 40px;
   }
 }
 
@@ -151,6 +152,10 @@
   }
 }
 
+.description__spBox {
+  padding: 5px;
+}
+
 .description__sp {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.7em;
@@ -161,6 +166,7 @@
   line-height: 36px;
   margin-top: 20px;
   margin-left: 10px;
+  word-wrap: break-word;
 }
 
 @media (max-width: 575.98px) {

src/components/Home/Home.js

@@ -6,7 +6,7 @@ import { fetchProfile, fetchSkills } from '../../server/server';
 import { profiles, tags } from '../../redux/outstaffingSlice';
 
 const Home = () => {
-  const [index, setIndex] = useState(2);
+  const [index, setIndex] = useState(4);
 
   const dispatch = useDispatch();