fix: programme badge in proposal details page

francesco-velluto · Jan 25, 2024 · 1ccb363 · 1ccb363
1 parent 54c909c
commit 1ccb363
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/frontend/src/pages/ProposalDetailsPage.js b/frontend/src/pages/ProposalDetailsPage.js
@@ -445,7 +445,7 @@ function ProposalDetailsPage({ mode }) {
           </Alert>
         </Container>
       )
-      
+
       : (
         <Container className="proposal-details-container" fluid>
           <Form>
@@ -749,8 +749,8 @@ function ProposalDetailsPage({ mode }) {
                           name="proposal-programmes"
                         >
                           {programmes.map((programme, index) => (
-                            <Badge key={index} bg="">
-                              {programme.title_degree}
+                            <Badge className="programme-badge" key={index} bg="">
+                              <span>{programme.title_degree}</span>
                             </Badge>
                           ))}
                         </Card.Text>

diff --git a/frontend/src/style/index.css b/frontend/src/style/index.css
@@ -298,7 +298,20 @@ body {
   background-color: #003576;
 }
 
+@media (max-width: 767px) {
+  .programme-badge {
+    max-width: 220px; /* Set your desired maximum width */
+    display: inline-block; /* Make sure the width constraint is applied */
+    word-wrap: break-word;
+  }
 
+  .programme-badge span {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
 /*************************/
 /* ARCHIVE MODAL *******/
 /*************************/