New Responsive design

public/css/app.css

@@ -41,31 +41,29 @@ h1, h2, h3, h4, h5, h6 {
     height: 80px;
     align-items: center;
     justify-content: space-between;
-    width: calc(100% - 40px);
+    width: 100%;
 }
 
 .header .anonymous-actions {
     position: relative;
-    right: calc(-100% + 330px);
-    width: 350px;
+    right: calc(-100% + 300px);
+    width: 450px;
     overflow: hidden;
     border-radius: 50px 0 0 50px;
-    background-color: #FAFAFB !important;
     text-align: right;
     padding: 10px;
-    top: -75px;
+    top: -20px;
 }
 
 .header .user-info {
     position: relative;
-    right: calc(-100% + 275px);
-    width: 295px;
+    right: calc(-100% + 190px);
+    width: 195px;
     overflow: hidden;
     border-radius: 50px 0 0 50px;
-    background-color: #FAFAFB !important;
     text-align: right;
     padding: 10px;
-    top: -75px;
+    top: -20px;
 }
 
 .header .left-side {

resources/js/layouts/AppLayout.vue

@@ -84,8 +84,8 @@ const props = defineProps({
                     <label id="show_username" v-if="globalProps.user !== null">Willkommen, {{ globalProps.user.nicename }}</label>
                 </div>
 
-                <div class="header-actions">
-                    <div class="user-info" v-if="globalProps.user !== null">
+                <div class="header-actions" v-if="globalProps.user !== null">
+                    <div class="user-info">
                         <a href="/messages" class="header-link-anonymous" title="Meine Nachrichten">
                             <Icon name="envelope" />
                         </a>
@@ -96,11 +96,14 @@ const props = defineProps({
                             <Icon name="lock" />
                         </a>
                     </div>
-                    <div class="anonymous-actions" v-else>
+                </div>
+                <div class="anonymous-header-actions-mark" v-else>
+                    <div class="anonymous-actions">
                         <a href="/register" class="header-link-anonymous">Registrieren</a>
                         <a href="/login" class="header-link-anonymous">Anmelden</a>
                     </div>
                 </div>
+
             </div>
 
             <!-- Flexbox: Sidebar + Content -->
@@ -208,10 +211,18 @@ const props = defineProps({
     text-overflow: ellipsis;
 }
 
+.anonymous-header-actions-mark {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 300px;
+}
+
 .header-actions {
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    width: 200px;
 }
 
 .header-link-anonymous,
@@ -457,12 +468,18 @@ const props = defineProps({
         flex-direction: column;
         gap: 2px;
         font-size: 0.8rem;
+        width: 250px !important;
+    }
+
+    .anonymous-header-actions-mark {
+        width: 100%;
     }
 
     .header-link-anonymous,
     .header-link-anonymous-logout {
         padding: 6px 8px;
         font-size: 0.75rem;
+        display: inline;
     }
 
     .footer-hide-mobile {