Merge pull request #1584 from saurabhhhcodes/fix/article-author-format-1581

fix: format blog author separators

Author: sanjay-kv

src/components/blogCarousel/blogCard.tsx

@@ -118,7 +118,7 @@ const BlogCard = ({
                 {authorProfiles.map((author, authorIndex) => (
                   <span key={author.id} className="author-item">
                     {authorIndex > 0 && (
-                      <span className="author-separator">&</span>
+                      <span className="author-separator">,</span>
                     )}
                     <Link
                       href={author.githubUrl}

src/components/blogCarousel/blogCarousel.css

@@ -299,9 +299,11 @@
 .author-name-group {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 6px;
   min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 /* Stacked avatars */
@@ -366,6 +368,10 @@
 .author-link {
   display: inline-flex;
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
   position: relative;
   text-decoration: none;
 }

src/pages/blogs/blogs-new.css

@@ -943,8 +943,16 @@
   padding: 36px;
   text-align: center;
   background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9)),
-    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.12), transparent 36%),
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.95),
+      rgba(248, 250, 252, 0.9)
+    ),
+    radial-gradient(
+      circle at 15% 20%,
+      rgba(99, 102, 241, 0.12),
+      transparent 36%
+    ),
     radial-gradient(circle at 85% 0%, rgba(236, 72, 153, 0.1), transparent 34%);
   border: 1px solid rgba(99, 102, 241, 0.12);
   border-radius: 24px;
@@ -956,7 +964,11 @@
 [data-theme="dark"] .blog-search-panel {
   background:
     linear-gradient(135deg, rgba(36, 37, 38, 0.96), rgba(26, 32, 44, 0.94)),
-    radial-gradient(circle at 15% 20%, rgba(167, 139, 250, 0.16), transparent 36%),
+    radial-gradient(
+      circle at 15% 20%,
+      rgba(167, 139, 250, 0.16),
+      transparent 36%
+    ),
     radial-gradient(circle at 85% 0%, rgba(236, 72, 153, 0.1), transparent 34%);
   border-color: rgba(167, 139, 250, 0.2);
   box-shadow:
@@ -1768,7 +1780,6 @@
     margin-bottom: 12px;
   }
 
-
   .card-title-link {
     color: inherit;
     text-decoration: none;
@@ -1830,9 +1841,11 @@
 .author-name-group {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 6px;
   min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .author-item {
@@ -1850,6 +1863,10 @@
 .author-link {
   display: inline-flex;
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
   position: relative;
   text-decoration: none;
 }

src/pages/blogs/index.tsx

@@ -90,9 +90,7 @@ export default function Blogs() {
               <h1 className="blog-main-title">
                 Engineering <span className="gradient-text">uptime</span>{" "}
               </h1>
-              <p className="blog-main-subtitle">
-                blog by recode community.
-              </p>
+              <p className="blog-main-subtitle">blog by recode community.</p>
             </div>
           </div>
         </section>
@@ -251,7 +249,7 @@ const BlogCard = ({ blog }: { blog: (typeof blogs)[number] }) => {
               {authors.map((author, authorIndex) => (
                 <span key={author.id} className="author-item">
                   {authorIndex > 0 && (
-                    <span className="author-separator">&</span>
+                    <span className="author-separator">,</span>
                   )}
                   <Link
                     href={author.githubUrl}