From 282b5814a61ca1f1824db21a5c3f41f345b23d48 Mon Sep 17 00:00:00 2001
From: Jimin Ha <jimin9038@g.skku.edu>
Date: Tue, 31 Dec 2024 20:52:52 +0900
Subject: [PATCH] fix(fe): fix width when page small

---
 frontend/app/(main)/page.tsx            | 20 ++++++++++----------
 frontend/components/ui/SmallArticle.tsx |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/app/(main)/page.tsx b/frontend/app/(main)/page.tsx
index 23bbbd2..795d7f1 100644
--- a/frontend/app/(main)/page.tsx
+++ b/frontend/app/(main)/page.tsx
@@ -210,35 +210,35 @@ export default async function Home() {
         </div>
       </section>
       <section className="flex w-full max-w-6xl flex-col border-b-2 border-r-gray-500 lg:flex-row">
-        <div className="h-30 w-full border-r-2 border-r-gray-100 md:w-1/2 lg:w-1/3 lg:pr-6">
+        <div className="h-30 w-full border-r-2 border-r-gray-100 lg:w-1/3 lg:pr-6">
           <SmallArticle article={secondSectionArticles[0]}></SmallArticle>
           <SmallArticle article={secondSectionArticles[1]}></SmallArticle>
         </div>
-        <div className="h-30 w-full border-r-2 border-r-gray-100 md:w-1/2 lg:w-1/3 lg:px-6">
+        <div className="h-30 w-full border-r-2 border-r-gray-100 lg:w-1/3 lg:px-6">
           <SmallArticle article={secondSectionArticles[2]}></SmallArticle>
           <SmallArticle article={secondSectionArticles[3]}></SmallArticle>
         </div>
-        <div className="h-30 w-full md:w-1/2 lg:w-1/3 lg:pl-6">
+        <div className="h-30 w-full lg:w-1/3 lg:pl-6">
           <BigBanner banner={Big1Banner}></BigBanner>
         </div>
       </section>
-      <section className="flex w-full max-w-6xl flex-col border-b-2 border-r-gray-500 lg:flex-row">
-        <div className="h-30 w-full md:w-1/2 lg:w-1/3 lg:pr-6 ">
+      <section className="flex w-full max-w-6xl flex-row border-b-2 border-r-gray-500">
+        <div className="h-30 w-full lg:w-1/3 lg:pr-6 ">
           <SmallBanner banner={Sub1Banner}></SmallBanner>
         </div>
-        <div className="h-30 w-full md:w-1/2 lg:w-1/3 lg:px-6">
+        <div className="h-30 w-full lg:w-1/3 lg:px-6">
           <SmallBanner banner={Sub2Banner}></SmallBanner>
         </div>
-        <div className="h-30 w-full md:w-1/2 lg:w-1/3 lg:pl-6">
+        <div className="h-30 w-full lg:w-1/3 lg:pl-6">
           <SmallBanner banner={Sub3Banner}></SmallBanner>
         </div>
       </section>
-      <section className="flex w-full max-w-6xl flex-col border-b-2 border-r-gray-500 lg:flex-row">
-        <div className="h-30 w-full md:w-1/2 lg:pr-6">
+      <section className="flex w-full max-w-6xl flex-row border-b-2 border-r-gray-500">
+        <div className="h-30 w-full pr-6 md:w-1/2">
           <MiddleArticle article={thirdSectionArticles[0]}></MiddleArticle>
           <MiddleArticle article={thirdSectionArticles[1]}></MiddleArticle>
         </div>
-        <div className="h-30 w-full md:w-1/2 lg:pl-6">
+        <div className="h-30 w-full pl-6 md:w-1/2">
           <MiddleArticle article={thirdSectionArticles[2]}></MiddleArticle>
           <MiddleArticle article={thirdSectionArticles[3]}></MiddleArticle>
         </div>
diff --git a/frontend/components/ui/SmallArticle.tsx b/frontend/components/ui/SmallArticle.tsx
index e3b248b..1dfb0b2 100644
--- a/frontend/components/ui/SmallArticle.tsx
+++ b/frontend/components/ui/SmallArticle.tsx
@@ -21,7 +21,7 @@ export default function SmallArticle({ article }: { article: Article }) {
             ></Image>
           </div>
           <div className="prose flex lg:max-h-16 lg:overflow-hidden lg:overflow-ellipsis lg:text-sm lg:font-light">
-            <h1> {article?.content} </h1>
+            <h1 className="line-clamp-5"> {article?.content} </h1>
           </div>
         </div>
       </article>