From 2379c08130cefc930b92653c840408579e339437 Mon Sep 17 00:00:00 2001
From: 0-Elia-0 <126093891+0-Elia-0@users.noreply.github.com>
Date: Mon, 15 Jan 2024 12:11:23 +0100
Subject: [PATCH 1/9] Collapsing actions on proposals in mobile view

---
 .../src/components/ProfessorProposalsList.js  | 43 +------------------
 frontend/src/style/index.css                  |  4 ++
 2 files changed, 6 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/ProfessorProposalsList.js b/frontend/src/components/ProfessorProposalsList.js
index 9637719..02b68a8 100644
--- a/frontend/src/components/ProfessorProposalsList.js
+++ b/frontend/src/components/ProfessorProposalsList.js
@@ -284,7 +284,7 @@ function ProposalRow({
         {format(parseISO(proposal.expiration_date), "dd/MM/yyyy")}
       </Col>
 
-      <Col md={2} xxl={1} className="d-none d-md-block">
+      <Col md={2} xxl={1} className="mt-3 mt-md-0 d-flex justify-content-center">
         <Dropdown>
           <Dropdown.Toggle
             variant="outline-dark"
@@ -326,46 +326,7 @@ function ProposalRow({
           </Dropdown.Menu>
         </Dropdown>
       </Col>
-
-      <Col
-        xs={12}
-        className="d-flex flex-row justify-content-center mt-3 mt-md-0 d-md-none"
-        id="proposal-detail-actions-copy"
-        onClick={() => {
-          navigate("/proposals/" + proposal.proposal_id + "/copy");
-        }}
-      >
-        <span className="d-flex align-items-center">
-          <FaCopy className="me-1" />
-          Copy
-        </span>
-      </Col>
-      <Col
-        xs={12}
-        className="d-flex flex-row justify-content-center mt-3 mt-md-0  d-md-none"
-        id="proposal-detail-actions-update"
-        onClick={() => {
-          navigate("/proposals/" + proposal.proposal_id + "/update");
-        }}
-      >
-        <span className="d-flex align-items-center">
-          <FaPen className="me-1" />
-          Update
-        </span>
-      </Col>
-      <Col
-        xs={12}
-        className="d-flex flex-row justify-content-center mt-3 mt-md-0  d-md-none"
-        id="proposal-detail-actions-archive"
-        onClick={() => {
-          setShowArchiveModal(true);
-        }}
-      >
-        <span className="d-flex align-items-center">
-          <FaArchive className="me-1" />
-          Archive
-        </span>
-      </Col>
+      
       <Col
         xs={12}
         md={1}
diff --git a/frontend/src/style/index.css b/frontend/src/style/index.css
index abe18a6..6760cfd 100644
--- a/frontend/src/style/index.css
+++ b/frontend/src/style/index.css
@@ -138,6 +138,9 @@ body {
 
 #show-proposal-detail,
 #proposal-detail-actions,
+#proposal-detail-actions-copy,
+#proposal-detail-actions-update,
+#proposal-detail-actions-archive,
 #show-details-proposal {
   margin-top: -2px;
   cursor: pointer;
@@ -189,6 +192,7 @@ body {
   border-color: #003576;
   color: #003576;
   background-color: white;
+  
 }
 
 #dropdown-proposal-actions:hover {

From e0e2fea814f6681144a95cc972f3ace94003e6f6 Mon Sep 17 00:00:00 2001
From: 0-Elia-0 <126093891+0-Elia-0@users.noreply.github.com>
Date: Mon, 15 Jan 2024 12:49:02 +0100
Subject: [PATCH 2/9] Graphical bug fix of bottom buttons in details page

---
 frontend/src/pages/ProposalDetailsPage.js | 138 +++++++++++-----------
 1 file changed, 72 insertions(+), 66 deletions(-)

diff --git a/frontend/src/pages/ProposalDetailsPage.js b/frontend/src/pages/ProposalDetailsPage.js
index e5ec605..862c29b 100644
--- a/frontend/src/pages/ProposalDetailsPage.js
+++ b/frontend/src/pages/ProposalDetailsPage.js
@@ -1043,68 +1043,71 @@ function ProposalDetailsPage({ mode }) {
                 </Col>
               </Row>
 
-              <Row>
-                <Col>
-                  <Button
-                    id="go-back"
-                    className="w-50"
-                    onClick={() => {
-                      navigate("/proposals");
-                    }}
-                  >
-                    Return
-                  </Button>
-                </Col>
-
-                {mode === "update" && loggedUser.role === 0 && (
-                  <Col className="d-flex justify-content-end">
-                    <Button
-                      id="add-proposal-btn"
-                      onClick={handleUpdateProposal}
-                    >
-                      Save
-                    </Button>
-                  </Col>
-                )}
-
-                {(mode === "add" || mode === "copy") &&
-                  loggedUser.role === 0 && (
-                    <Col className="d-flex justify-content-end">
-                      <Button
-                        id="add-proposal-btn"
-                        onClick={handleCreateProposal}
-                      >
-                        Create Proposal
-                      </Button>
-                    </Col>
-                  )}
-
-                {mode === "read" && loggedUser.role === 1 && (
-                  <Col className="d-flex justify-content-end">
-                    <ApplicationButton
-                      setErrMsg={setErrorMessage}
-                      proposalID={proposal_id}
-                      applicationStatusCallback={setApplyingState}
-                      setFileSent={setFileSent}
-                      setIsFile={setIsFile}
-                    />
-                  </Col>
-                )}
-
-                {!(mode === "update" && loggedUser.role === 0) &&
-                  !(mode === "add" || mode === "copy") &&
-                  !(mode === "read" && loggedUser.role === 1) && (
-                    <Col>
-                      <Dropdown className="w-100 d-flex justify-content-end">
-                        <Dropdown.Toggle
-                          variant="outline-dark"
-                          id="dropdown-detail-actions"
-                          className="w-50"
-                        >
-                          Actions
-                        </Dropdown.Toggle>
-
-                        <Dropdown.Menu>
+              <Row className="d-flex justify-content-between g-3 m-2">
+  <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
+    <Button
+      id="go-back"
+      className="w-100 h-100"
+      onClick={() => {
+        navigate("/proposals");
+      }}
+    >
+      Return
+    </Button>
+  </Col>
+
+  {mode === "update" && loggedUser.role === 0 && (
+    <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
+      <Button
+        id="add-proposal-btn"
+        className="w-100 h-100"
+        onClick={handleUpdateProposal}
+      >
+        Save
+      </Button>
+    </Col>
+  )}
+
+  {(mode === "add" || mode === "copy") && loggedUser.role === 0 && (
+    <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
+      <Button
+        id="add-proposal-btn"
+        className="w-100 h-100"
+        onClick={handleCreateProposal}
+      >
+        Create Proposal
+      </Button>
+    </Col>
+  )}
+
+  {mode === "read" && loggedUser.role === 1 && (
+    <Col xs={12} sm={6} md={4} lg={3} className="d-flex justify-content-end mb-2">
+      <ApplicationButton
+        setErrMsg={setErrorMessage}
+        proposalID={proposal_id}
+        applicationStatusCallback={setApplyingState}
+        setFileSent={setFileSent}
+        setIsFile={setIsFile}
+        className="w-100 h-100"
+      />
+    </Col>
+  )}
+
+  {!(mode === "update" && loggedUser.role === 0) &&
+    !(mode === "add" || mode === "copy") &&
+    !(mode === "read" && loggedUser.role === 1) && (
+      <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
+        <Dropdown className="w-100 d-flex justify-content-end">
+          <Dropdown.Toggle
+            variant="outline-dark"
+            id="dropdown-detail-actions"
+            className="w-100 h-100"
+          >
+            Actions
+          </Dropdown.Toggle>
+
+          
+          <Dropdown.Menu>
                           {mode === "read" && loggedUser.role === 0 && (
                             <Dropdown.Item
                               id="copy-proposal-btn"
@@ -1168,10 +1171,13 @@ function ProposalDetailsPage({ mode }) {
                               </Dropdown.Item>
                             )}
                         </Dropdown.Menu>
-                      </Dropdown>
-                    </Col>
-                  )}
-              </Row>
+          
+        </Dropdown>
+      </Col>
+    )}
+</Row>
+
+              
               <Modal show={showModal} onHide={handleClose} backdrop="static">
                 <Modal.Header closeButton>
                   <Modal.Title>Are you sure?</Modal.Title>

From e418b89d0e56460d4273d35f3a4f50fa2c2b4349 Mon Sep 17 00:00:00 2001
From: 0-Elia-0 <126093891+0-Elia-0@users.noreply.github.com>
Date: Mon, 15 Jan 2024 12:51:19 +0100
Subject: [PATCH 3/9] DetailsPage prettier formatting

---
 frontend/src/pages/ProposalDetailsPage.js | 148 +++++++++++-----------
 1 file changed, 76 insertions(+), 72 deletions(-)

diff --git a/frontend/src/pages/ProposalDetailsPage.js b/frontend/src/pages/ProposalDetailsPage.js
index 862c29b..2c20c17 100644
--- a/frontend/src/pages/ProposalDetailsPage.js
+++ b/frontend/src/pages/ProposalDetailsPage.js
@@ -297,7 +297,7 @@ function ProposalDetailsPage({ mode }) {
       case "read":
       case "update":
       case "copy":
-      // read, update and copy mode
+        // read, update and copy mode
         getProposalById(proposal_id)
           .then(async (res) => {
             let data = await res.json();
@@ -365,7 +365,7 @@ function ProposalDetailsPage({ mode }) {
             setUnauthorized(true);
             scrollToTarget();
           });
-          break;
+        break;
       case "add":
         setTitle("");
         setSupervisor(loggedUser.name + " " + loggedUser.surname);
@@ -1044,70 +1044,76 @@ function ProposalDetailsPage({ mode }) {
               </Row>
 
               <Row className="d-flex justify-content-between g-3 m-2">
-  <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
-    <Button
-      id="go-back"
-      className="w-100 h-100"
-      onClick={() => {
-        navigate("/proposals");
-      }}
-    >
-      Return
-    </Button>
-  </Col>
-
-  {mode === "update" && loggedUser.role === 0 && (
-    <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
-      <Button
-        id="add-proposal-btn"
-        className="w-100 h-100"
-        onClick={handleUpdateProposal}
-      >
-        Save
-      </Button>
-    </Col>
-  )}
-
-  {(mode === "add" || mode === "copy") && loggedUser.role === 0 && (
-    <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
-      <Button
-        id="add-proposal-btn"
-        className="w-100 h-100"
-        onClick={handleCreateProposal}
-      >
-        Create Proposal
-      </Button>
-    </Col>
-  )}
-
-  {mode === "read" && loggedUser.role === 1 && (
-    <Col xs={12} sm={6} md={4} lg={3} className="d-flex justify-content-end mb-2">
-      <ApplicationButton
-        setErrMsg={setErrorMessage}
-        proposalID={proposal_id}
-        applicationStatusCallback={setApplyingState}
-        setFileSent={setFileSent}
-        setIsFile={setIsFile}
-        className="w-100 h-100"
-      />
-    </Col>
-  )}
-
-  {!(mode === "update" && loggedUser.role === 0) &&
-    !(mode === "add" || mode === "copy") &&
-    !(mode === "read" && loggedUser.role === 1) && (
-      <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
-        <Dropdown className="w-100 d-flex justify-content-end">
-          <Dropdown.Toggle
-            variant="outline-dark"
-            id="dropdown-detail-actions"
-            className="w-100 h-100"
-          >
-            Actions
-          </Dropdown.Toggle>
-
-          
-          <Dropdown.Menu>
+                <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
+                  <Button
+                    id="go-back"
+                    className="w-100 h-100"
+                    onClick={() => {
+                      navigate("/proposals");
+                    }}
+                  >
+                    Return
+                  </Button>
+                </Col>
+
+                {mode === "update" && loggedUser.role === 0 && (
+                  <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
+                    <Button
+                      id="add-proposal-btn"
+                      className="w-100 h-100"
+                      onClick={handleUpdateProposal}
+                    >
+                      Save
+                    </Button>
+                  </Col>
+                )}
+
+                {(mode === "add" || mode === "copy") &&
+                  loggedUser.role === 0 && (
+                    <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
+                      <Button
+                        id="add-proposal-btn"
+                        className="w-100 h-100"
+                        onClick={handleCreateProposal}
+                      >
+                        Create Proposal
+                      </Button>
+                    </Col>
+                  )}
+
+                {mode === "read" && loggedUser.role === 1 && (
+                  <Col
+                    xs={12}
+                    sm={6}
+                    md={4}
+                    lg={3}
+                    className="d-flex justify-content-end mb-2"
+                  >
+                    <ApplicationButton
+                      setErrMsg={setErrorMessage}
+                      proposalID={proposal_id}
+                      applicationStatusCallback={setApplyingState}
+                      setFileSent={setFileSent}
+                      setIsFile={setIsFile}
+                      className="w-100 h-100"
+                    />
+                  </Col>
+                )}
+
+                {!(mode === "update" && loggedUser.role === 0) &&
+                  !(mode === "add" || mode === "copy") &&
+                  !(mode === "read" && loggedUser.role === 1) && (
+                    <Col xs={12} sm={6} md={4} lg={3} className="mb-2">
+                      <Dropdown className="w-100 d-flex justify-content-end">
+                        <Dropdown.Toggle
+                          variant="outline-dark"
+                          id="dropdown-detail-actions"
+                          className="w-100 h-100"
+                        >
+                          Actions
+                        </Dropdown.Toggle>
+
+                        <Dropdown.Menu>
                           {mode === "read" && loggedUser.role === 0 && (
                             <Dropdown.Item
                               id="copy-proposal-btn"
@@ -1171,13 +1177,11 @@ function ProposalDetailsPage({ mode }) {
                               </Dropdown.Item>
                             )}
                         </Dropdown.Menu>
-          
-        </Dropdown>
-      </Col>
-    )}
-</Row>
+                      </Dropdown>
+                    </Col>
+                  )}
+              </Row>
 
-              
               <Modal show={showModal} onHide={handleClose} backdrop="static">
                 <Modal.Header closeButton>
                   <Modal.Title>Are you sure?</Modal.Title>

From a8f7660bb77e44b0aa2eb9fdb2619331c770ffe8 Mon Sep 17 00:00:00 2001
From: 0-Elia-0 <126093891+0-Elia-0@users.noreply.github.com>
Date: Mon, 15 Jan 2024 13:09:29 +0100
Subject: [PATCH 4/9] Upgrading the user experience and visibility of type and
 level fields in non reading ode in details page for proposals

---
 frontend/src/pages/ProposalDetailsPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ProposalDetailsPage.js b/frontend/src/pages/ProposalDetailsPage.js
index 2c20c17..7be02b4 100644
--- a/frontend/src/pages/ProposalDetailsPage.js
+++ b/frontend/src/pages/ProposalDetailsPage.js
@@ -637,7 +637,7 @@ function ProposalDetailsPage({ mode }) {
                 </Col>
               </Row>
               <Row>
-                <Col>
+                <Col xs={mode === "read" ? "6" : "12"} md={"6"} className={mode === "read" ? "pe-1" : "mb-1 mb-md-0 me-0"}>
                   <Card className="h-100">
                     {mode === "read" ? (
                       <Card.Body>
@@ -674,7 +674,7 @@ function ProposalDetailsPage({ mode }) {
                     )}
                   </Card>
                 </Col>
-                <Col>
+                <Col xs={mode === "read" ? "6" : "12"} md={"6"} className={mode === "read" ? "ps-1" : "mb-1 mb-md-0 me-0"}>
                   <Card className="h-100">
                     <Card.Body>
                       <Card.Title>

From c06ad6ccb28a39c11daca9a2c2b903f276f0c135 Mon Sep 17 00:00:00 2001
From: 0-Elia-0 <126093891+0-Elia-0@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:24:08 +0100
Subject: [PATCH 5/9] Keyword field graphical bug fix

---
 frontend/src/pages/ProposalDetailsPage.js | 8 ++++----
 frontend/src/style/ProposalDetails.css    | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/ProposalDetailsPage.js b/frontend/src/pages/ProposalDetailsPage.js
index 7be02b4..fc0612a 100644
--- a/frontend/src/pages/ProposalDetailsPage.js
+++ b/frontend/src/pages/ProposalDetailsPage.js
@@ -674,7 +674,7 @@ function ProposalDetailsPage({ mode }) {
                     )}
                   </Card>
                 </Col>
-                <Col xs={mode === "read" ? "6" : "12"} md={"6"} className={mode === "read" ? "ps-1" : "mb-1 mb-md-0 me-0"}>
+                <Col xs={mode === "read" ? "6" : "12"} md={"6"} className={mode === "read" ? "ps-1" : "me-0"}>
                   <Card className="h-100">
                     <Card.Body>
                       <Card.Title>
@@ -913,7 +913,7 @@ function ProposalDetailsPage({ mode }) {
                         </Card.Title>
                         <Form.Group>
                           <div className="text-plus">
-                            <Col xs={10}>
+                            <Col>
                               <Form.Control
                                 as={"input"}
                                 name="proposal-keywords"
@@ -925,7 +925,7 @@ function ProposalDetailsPage({ mode }) {
                                 }}
                               />
                             </Col>
-                            <Col>
+              
                               <Button
                                 id="add-keyword-btn"
                                 onClick={() => {
@@ -960,7 +960,7 @@ function ProposalDetailsPage({ mode }) {
                               >
                                 Add
                               </Button>
-                            </Col>
+                            
                           </div>
                         </Form.Group>
                         <ListGroup id="proposal-keywords-list" className="mt-2">
diff --git a/frontend/src/style/ProposalDetails.css b/frontend/src/style/ProposalDetails.css
index 8796b9d..a8ac249 100644
--- a/frontend/src/style/ProposalDetails.css
+++ b/frontend/src/style/ProposalDetails.css
@@ -106,9 +106,10 @@
 }
 
 .text-plus {
+    
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
     margin-bottom: 6px;
 }

From ff85edb91fa9d3fbb4343913d62177adb37f14cf Mon Sep 17 00:00:00 2001
From: 0-Elia-0 <126093891+0-Elia-0@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:34:29 +0100
Subject: [PATCH 6/9] Applications list mobile graphical bug fix

---
 frontend/src/pages/ApplicationList.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ApplicationList.js b/frontend/src/pages/ApplicationList.js
index bb13dbe..f0f40ec 100644
--- a/frontend/src/pages/ApplicationList.js
+++ b/frontend/src/pages/ApplicationList.js
@@ -71,13 +71,13 @@ function ApplicationList() {
                                                     <Card key={application.application_id} className='my-3'>
                                                         <Card.Body>
                                                             <Row className="align-items-center">
-                                                                <Col>
+                                                                <Col xs={12} sm={6}>
                                                                     <strong>
                                                                         {application.name} {application.surname}
                                                                     </strong>
                                                                     {' '} has applied for this thesis on {formattedDate(application.application_date)}
                                                                 </Col>
-                                                                <Col className="text-end">
+                                                                <Col xs={12} sm={6} className="text-end mt-2 mt-sm-3 mt-sm-0 d-flex justify-content-center align-items-start d-sm-block">
                                                                     <Button variant="outline-secondary" className='text-end show-details-btn'
                                                                         onClick={()=>navigate(`/applications/${application.application_id}`)}>
                                                                             Show details

From ab7b8cf98665b4ba9f6f52655ec7a2317c75b9fb Mon Sep 17 00:00:00 2001
From: 0-Elia-0 <126093891+0-Elia-0@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:38:03 +0100
Subject: [PATCH 7/9] Appliction detail mobile graphical bug fix

---
 frontend/src/pages/ApplicationDetailsPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ApplicationDetailsPage.js b/frontend/src/pages/ApplicationDetailsPage.js
index 120d4b0..7aae5b9 100644
--- a/frontend/src/pages/ApplicationDetailsPage.js
+++ b/frontend/src/pages/ApplicationDetailsPage.js
@@ -141,10 +141,10 @@ function ApplicationDetails() {
                         <ProposalInfo infoProposal={infoProposal} />
 
                         <Row className="py-1 my-2">
-                            <Col className="text-start" >
+                            <Col xs={4} className="text-start" >
                                 <Button variant="outline-secondary" onClick={() => navigate("/applications")}> Return </Button>
                             </Col>
-                            <Col className="text-end" >
+                            <Col xs={8} className="text-end" >
                                 <Button id="accept-application" className="mx-2" variant="outline-success" onClick={() => handleButton("Accepted")}>Accept</Button>
                                 <Button id="reject-application" className="mx-2" variant="outline-danger" onClick={() => handleButton("Rejected")}>Reject</Button>
                             </Col>

From 4f423e2601c1b35c9d8b205347381a79a1e6a12f Mon Sep 17 00:00:00 2001
From: 0-Elia-0 <126093891+0-Elia-0@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:49:43 +0100
Subject: [PATCH 8/9] Application details graphical fix

---
 frontend/src/pages/ApplicationDetailsPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/ApplicationDetailsPage.js b/frontend/src/pages/ApplicationDetailsPage.js
index 7aae5b9..cc82997 100644
--- a/frontend/src/pages/ApplicationDetailsPage.js
+++ b/frontend/src/pages/ApplicationDetailsPage.js
@@ -449,7 +449,7 @@ ProposalInfo.propTypes = {
 function RowInfo(props) {
 
     return (
-        <Row className="fs-5 mx-4 py-1">
+        <Row className="fs-5 mx-0 mx-sm-4 py-1">
             <Col md={6} xs={12}>
                 <strong>{props.title} </strong>:
             </Col>

From eeb9da8f30056b74c89a18d2696d3b56b59a5589 Mon Sep 17 00:00:00 2001
From: 0-Elia-0 <126093891+0-Elia-0@users.noreply.github.com>
Date: Mon, 15 Jan 2024 17:09:39 +0100
Subject: [PATCH 9/9] Small graphical bug fix

---
 frontend/src/components/ProposalsSearchArea.js | 2 +-
 frontend/src/pages/ThesisRequestDetailsPage.js | 7 ++++---
 frontend/src/style/ProposalDetails.css         | 5 +++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ProposalsSearchArea.js b/frontend/src/components/ProposalsSearchArea.js
index af6c61e..6169313 100644
--- a/frontend/src/components/ProposalsSearchArea.js
+++ b/frontend/src/components/ProposalsSearchArea.js
@@ -247,7 +247,7 @@ function ProposalsSearchArea(props) {
                             </Alert>
                         }
 
-                        <Form onSubmit={handleSubmit} className="mb-3" style={{ width: "50vw" }} validated={false}>
+                        <Form onSubmit={handleSubmit} className="mb-3"  validated={false}>
                             <Row className="align-items-end">
                                 <Col xs={12} md={2}>
                                     <div className='m-2'>Filter by:</div>
diff --git a/frontend/src/pages/ThesisRequestDetailsPage.js b/frontend/src/pages/ThesisRequestDetailsPage.js
index 1ca0087..3a6002a 100644
--- a/frontend/src/pages/ThesisRequestDetailsPage.js
+++ b/frontend/src/pages/ThesisRequestDetailsPage.js
@@ -203,14 +203,15 @@ function ThesisRequestDetailsPage() {
                             </Col>
                         </Row>
                         <Row>
-                            <Col>
-                                <Button id="go-back" onClick={() => { navigate('/') }}>
+                            <Col xs={12} sm={6} className='my-2'>
+                                <Button id="go-back" className="w-100" onClick={() => { navigate('/') }}>
                                     Return
                                 </Button>
                             </Col>
-                            <Col className={"d-flex flex-row-reverse"}>
+                            <Col xs={12} sm={6} className="my-2">
                                 <Button
                                     id="add-request-btn"
+                                    className="w-100"
                                     onClick={handleCreateRequest}>
                                     Create Request
                                 </Button>
diff --git a/frontend/src/style/ProposalDetails.css b/frontend/src/style/ProposalDetails.css
index a8ac249..70f4292 100644
--- a/frontend/src/style/ProposalDetails.css
+++ b/frontend/src/style/ProposalDetails.css
@@ -59,9 +59,10 @@
 
 #add-proposal-btn,
 #add-keyword-btn,
-#add-group-btn {
+#add-group-btn,
+#add-request-btn {
     background-color: #5bc0de;
-    border-color: #5bc0de;
+    border: 2px solid #5bc0de;
 }
 
 #add-proposal-btn:hover,