style(DiaryParticipantsPanel, Home): enhance layout and responsiveness

- Added horizontal overflow to the diary sidebar for better content management.
- Updated participant row layout to use CSS grid for improved alignment and spacing.
- Adjusted participant name styling to prevent overflow and ensure text is truncated with ellipsis.
- Introduced new authentication action buttons in Home.vue for better user access to registration and login.
- Enhanced mobile responsiveness of the Home view with updated flex and grid properties.

frontend/src/components/DiaryParticipantsPanel.vue

@@ -147,6 +147,7 @@ export default {
 .diary-sidebar-section {
     margin-top: 1rem;
     min-width: 0;
+    overflow-x: auto;
 }
 
 .participant-toolbar {
@@ -216,24 +217,34 @@ export default {
 }
 
 .participant-row {
+    display: grid;
+    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.55rem;
     padding: 0.55rem 0;
+    min-width: 0;
 }
 
 .checkbox-label {
     margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .participant-name {
     min-width: 0;
-    word-break: break-word;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .participant-actions {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: 0.35rem;
-    min-width: 0;
+    min-width: max-content;
 }
 
 .member-group-select {
@@ -273,18 +284,17 @@ export default {
 
 @media (max-width: 768px) {
     .participant-row {
-        align-items: flex-start;
-        flex-wrap: wrap;
+        grid-template-columns: 1.75rem minmax(10rem, 1fr) auto;
+        align-items: center;
     }
 
     .participant-name {
-        flex: 1 1 calc(100% - 2rem);
+        min-width: 10rem;
     }
 
     .participant-actions {
-        width: 100%;
-        margin-left: 1.9rem;
-        justify-content: flex-start;
+        margin-left: 0;
+        justify-content: flex-end;
     }
 
     .member-group-select,

frontend/src/views/Home.vue

@@ -7,6 +7,16 @@
         </div>
         <div class="card-body">
           <div v-if="!isAuthenticated" class="marketing">
+            <div class="auth-actions auth-actions-top">
+              <router-link to="/register" class="btn-primary">
+                <span class="btn-icon">🚀</span>
+                {{ $t('home.startFree') }}
+              </router-link>
+              <router-link to="/login" class="btn-secondary">
+                <span class="btn-icon">🔐</span>
+                {{ $t('navigation.login') }}
+              </router-link>
+            </div>
             <section class="hero">
               <h1 class="hero-title">{{ $t('home.heroTitle') }}</h1>
               <p class="hero-subtitle">
@@ -546,6 +556,10 @@ export default {
   justify-content: center;
 }
 
+.auth-actions-top {
+  justify-content: flex-end;
+}
+
 .user-avatar {
   width: 64px;
   height: 64px;
@@ -749,6 +763,10 @@ export default {
     width: 100%;
     max-width: none;
   }
+
+  .auth-actions-top {
+    justify-content: stretch;
+  }
   
   .btn-primary, .btn-secondary {
     width: 100%;