New Responsive design

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 {