css changes

src/app/component/list/list.component.css

@@ -15,8 +15,9 @@ h4 {
 .distance {
   font-size: 20px;
   border-bottom: 2px solid #E9E92D;
-  width: 35%;
-  padding-bottom: 20px;
+  width: 100%;
+  padding-top: 20px;
+  padding-bottom: 10px;
   height: 60px;
 }
 
@@ -37,3 +38,17 @@ h4 {
   position: absolute;
   right: 0;
 }
+
+.left {
+  width: 40%;
+  margin-right: 20px;
+}
+.right {
+  width: 60%;
+  display: flex;
+  justify-items: center;
+}
+.container2 {
+  display: flex;
+  flex-direction: row;
+}

src/app/component/list/list.component.html

@@ -17,6 +17,8 @@
   <h1>
     {{location.location}}
   </h1>
+  <div class="container2">
+    <div class="left">
       <div *ngFor="let waypoint of waypoints, let i = index" class="row">
         <h3>
           <a class="link link-primary" href="location/{{location.location}}/{{waypoint.id}}"> {{waypoint.name}}</a>
@@ -27,7 +29,9 @@
         </div>
 
       </div>
-
-  <div class="radial-progress text-primary" style="--value:70; --size:12rem; --thickness: 1.5rem;"><span style="font-size: 20pt">70%</span></div>
-
+    </div>
+    <div class="right">
+      <div class="radial-progress text-primary" style="--value:70; --size:12rem; --thickness: 1.5rem;"><span style="font-size: 20pt">70%</span></div>
+    </div>
+  </div>
 </div>

src/app/component/management/management.component.css

@@ -37,7 +37,7 @@ th {
   background-color: rgba(0, 0, 0, 0.4);
   display: flex;
   justify-content: center;
-  align-items: center;
+  margin-bottom: 30px;
 }
 
 .form-container {

src/app/component/management/management.component.html

@@ -123,7 +123,7 @@
   </tbody>
 </table>
 
-<div class="button-container">
+<div class="button-container" style="margin-bottom: 30px">
   <button (click)="openWaypointForm()"
           class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
           style="margin: 10px 10% 0 0;">{{translations.add}}