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,17 +17,21 @@
   <h1>
     {{location.location}}
   </h1>
-  <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>
-    </h3>
-    <div class="distance">
-      <h4 *ngIf="waypoint.distance && !positionNotFound">{{translations.distance}}{{waypoint.distance}} km</h4>
-      <h4 *ngIf="positionNotFound">{{translations.positionNotFoundErrorMessage}}</h4>
+  <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>
+        </h3>
+        <div class="distance">
+          <h4 *ngIf="waypoint.distance && !positionNotFound">{{translations.distance}}{{waypoint.distance}} km</h4>
+          <h4 *ngIf="positionNotFound">{{translations.positionNotFoundErrorMessage}}</h4>
+        </div>
+
+      </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 class="radial-progress text-primary" style="--value:70; --size:12rem; --thickness: 1.5rem;"><span style="font-size: 20pt">70%</span></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}}
@@ -169,7 +169,7 @@
 
       <button type="submit">{{translations.addWaypointButton}}</button>
     </form>
-    <button (click)="closeWaypointForm()">{{translations.close}}</button>
+    <button (click)="closeWaypointForm()" >{{translations.close}}</button>
   </div>
 </div>