From f88bea775ca1c72f2e03070b415b9dbda4046893 Mon Sep 17 00:00:00 2001
From: yu-zhen <wlphg010688@gmail.com>
Date: Thu, 12 Dec 2024 02:10:55 +0800
Subject: [PATCH] fix: adjust ui styling

---
 .../features/ballot/components/ProjectAvatarWithName.tsx    | 6 ++++--
 .../interface/src/features/rounds/components/RoundItem.tsx  | 2 +-
 .../interface/src/features/rounds/components/RoundsList.tsx | 2 +-
 packages/interface/src/pages/index.tsx                      | 4 ++--
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/interface/src/features/ballot/components/ProjectAvatarWithName.tsx b/packages/interface/src/features/ballot/components/ProjectAvatarWithName.tsx
index 4dfd3ebd..cdf47d20 100644
--- a/packages/interface/src/features/ballot/components/ProjectAvatarWithName.tsx
+++ b/packages/interface/src/features/ballot/components/ProjectAvatarWithName.tsx
@@ -29,12 +29,14 @@ export const ProjectAvatarWithName = ({
 
   return (
     <Component className="flex flex-1 items-center gap-4" href={`/rounds/${pollId}/${id}`} tabIndex={-1}>
-      <ProjectAvatar rounded="full" size="sm" url={metadata.data?.profileImageUrl} />
+      <div className="h-12 w-12">
+        <ProjectAvatar rounded="full" size="sm" url={metadata.data?.profileImageUrl} />
+      </div>
 
       <div>
         <div className="font-bold uppercase dark:text-white">{metadata.data?.name}</div>
 
-        <div className="text-sm text-gray-400">
+        <div className="max-h-10 overflow-scroll text-sm text-gray-400">
           <p>{showDescription && (metadata.data?.bio ?? null)}</p>
 
           <p>{allocation > 0 && `Votes you have allocated: ${allocation}`}</p>
diff --git a/packages/interface/src/features/rounds/components/RoundItem.tsx b/packages/interface/src/features/rounds/components/RoundItem.tsx
index 2add1831..d9cac9cb 100644
--- a/packages/interface/src/features/rounds/components/RoundItem.tsx
+++ b/packages/interface/src/features/rounds/components/RoundItem.tsx
@@ -72,7 +72,7 @@ export const RoundItem = ({ round }: IRoundItemProps): JSX.Element => {
           {round.roundId}
         </Heading>
 
-        <p className="my-4 text-gray-400">{round.description}</p>
+        <div className="my-4 h-16 overflow-scroll text-gray-400">{round.description}</div>
 
         <RoundTag state={roundState} />
       </div>
diff --git a/packages/interface/src/features/rounds/components/RoundsList.tsx b/packages/interface/src/features/rounds/components/RoundsList.tsx
index c21b1612..c598e369 100644
--- a/packages/interface/src/features/rounds/components/RoundsList.tsx
+++ b/packages/interface/src/features/rounds/components/RoundsList.tsx
@@ -7,7 +7,7 @@ export const RoundsList = (): JSX.Element => {
   const { rounds } = useRound();
 
   return (
-    <div className="grid grid-cols-1 gap-4 px-16 py-4 sm:grid-cols-3">
+    <div className="grid grid-cols-1 gap-4 px-16 py-4 md:grid-cols-2 lg:grid-cols-3">
       {rounds?.map((round) => <RoundItem key={round.pollId} round={round} />)}
     </div>
   );
diff --git a/packages/interface/src/pages/index.tsx b/packages/interface/src/pages/index.tsx
index d1a3b6f9..3e11451a 100644
--- a/packages/interface/src/pages/index.tsx
+++ b/packages/interface/src/pages/index.tsx
@@ -26,8 +26,8 @@ const HomePage = (): JSX.Element => {
       {singleRound && <SingleRoundHome round={singleRound} />}
 
       {!singleRound && (
-        <div className="flex h-auto w-screen flex-col items-center justify-center gap-4 bg-blue-50 px-2 pb-4 sm:h-[90vh] dark:bg-black">
-          <Heading className="mt-4 max-w-screen-lg text-center sm:mt-0" size="6xl">
+        <div className="flex h-auto w-screen flex-col items-center justify-center gap-4 bg-blue-50 px-2 pb-4 sm:min-h-[90vh] dark:bg-black">
+          <Heading className="mt-4 max-w-screen-lg text-center sm:mt-8" size="6xl">
             {config.eventName}
           </Heading>