header migliorato per funzionare nella pagina detail

src/app/app.component.css

@@ -1,9 +1 @@
-.button-container{
-    display: flex;
-    justify-content: space-between;
-}
 
-#logout{
-  justify-self: flex-end;
-  margin: 5px;
-}

src/app/app.component.html

@@ -1,6 +1,6 @@
-<div class="button-container">
+<div class="button-container sticky z-50 flex gap-1 justify-end p-2">
   <div class="dropdown dropdown-hover" id="translate">
-    <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100 hover:bg-neutral hover:text-base-100"
+    <label tabindex="0" class="btn bg-black border-neutral text-base-100 hover:bg-neutral hover:text-base-100"
            id="translateLabel">{{homeTranslations.translate}}</label>
     <ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52 bg-base-100" id="translateUl">
       <li (click)="switchLanguage('DE')"><a>DE</a></li>
@@ -9,18 +9,18 @@
       <li (click)="switchLanguage('EN')"><a>EN</a></li>
     </ul>
   </div>
-  <div>
   <button (click)="goHome()"
-            class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary" style="margin-right: 5px">
+          class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary">
     <br>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+         class="w-6 h-6">
+      <path stroke-linecap="round" stroke-linejoin="round"
+            d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
     </svg>
     <br>
 
   </button>
-    <button (click)="clearAllCookies()" class="btn btn-active btn-ghost hover:btn-error" id="logout">Logout</button>
+  <button (click)="clearAllCookies()" class="btn btn-active hover:btn-error" id="logout">Logout</button>
-  </div>
 
 </div>
 <router-outlet></router-outlet>

src/app/component/detail/detail.component.html

@@ -8,7 +8,7 @@
             [src]='embed | safe' allowfullscreen></iframe>
     <img *ngIf="!embed" [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'" alt="" class="my-auto w-screen opacity-5">
   </div>
-    <div *ngIf="embed && !this.myModal.checked" class="card bg-white sm:w-fit md:w-3/4 lg:w-1/4  m-4 p-2 z-10 absolute bottom-0 bg-gray-100 bg-opacity-65 backdrop-filter backdrop-blur-lg border-2 border-gray-300 shadow-4xl rounded-sm overflow-y-auto pointer-events-auto">
+    <div *ngIf="embed && !this.myModal.checked" class="card bg-white sm:w-fit md:w-3/4 lg:w-2/4  m-4 p-2 z-10 absolute bottom-0 bg-gray-100 bg-opacity-65 backdrop-filter backdrop-blur-lg border-2 border-gray-300 shadow-4xl rounded-sm overflow-y-auto pointer-events-auto">
       <figure><img [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'"
                    [alt]="waypointInfo?.locationName ? waypointInfo.locationName : ''"/></figure>
       <div class="card-body">