anything

src/modules/comic/ComicLanding.css

@@ -292,12 +292,38 @@
   font-size: 1.25rem;
 }
 
-.synopsis p {
-  margin: 0;
+.synopsis-content {
+  position: relative;
+}
+
+.synopsis-content p {
+  margin: 0 0 0.5rem 0;
   line-height: 1.7;
   opacity: 0.85;
 }
 
+.expand-btn {
+  background: none;
+  border: none;
+  color: #667eea;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.5rem 0;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.expand-btn:hover {
+  color: #5568d3;
+  text-decoration: underline;
+}
+
+.expand-btn:active {
+  color: #4451b8;
+}
+
 .chapters-section {
   max-width: 1200px;
   margin: 0 auto;
@@ -359,10 +385,39 @@
   border-color: #667eea;
 }
 
+.chapters-list-wrapper {
+  position: relative;
+}
+
 .chapters-list {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  position: relative;
+}
+
+.chapters-list.has-fade {
+  position: relative;
+}
+
+.chapters-list.has-fade::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 180px;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(15, 15, 30, 0.3) 20%,
+    rgba(15, 15, 30, 0.6) 40%,
+    rgba(15, 15, 30, 0.85) 60%,
+    rgba(15, 15, 30, 0.95) 80%,
+    #0f0f1e 100%
+  );
+  pointer-events: none;
+  z-index: 1;
 }
 
 .chapter-item {
@@ -375,12 +430,15 @@
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.3s;
+  position: relative;
+  z-index: 0;
 }
 
 .chapter-item:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: #667eea;
   transform: translateX(4px);
+  z-index: 2;
 }
 
 .chapter-info {
@@ -417,6 +475,36 @@
   transform: translateX(4px);
 }
 
+.show-more-container {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 0 1rem;
+  margin-top: -0.5rem;
+  position: relative;
+  z-index: 2;
+}
+
+.show-more-chapters {
+  font-size: 1rem;
+  padding: 0.75rem 1.5rem;
+  background: rgba(102, 126, 234, 0.15);
+  border: 1px solid rgba(102, 126, 234, 0.3);
+  border-radius: 10px;
+  transition: all 0.3s ease;
+  color: #667eea;
+}
+
+.show-more-chapters:hover {
+  background: rgba(102, 126, 234, 0.25);
+  border-color: #667eea;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.show-more-chapters:active {
+  transform: translateY(0);
+}
+
 .no-results {
   text-align: center;
   padding: 3rem;
@@ -493,4 +581,27 @@
   .auth-card {
     padding: 2rem;
   }
+
+  .chapters-list.has-fade::after {
+    height: 150px;
+  }
+
+  .expand-btn {
+    font-size: 0.85rem;
+  }
+
+  .show-more-chapters {
+    font-size: 0.9rem;
+    padding: 0.65rem 1.25rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

src/modules/comic/ComicLanding.tsx

@@ -34,8 +34,11 @@ export function ComicLanding() {
   const [searchQuery, setSearchQuery] = useState('');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
   const [loadingChapter, setLoadingChapter] = useState(false);
-
+  const [isSynopsisExpanded, setIsSynopsisExpanded] = useState(false);
+  const [isChaptersExpanded, setIsChaptersExpanded] = useState(false);
   const [ws, setWs] = useState<WebSocket | null>(null);
+  const SYNOPSIS_CHAR_LIMIT = 200;
+  const CHAPTERS_INITIAL_DISPLAY = 20;
 
   useEffect(() => {
     const storedSession = sessionStorage.getItem(`comic_${sessionId}`);
@@ -219,6 +222,16 @@ export function ComicLanding() {
     return sortOrder === 'asc' ? numA - numB : numB - numA;
   });
 
+  const shouldTruncateSynopsis = comicData && comicData.synopsis.length > SYNOPSIS_CHAR_LIMIT;
+  const displayedSynopsis = comicData && shouldTruncateSynopsis && !isSynopsisExpanded
+    ? comicData.synopsis.slice(0, SYNOPSIS_CHAR_LIMIT) + '...'
+    : comicData?.synopsis;
+
+  const shouldShowMoreChapters = sortedChapters.length > CHAPTERS_INITIAL_DISPLAY;
+  const displayedChapters = isChaptersExpanded || searchQuery
+    ? sortedChapters
+    : sortedChapters.slice(0, CHAPTERS_INITIAL_DISPLAY);
+
   if (loading) {
     return (
       <div className="comic-landing">
@@ -349,7 +362,17 @@ export function ComicLanding() {
 
             <div className="synopsis">
               <h3>Synopsis</h3>
-              <p>{comicData.synopsis}</p>
+              <div className="synopsis-content">
+                <p>{displayedSynopsis}</p>
+                {shouldTruncateSynopsis && (
+                  <button 
+                    className="expand-btn"
+                    onClick={() => setIsSynopsisExpanded(!isSynopsisExpanded)}
+                  >
+                    {isSynopsisExpanded ? 'Show Less' : 'Read More'}
+                  </button>
+                )}
+              </div>
             </div>
           </div>
         </div>
@@ -378,33 +401,49 @@ export function ComicLanding() {
           </div>
         </div>
 
-        <div className="chapters-list">
-          {sortedChapters.length === 0 ? (
-            <div className="no-results">
-              <p>No chapters found</p>
-            </div>
-          ) : (
-            sortedChapters.map((chapter, index) => (
-              <div
-                key={index}
-                className="chapter-item"
-                onClick={() => handleReadChapter(chapter.slug)}
-              >
-                <div className="chapter-info">
-                  <div className="chapter-number">{chapter.chapter}</div>
-                  <div className="chapter-meta">
-                    <span className="chapter-date">{chapter.date}</span>
-                    <span className="chapter-views">{chapter.views}</span>
+        <div className="chapters-list-wrapper">
+          <div className={`chapters-list ${!isChaptersExpanded && shouldShowMoreChapters ? 'has-fade' : ''}`}>
+            {displayedChapters.length === 0 ? (
+              <div className="no-results">
+                <p>No chapters found</p>
+              </div>
+            ) : (
+              displayedChapters.map((chapter, index) => (
+                <div
+                  key={index}
+                  className="chapter-item"
+                  onClick={() => handleReadChapter(chapter.slug)}
+                >
+                  <div className="chapter-info">
+                    <div className="chapter-number">{chapter.chapter}</div>
+                    <div className="chapter-meta">
+                      <span className="chapter-date">{chapter.date}</span>
+                      <span className="chapter-views">{chapter.views}</span>
+                    </div>
+                  </div>
+                  <div className="chapter-action">
+                    <span className="read-btn">Read →</span>
                   </div>
                 </div>
-                <div className="chapter-action">
-                  <span className="read-btn">Read →</span>
-                </div>
-              </div>
-            ))
+              ))
+            )}
+          </div>
+          
+          {shouldShowMoreChapters && !searchQuery && (
+            <div className="show-more-container">
+              <button 
+                className="expand-btn show-more-chapters"
+                onClick={() => setIsChaptersExpanded(!isChaptersExpanded)}
+              >
+                {isChaptersExpanded 
+                  ? 'Show Less' 
+                  : `Show More (${sortedChapters.length - CHAPTERS_INITIAL_DISPLAY} more chapters)`
+                }
+              </button>
+            </div>
           )}
         </div>
       </div>
     </div>
   );
-}
+}