feat: enhance responsive design on mobile

kuizuo · Jan 13, 2024 · b0963c8 · b0963c8
1 parent b7b36ba
commit b0963c8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -327,3 +327,9 @@ div[class^='announcementBar_'] {
     width: 100%;
   }
 }
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/theme/BlogPostItem/Header/Info/index.tsx b/src/theme/BlogPostItem/Header/Info/index.tsx
@@ -32,12 +32,12 @@ function useReadingTimePlural() {
 
 export function ReadingTime({ readingTime }: { readingTime: number }) {
   const readingTimePlural = useReadingTimePlural()
-  return <>{readingTimePlural(readingTime)}</>
+  return <span className="truncate">{readingTimePlural(readingTime)}</span>
 }
 
 function Date({ date, formattedDate }: { date: string; formattedDate: string }) {
   return (
-    <time dateTime={date} itemProp="datePublished">
+    <time dateTime={date} itemProp="datePublished" className="truncate">
       {formattedDate}
     </time>
   )
@@ -58,8 +58,8 @@ export default function BlogPostItemHeaderInfo({ className }: Props): JSX.Elemen
       {tagsExists && (
         <div className={styles.tagInfo}>
           <Icon icon="ri:price-tag-3-line" />
-          <div className={styles.tagList}>
-            {tags.slice(0, 2).map(({ label, permalink: tagPermalink }, index) => {
+          <div className={clsx('truncate', styles.tagList)}>
+            {tags.slice(0, 3).map(({ label, permalink: tagPermalink }, index) => {
               return (
                 <div key={tagPermalink}>
                   {index !== 0 && '/'}