new-branding: fix ui breaking blog mobile layout

new-branding/src/components/blog/ArticleCard/index.scss

@@ -185,9 +185,12 @@
     a {
       color: inherit;
       text-decoration: none;
+      display: -webkit-box;
+      -webkit-line-clamp: inherit;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
       word-break: break-word;
       overflow-wrap: anywhere;
-      white-space: normal;
     }
   }
 
@@ -211,6 +214,7 @@
     }
 
     &__title {
+      height: 70px;
       font-size: 20px;
       line-height: 115%;
     }

new-branding/src/components/blog/FilterBar/index.scss

@@ -106,10 +106,33 @@
 @media (max-width: 1100px) {
   .filter-bar {
     position: relative;
-    flex-direction: column;
+    display: flex;
     align-items: center;
 
-    .filter-bar__sort {
+    &__tabs {
+      display: flex;
+      width: max-content;
+
+      &--wraper {
+        flex: 1;
+        min-width: 0;
+
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+
+    &__tab {
+      flex-shrink: 0;
+    }
+
+    &__sort {
       position: absolute;
       right: 10px;
       top: -40px;

new-branding/src/components/blog/FilterBar/index.tsx

@@ -22,21 +22,23 @@ export const FilterBar = ({ tabs, activeTab, sort, onTabChange, onSortChange }:
 
   return (
     <div className="filter-bar">
-      <div className="filter-bar__tabs" role="tablist">
-        {tabs.map(tab => (
-          <button
-            key={tab.id}
-            role="tab"
-            aria-selected={activeTab === tab.id}
-            className={clsx("filter-bar__tab", {
-              "filter-bar__tab--active": activeTab === tab.id,
-            })}
-            onClick={() => onTabChange(tab.id)}
-          >
-            {tab.label}
-            <span className="filter-bar__count">{tab.count}</span>
-          </button>
-        ))}
+      <div className="filter-bar__tabs--wraper">
+        <div className="filter-bar__tabs" role="tablist">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              role="tab"
+              aria-selected={activeTab === tab.id}
+              className={clsx("filter-bar__tab", {
+                "filter-bar__tab--active": activeTab === tab.id,
+              })}
+              onClick={() => onTabChange(tab.id)}
+            >
+              {tab.label}
+              <span className="filter-bar__count">{tab.count}</span>
+            </button>
+          ))}
+        </div>
       </div>
 
       <button className="filter-bar__sort" onClick={toggleSort} aria-label={`Sort by ${sort === "new" ? "oldest" : "newest"} first`}>

new-branding/src/components/blog/Info/index.scss

@@ -92,6 +92,26 @@
       color: #c2c2c2;
     }
   }
+
+  &__date-skeleton {
+    width: 140px;
+    height: 20px;
+  }
+
+  &__title-skeleton {
+    width: 320px;
+    height: 40px;
+  }
+
+  &__subtitle-skeleton {
+    width: 320px;
+    height: 20px;
+  }
+
+  &__additional-skeleton {
+    width: 140px;
+    height: 20px;
+  }
 }
 
 @media (max-width: 1100px) {
@@ -108,6 +128,23 @@
       min-height: 323px;
       border-radius: 0 0 7px 7px;
     }
+
+    &__title-skeleton {
+      width: 240px;
+    }
+
+    &__subtitle-skeleton {
+      width: 240px;
+    }
+
+    &__date-skeleton {
+      width: 90px;
+    }
+
+    &__additional-skeleton {
+      width: 90px;
+      height: 20px;
+    }
   }
 }
 

new-branding/src/components/blog/Info/index.tsx

@@ -1,52 +1,54 @@
 "use client";
 
 import Link from "next/link";
-import { GoToIcon } from "@/app/static/images";
-import "./index.scss";
 import Image from "next/image";
+import { GoToIcon } from "@/app/static/images";
 import { SkeletonWrapper } from "@/components/common/SkeletonWrapper";
-import "react-loading-skeleton/dist/skeleton.css";
 import { FeaturedNews } from "@/lib/axios/types";
 import { formatPostDate } from "@/lib/date";
-import { useIsMobile } from "@/lib/hooks/useIsMobile";
 
-export const BlogInfo: React.FC<{ isLoading: boolean; featured: FeaturedNews | undefined }> = ({ isLoading, featured }) => {
-  const isMobile = useIsMobile();
+import "./index.scss";
 
+export const BlogInfo: React.FC<{
+  isLoading: boolean;
+  featured: FeaturedNews | undefined;
+}> = ({ isLoading, featured }) => {
   return (
     <article className="blog-info">
       <div className="blog-info__image-wrapper">
-        {featured?.thumbnail?.url && <Image className="blog-info__image" src={featured.thumbnail.url} fill sizes="(max-width: 1100px) 100vw, calc(100vw - 446px)" alt="preview image" />}
+        {featured?.thumbnail?.url && <Image className="blog-info__image" src={featured.thumbnail.url} fill sizes="(max-width: 1100px) 100vw, calc(100vw - 446px)" alt="preview image" priority />}
       </div>
+
       <div className="blog-info__content">
         <div className="blog-info__body">
           <div className="blog-info__top-side">
             <span className="blog-info__label">Featured</span>
-            <SkeletonWrapper isLoading={isLoading} width={!isMobile ? 140 : 90} height={20}>
-              <span className="blog-info__additional">{[featured?.date ? formatPostDate(featured?.date) : featured?.date, featured?.label].filter(Boolean).join(" · ")}</span>
+
+            <SkeletonWrapper isLoading={isLoading} className="blog-info__additional-skeleton">
+              <span className="blog-info__additional">{[featured?.date ? formatPostDate(featured.date) : featured?.date, featured?.label].filter(Boolean).join(" · ")}</span>
             </SkeletonWrapper>
           </div>
 
           <h2 className="blog-info__title">
-            <SkeletonWrapper isLoading={isLoading} width={!isMobile ? 320 : 240} height={40}>
+            <SkeletonWrapper isLoading={isLoading} className="blog-info__title-skeleton">
               <span>{featured?.title}</span>
             </SkeletonWrapper>
           </h2>
-          <SkeletonWrapper isLoading={isLoading} height={20} width={!isMobile ? 320 : 240}>
-            <p className="blog-info__subtitle"> {featured?.description}</p>
+
+          <SkeletonWrapper isLoading={isLoading} className="blog-info__subtitle-skeleton">
+            <p className="blog-info__subtitle">{featured?.description}</p>
           </SkeletonWrapper>
         </div>
+
         <div className="blog-info__footer">
-          <SkeletonWrapper isLoading={isLoading} width={!isMobile ? 120 : 70} height={20}>
-            {featured?.sourceUrl ? (
-              <Link href={featured.sourceUrl} className="blog-info__link" target="_blank" rel="noopener noreferrer">
-                Read on {featured?.source ?? "source"}
-                <GoToIcon />
-              </Link>
-            ) : (
-              <></>
-            )}
-          </SkeletonWrapper>
+          {featured?.sourceUrl ? (
+            <Link href={featured.sourceUrl} className="blog-info__link" target="_blank" rel="noopener noreferrer">
+              Read on {featured?.source ?? "source"}
+              <GoToIcon />
+            </Link>
+          ) : (
+            <></>
+          )}
         </div>
       </div>
     </article>

new-branding/src/components/common/Navigation/Menu/index.tsx

@@ -20,7 +20,7 @@ export class SubNavigationItem {
 
 export const navigation = [
   new NavigationItem("Products", [
-    new SubNavigationItem("Mint", "/heading/menu/mint.svg", "/mint", "Mint and move USDT on Bitcoin."),
+    // new SubNavigationItem("Mint", "/heading/menu/mint.svg", "/mint", "Mint and move USDT on Bitcoin."),
     new SubNavigationItem("API", "/heading/menu/api.svg", "/api-product", "Your gateway to USDT on Bitcoin."),
     new SubNavigationItem("Cloud", "/heading/menu/cloud.svg", "/cloud", "Fully managed Lightning infrastructure."),
   ]),

new-branding/src/components/common/Navigation/index.tsx

@@ -16,7 +16,8 @@ export class NavigationItem {
     public submenu?: NavigationItem[],
   ) {}
 }
-export const additionalNavigation: NavigationItem[] = [new NavigationItem("Mint USDT", "/mint"), new NavigationItem("Blog", "/blog"), new NavigationItem("Contact", "/contact-sales")];
+// new NavigationItem("Mint USDT", "/mint")
+export const additionalNavigation: NavigationItem[] = [new NavigationItem("Blog", "/blog"), new NavigationItem("Contact", "/contact-sales")];
 
 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 

new-branding/src/components/common/SkeletonWrapper/index.tsx

@@ -6,10 +6,13 @@ import "react-loading-skeleton/dist/skeleton.css";
 export type SkeletonWrapperProps = {
   children: React.ReactElement;
   isLoading: boolean;
-  width: number;
-  height: number;
+  className?: string;
 };
 
-export const SkeletonWrapper: React.FC<SkeletonWrapperProps> = ({ children, isLoading, width, height }) => {
-  return isLoading ? <Skeleton width={width} height={height} baseColor="#1a1a1a" highlightColor="#414141ff" /> : <>{children}</>;
+export const SkeletonWrapper: React.FC<SkeletonWrapperProps> = ({ children, isLoading, className }) => {
+  if (isLoading) {
+    return <Skeleton className={className} baseColor="#1a1a1a" highlightColor="#414141ff" />;
+  }
+
+  return children;
 };