bug-fixes

src/lib/components/layout/Header.svelte

@@ -62,4 +62,22 @@
   header {
     max-width: 100%;
   }
+  
+  nav {
+    min-width: 0; /* Allow flex items to shrink */
+  }
+  
+  @media (max-width: 768px) {
+    nav {
+      padding: 0.5rem 0.75rem; /* Smaller padding on mobile */
+    }
+    
+    nav a, nav button {
+      font-size: 0.875rem; /* Slightly smaller text on mobile */
+    }
+    
+    nav .text-xl {
+      font-size: 1.125rem; /* Smaller logo on mobile */
+    }
+  }
 </style>

src/lib/components/preferences/UserPreferences.svelte

@@ -284,8 +284,25 @@
 
   .preference-options {
     display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
   }
+  
+  @media (max-width: 768px) {
+    .preferences-content {
+      width: 95%;
+      max-height: 90vh;
+    }
+    
+    .preference-options {
+      gap: 0.375rem;
+    }
+    
+    .preference-option {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.875rem;
+    }
+  }
 
   .preference-option {
     padding: 0.5rem 1rem;

src/lib/modules/feed/FeedPost.svelte

@@ -156,7 +156,7 @@
   <div class="card-content" class:expanded bind:this={contentElement}>
     {#if isReply()}
       <ReplyContext 
-        {parentEvent} 
+        parentEvent={parentEvent || undefined} 
         parentEventId={getReplyEventId() || undefined}
         targetId={parentEvent ? `event-${parentEvent.id}` : undefined}
         onParentLoaded={onParentLoaded}
@@ -187,7 +187,7 @@
       <MarkdownRenderer content={post.content} />
     </div>
 
-    <div class="post-actions flex items-center gap-4">
+    <div class="post-actions flex flex-wrap items-center gap-2 sm:gap-4">
       <FeedReactionButtons event={post} />
       {#if onReply}
         <button

src/lib/modules/reactions/FeedReactionButtons.svelte

@@ -359,6 +359,17 @@
   .Feed-reaction-buttons {
     margin-top: 0.5rem;
   }
+  
+  @media (max-width: 768px) {
+    .Feed-reaction-buttons {
+      gap: 0.375rem; /* Smaller gap on mobile */
+    }
+    
+    .reaction-btn {
+      padding: 0.25rem 0.5rem; /* Smaller padding on mobile */
+      font-size: 0.8125rem; /* Slightly smaller text */
+    }
+  }
 
   .reaction-btn {
     padding: 0.25rem 0.75rem;