fix custom feed length

src/components/ComicCard.astro

@@ -71,14 +71,14 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
           <div class="relative mt-3" aria-label="Comic genres">
             <div class="flex flex-wrap gap-2">
               {genreNames.slice(0, 3).map(genre => (
-                <span class="bg-hover text-primary/80 px-3 py-1 rounded-full text-xs font-medium truncate transition-all hover:bg-hover/80" title={genre}>
+                <span class="bg-hover text-primary/80 px-3 py-1 rounded-full text-xs font-medium truncate">
                   {genre}
                 </span>
               ))}
               {genreNames.length > 3 && (
                 <button 
                   type="button"
-                  class="expand-tags-btn bg-hover text-primary/80 px-3 py-1 rounded-full text-xs font-medium hover:bg-hover/80 cursor-pointer transition-colors"
+                  class="expand-tags-btn bg-hover text-primary/80 px-3 py-1 rounded-full text-xs font-medium hover:bg-hover/80 hover:scale-105 cursor-pointer transition-all duration-200 ease-in-out"
                   aria-expanded="false"
                   data-comic-id={comic.id}
                 >
@@ -95,7 +95,7 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
               >
                 <div class="flex flex-wrap gap-2">
                   {genreNames.slice(3).map(genre => (
-                    <span class="bg-hover text-primary/80 px-3 py-1 rounded-full text-xs font-medium truncate transition-all hover:bg-hover/80" title={genre}>
+                    <span class="bg-hover text-primary/80 px-3 py-1 rounded-full text-xs font-medium truncate">
                       {genre}
                     </span>
                   ))}

src/components/GenreFilter.astro

@@ -52,7 +52,7 @@ const genres = await fetchGenres();
             <input
               type="checkbox"
               value={genre.id}
-              class="genre-checkbox"
+              class="genre-checkbox w-4 h-4 rounded border border-hover/30 bg-primary checked:bg-accent transition-all duration-200 ease-in-out"
             />
             <span class="text-sm">{genre.name}</span>
           </label>

src/components/SlugInput.astro

@@ -50,9 +50,9 @@ const languages = [
   <div id="slug-list" class="space-y-2">
     {currentSlugs.map(slug => (
       <div class="flex items-center justify-between p-3 bg-primary rounded-lg border border-hover/30" data-slug={slug}>
-        <span class="text-primary">{slug}</span>
+        <span class="text-primary truncate pr-2">{slug}</span>
         <button 
-          class="text-red-500 hover:text-red-600 transition-colors"
+          class="text-red-500 hover:text-red-600 transition-colors flex-shrink-0 pl-2"
           data-remove={slug}
         >
           <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -139,14 +139,14 @@ const languages = [
         const data = await response.json();
         
         const div = document.createElement('div');
-        div.className = 'flex items-center gap-4 p-4 bg-primary rounded-lg border border-hover/30 hover:border-accent/50 transition-all duration-300 group relative';
+        div.className = 'flex items-center gap-4 p-4 bg-primary rounded-lg border border-hover/30 hover:border-accent/50 transition-all duration-300 group relative overflow-hidden';
         
         // Add a link to the comic
         const link = document.createElement('a');
         link.href = `https://comick.io/comic/${slug}`;
         link.target = '_blank';
         link.rel = 'noopener noreferrer';
-        link.className = 'flex items-center gap-4 flex-1';
+        link.className = 'flex items-center gap-4 flex-1 min-w-0';
         
         // Handle cover image
         if (data.comic?.md_covers?.[0]?.b2key) {
@@ -168,7 +168,7 @@ const languages = [
         }
         
         const info = document.createElement('div');
-        info.className = 'flex-1 min-w-0';
+        info.className = 'flex-1 min-w-0 truncate';
         info.innerHTML = `
           <div class="font-medium text-lg truncate group-hover:text-accent transition-colors">
             ${data.comic?.title || slug}
@@ -185,7 +185,7 @@ const languages = [
         div.appendChild(link);
         
         const removeBtn = document.createElement('button');
-        removeBtn.className = 'text-red-500 hover:text-red-600 transition-colors p-2 hover:bg-red-500/10 rounded-full flex-shrink-0 relative z-10';
+        removeBtn.className = 'text-red-500 hover:text-red-600 transition-colors p-2 hover:bg-red-500/10 rounded-full flex-shrink-0';
         removeBtn.innerHTML = `
           <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M6 18L18 6M6 6l12 12"></path>

src/layouts/Layout.astro

@@ -70,7 +70,7 @@ const announcement = {
         <div class="relative" id="settings-dropdown">
           <button
             id="settings-button"
-            class="p-2.5 sm:p-3 bg-secondary rounded-lg hover:bg-hover transition-colors shadow-lg border border-hover/30 flex items-center gap-2"
+            class="p-2.5 sm:p-3 bg-secondary rounded-lg hover:bg-hover transition-all duration-200 shadow-lg border border-hover/30 flex items-center gap-2 hover:-translate-y-0.5"
             aria-label="Settings"
           >
             <svg class="w-4 h-4 sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -271,6 +271,15 @@ const announcement = {
   .animate-pulse {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
+
+  @keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-3px); }
+  }
+
+  .animate-bounce {
+    animation: bounce 1s infinite;
+  }
 </style>
 
 <style define:vars={{ bgUrl: background.url }}>