From 1165cc23c6e2f72968a192db4ffd35554df3babd Mon Sep 17 00:00:00 2001
From: Danish Arora <danisharora099@gmail.com>
Date: Thu, 20 Nov 2025 15:41:29 -0500
Subject: [PATCH] chore: zoom in font

---
 app/src/components/CommentCard.tsx | 26 ++++++++---------
 app/src/components/FeedSidebar.tsx | 30 +++++++++----------
 app/src/components/Footer.tsx      |  2 +-
 app/src/components/Header.tsx      | 14 ++++-----
 app/src/components/PostCard.tsx    | 34 +++++++++++-----------
 app/src/components/PostList.tsx    | 46 +++++++++++++++---------------
 app/src/components/RemixBanner.tsx |  4 +--
 app/src/pages/FeedPage.tsx         |  6 ++--
 8 files changed, 80 insertions(+), 82 deletions(-)

diff --git a/app/src/components/CommentCard.tsx b/app/src/components/CommentCard.tsx
index 1fb81f5..8fd7467 100644
--- a/app/src/components/CommentCard.tsx
+++ b/app/src/components/CommentCard.tsx
@@ -88,11 +88,10 @@ const CommentCard: React.FC<CommentCardProps> = ({
     <div className="border-b border-border/20 py-3 pl-3 pr-2">
       <div className="flex gap-3">
         {/* Vote column */}
-        <div className="flex flex-col items-center gap-0.5 text-xs min-w-[40px]">
+        <div className="flex flex-col items-center gap-0.5 text-sm min-w-[40px]">
           <button
-            className={`hover:text-primary ${
-              userUpvoted ? 'text-primary' : 'text-muted-foreground'
-            }`}
+            className={`hover:text-primary text-base ${userUpvoted ? 'text-primary' : 'text-muted-foreground'
+              }`}
             onClick={() => handleVoteComment(true)}
             disabled={!permissions.canVote}
             title={
@@ -101,13 +100,12 @@ const CommentCard: React.FC<CommentCardProps> = ({
           >
             ▲
           </button>
-          <span className={`font-mono text-xs ${score > 0 ? 'text-primary' : score < 0 ? 'text-red-400' : 'text-muted-foreground'}`}>
+          <span className={`font-mono text-sm ${score > 0 ? 'text-primary' : score < 0 ? 'text-red-400' : 'text-muted-foreground'}`}>
             {score}
           </span>
           <button
-            className={`hover:text-blue-400 ${
-              userDownvoted ? 'text-blue-400' : 'text-muted-foreground'
-            }`}
+            className={`hover:text-blue-400 text-base ${userDownvoted ? 'text-blue-400' : 'text-muted-foreground'
+              }`}
             onClick={() => handleVoteComment(false)}
             disabled={!permissions.canVote}
             title={
@@ -121,12 +119,12 @@ const CommentCard: React.FC<CommentCardProps> = ({
         </div>
 
         {/* Content */}
-        <div className="flex-1 min-w-0 text-xs">
+        <div className="flex-1 min-w-0 text-sm">
           {/* Metadata */}
-          <div className="flex flex-wrap items-center gap-1 text-[11px] text-muted-foreground mb-2">
+          <div className="flex flex-wrap items-center gap-1 text-xs text-muted-foreground mb-2">
             <AuthorDisplay
               address={comment.author}
-              className="text-[11px]"
+              className="text-xs"
               showBadge={false}
             />
             <span>·</span>
@@ -138,18 +136,18 @@ const CommentCard: React.FC<CommentCardProps> = ({
             {commentVotePending && (
               <>
                 <span>·</span>
-                <span className="text-yellow-400 text-[10px]">syncing</span>
+                <span className="text-yellow-400 text-xs">syncing</span>
               </>
             )}
           </div>
 
           {/* Content */}
-          <div className="text-xs text-foreground leading-relaxed mb-2 prose prose-invert max-w-none">
+          <div className="text-sm text-foreground leading-relaxed mb-2 prose prose-invert max-w-none">
             <MarkdownRenderer content={comment.content} />
           </div>
 
           {/* Actions */}
-          <div className="flex items-center gap-3 text-[11px] text-muted-foreground">
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
             <button
               onClick={handleBookmark}
               disabled={bookmarkLoading}
diff --git a/app/src/components/FeedSidebar.tsx b/app/src/components/FeedSidebar.tsx
index 1007065..9c02b0b 100644
--- a/app/src/components/FeedSidebar.tsx
+++ b/app/src/components/FeedSidebar.tsx
@@ -51,8 +51,8 @@ const FeedSidebar: React.FC = () => {
       {/* User Status Card */}
       {currentUser && (
         <Card className="bg-transparent">
-          <CardHeader className="pb-0 border-b-0 text-[11px] tracking-[0.2em] text-muted-foreground">
-            <CardTitle className="text-xs uppercase tracking-[0.2em]">Your Status</CardTitle>
+          <CardHeader className="pb-0 border-b-0 text-xs tracking-[0.2em] text-muted-foreground">
+            <CardTitle className="text-sm uppercase tracking-[0.2em]">Your Status</CardTitle>
           </CardHeader>
           <CardContent className="space-y-3">
             <div className="flex items-center space-x-3">
@@ -60,7 +60,7 @@ const FeedSidebar: React.FC = () => {
                 <Users className="w-4 h-4" />
               </div>
               <div className="flex-1">
-                <div className="text-sm font-semibold text-foreground">
+                <div className="text-base font-semibold text-foreground">
                   {currentUser?.displayName}
                 </div>
                 <Badge
@@ -92,30 +92,30 @@ const FeedSidebar: React.FC = () => {
       {/* Forum Stats */}
       <Card className="bg-transparent">
         <CardHeader className="pb-0 border-b-0">
-          <CardTitle className="text-xs uppercase tracking-[0.2em] flex items-center gap-2 text-muted-foreground">
+          <CardTitle className="text-sm uppercase tracking-[0.2em] flex items-center gap-2 text-muted-foreground">
             <TrendingUp className="w-4 h-4" />
             Forum Stats
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-2">
-          <div className="grid grid-cols-3 gap-4 text-center text-[11px] uppercase tracking-[0.15em]">
+          <div className="grid grid-cols-3 gap-4 text-center text-xs uppercase tracking-[0.15em]">
             <div className="space-y-1">
-              <div className="text-lg font-semibold text-primary">
+              <div className="text-xl font-semibold text-primary">
                 {stats.totalCells}
               </div>
-              <div className="text-[10px] text-muted-foreground">Cells</div>
+              <div className="text-xs text-muted-foreground">Cells</div>
             </div>
             <div className="space-y-1">
-              <div className="text-lg font-semibold text-primary">
+              <div className="text-xl font-semibold text-primary">
                 {stats.totalPosts}
               </div>
-              <div className="text-[10px] text-muted-foreground">Posts</div>
+              <div className="text-xs text-muted-foreground">Posts</div>
             </div>
             <div className="space-y-1">
-              <div className="text-lg font-semibold text-primary">
+              <div className="text-xl font-semibold text-primary">
                 {stats.totalComments}
               </div>
-              <div className="text-[10px] text-muted-foreground">Comments</div>
+              <div className="text-xs text-muted-foreground">Comments</div>
             </div>
           </div>
         </CardContent>
@@ -124,7 +124,7 @@ const FeedSidebar: React.FC = () => {
       {/* Trending Cells */}
       <Card className="bg-transparent">
         <CardHeader className="pb-0 border-b-0">
-          <CardTitle className="text-xs uppercase tracking-[0.2em]">
+          <CardTitle className="text-sm uppercase tracking-[0.2em]">
             Trending Cells
           </CardTitle>
         </CardHeader>
@@ -142,10 +142,10 @@ const FeedSidebar: React.FC = () => {
                 generateUniqueFallback={true}
               />
               <div className="flex-1 min-w-0">
-                <div className="font-semibold text-sm truncate text-foreground">
+                <div className="font-semibold text-base truncate text-foreground">
                   {cell.name}
                 </div>
-                <div className="text-[10px] text-muted-foreground uppercase tracking-[0.15em]">
+                <div className="text-xs text-muted-foreground uppercase tracking-[0.15em]">
                   {cell.postCount} posts • {cell.activeUsers} members
                 </div>
               </div>
@@ -153,7 +153,7 @@ const FeedSidebar: React.FC = () => {
           ))}
 
           {trendingCells.length === 0 && (
-            <div className="text-center text-[10px] uppercase tracking-[0.2em] text-muted-foreground py-4">
+            <div className="text-center text-xs uppercase tracking-[0.2em] text-muted-foreground py-4">
               No active cells yet
             </div>
           )}
diff --git a/app/src/components/Footer.tsx b/app/src/components/Footer.tsx
index cad7732..af8cb36 100644
--- a/app/src/components/Footer.tsx
+++ b/app/src/components/Footer.tsx
@@ -5,7 +5,7 @@ const Footer: React.FC = () => {
   return (
     <footer className="bg-cyber-dark border-t border-border mt-auto">
       <div className="max-w-6xl mx-auto px-2 py-2">
-        <div className="text-center text-[10px] text-muted-foreground">
+        <div className="text-center text-xs text-muted-foreground">
           <span>© 2025 OPCHAN</span>
           <span className="mx-1">|</span>
           <Link to="/terms" className="hover:text-foreground">TERMS</Link>
diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
index d97c592..cc2a4ba 100644
--- a/app/src/components/Header.tsx
+++ b/app/src/components/Header.tsx
@@ -79,7 +79,7 @@ const Header = () => {
       window.location.reload(); // Reload to reset state
       return;
     }
-    
+
     // For wallet users, disconnect wallet
     await disconnect();
     setHasShownWizard(false); // Reset so wizard can show again on next connection
@@ -111,7 +111,7 @@ const Header = () => {
 
     if (
       currentUser?.verificationStatus ===
-        EVerificationStatus.ENS_VERIFIED &&
+      EVerificationStatus.ENS_VERIFIED &&
       delegationInfo?.isValid
     ) {
       return <CheckCircle className="w-4 h-4" />;
@@ -134,7 +134,7 @@ const Header = () => {
       <header className="bg-cyber-dark border-b border-border sticky top-0 z-40">
         <div className="max-w-6xl mx-auto px-2 py-2">
           {/* Single Row - Logo, Nav, Status, User */}
-          <div className="flex items-center justify-between text-xs gap-2">
+          <div className="flex items-center justify-between text-sm gap-2">
             {/* Logo & Nav */}
             <div className="flex items-center gap-3">
               <Link to="/" className="font-semibold text-foreground">
@@ -169,7 +169,7 @@ const Header = () => {
             </div>
 
             {/* Network Status */}
-            <div className="hidden md:flex items-center gap-2 text-[10px] text-muted-foreground">
+            <div className="hidden md:flex items-center gap-2 text-xs text-muted-foreground">
               <span>{statusMessage}</span>
               {syncStatus === 'syncing' && syncDetail && syncDetail.missing > 0 && (
                 <span className="text-yellow-400">SYNCING ({syncDetail.missing})</span>
@@ -183,11 +183,11 @@ const Header = () => {
 
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <button className="text-foreground hover:text-primary text-[10px]">
+                      <button className="text-foreground hover:text-primary text-sm">
                         {currentUser?.displayName}
                       </button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end" className="w-48 bg-[#050505] border border-border text-xs">
+                    <DropdownMenuContent align="end" className="w-48 bg-[#050505] border border-border text-sm">
                       <DropdownMenuItem asChild>
                         <Link to="/profile">Profile</Link>
                       </DropdownMenuItem>
@@ -250,7 +250,7 @@ const Header = () => {
               ) : (
                 <button
                   onClick={handleConnect}
-                  className="text-primary hover:underline text-[10px]"
+                  className="text-primary hover:underline text-sm"
                 >
                   LOGIN
                 </button>
diff --git a/app/src/components/PostCard.tsx b/app/src/components/PostCard.tsx
index 538b26f..5fab4b6 100644
--- a/app/src/components/PostCard.tsx
+++ b/app/src/components/PostCard.tsx
@@ -66,22 +66,22 @@ const PostCard: React.FC<PostCardProps> = ({ post }) => {
   };
 
   return (
-    <div className="border-b border-border/30 py-1.5 px-2 text-xs">
-      <div className="flex items-start gap-2">
+    <div className="border-b border-border/30 py-3 px-4 text-sm">
+      <div className="flex items-start gap-3">
         {/* Inline vote display */}
         <button
-          className={`${userUpvoted ? 'text-primary' : 'text-muted-foreground'} hover:text-primary`}
+          className={`${userUpvoted ? 'text-primary' : 'text-muted-foreground'} hover:text-primary text-lg`}
           onClick={e => handleVote(e, true)}
           disabled={!permissions.canVote}
           title={permissions.canVote ? 'Upvote' : permissions.reasons.vote}
         >
           ▲
         </button>
-        <span className={`font-mono text-xs min-w-[2ch] text-center ${score > 0 ? 'text-primary' : score < 0 ? 'text-red-400' : 'text-muted-foreground'}`}>
+        <span className={`font-mono text-base min-w-[2ch] text-center ${score > 0 ? 'text-primary' : score < 0 ? 'text-red-400' : 'text-muted-foreground'}`}>
           {score}
         </span>
         <button
-          className={`${userDownvoted ? 'text-blue-400' : 'text-muted-foreground'} hover:text-blue-400`}
+          className={`${userDownvoted ? 'text-blue-400' : 'text-muted-foreground'} hover:text-blue-400 text-lg`}
           onClick={e => handleVote(e, false)}
           disabled={!permissions.canVote}
           title={permissions.canVote ? 'Downvote' : permissions.reasons.vote}
@@ -91,10 +91,10 @@ const PostCard: React.FC<PostCardProps> = ({ post }) => {
 
         {/* Content - all inline */}
         <div className="flex-1 min-w-0">
-          <div className="flex flex-wrap items-baseline gap-1">
+          <div className="flex flex-wrap items-baseline gap-1.5">
             <Link
               to={cellName ? `/cell/${post.cellId}` : '#'}
-              className="text-primary hover:underline text-[10px]"
+              className="text-primary hover:underline text-sm font-medium"
               onClick={e => {
                 if (!cellName) e.preventDefault();
               }}
@@ -102,34 +102,34 @@ const PostCard: React.FC<PostCardProps> = ({ post }) => {
               r/{cellName}
             </Link>
             <span className="text-muted-foreground">·</span>
-            <Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium">
+            <Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium text-lg">
               {post.title}
             </Link>
-            <span className="text-muted-foreground text-[10px]">
+            <span className="text-muted-foreground text-xs">
               by {post.author.slice(0, 6)}...{post.author.slice(-4)}
             </span>
-            <span className="text-muted-foreground text-[10px]">·</span>
-            <span className="text-muted-foreground text-[10px]">
+            <span className="text-muted-foreground text-xs">·</span>
+            <span className="text-muted-foreground text-xs">
               {formatDistanceToNow(new Date(post.timestamp), {
                 addSuffix: true,
               })}
             </span>
-            <span className="text-muted-foreground text-[10px]">·</span>
-            <Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-[10px]">
+            <span className="text-muted-foreground text-xs">·</span>
+            <Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-xs">
               {commentCount} {commentCount === 1 ? 'reply' : 'replies'}
             </Link>
-            <span className="text-muted-foreground text-[10px]">·</span>
+            <span className="text-muted-foreground text-xs">·</span>
             <button
               onClick={handleBookmark}
               disabled={bookmarkLoading}
-              className="text-muted-foreground hover:underline text-[10px]"
+              className="text-muted-foreground hover:underline text-xs"
             >
               {isBookmarked ? 'unsave' : 'save'}
             </button>
             {isPending && (
               <>
-                <span className="text-muted-foreground text-[10px]">·</span>
-                <span className="text-yellow-400 text-[10px]">syncing</span>
+                <span className="text-muted-foreground text-xs">·</span>
+                <span className="text-yellow-400 text-xs">syncing</span>
               </>
             )}
           </div>
diff --git a/app/src/components/PostList.tsx b/app/src/components/PostList.tsx
index 89e628d..f9d841f 100644
--- a/app/src/components/PostList.tsx
+++ b/app/src/components/PostList.tsx
@@ -130,18 +130,18 @@ const PostList = () => {
 
   return (
     <div className="w-full mx-auto px-2 py-2 max-w-4xl">
-      <div className="mb-2 pb-1 border-b border-border/30 flex items-center justify-between text-xs">
+      <div className="mb-2 pb-1 border-b border-border/30 flex items-center justify-between text-sm">
         <div className="flex items-center gap-2">
           <Link to="/" className="text-primary hover:underline">
             ← Back
           </Link>
           <span className="text-muted-foreground">|</span>
           <span className="font-semibold text-foreground">r/{cell.name}</span>
-          <span className="text-muted-foreground text-[10px]">{cell.description}</span>
+          <span className="text-muted-foreground text-xs">{cell.description}</span>
         </div>
         <button
           onClick={refresh}
-          className="text-muted-foreground hover:text-foreground text-[10px]"
+          className="text-muted-foreground hover:text-foreground text-xs"
         >
           refresh
         </button>
@@ -150,19 +150,19 @@ const PostList = () => {
       {canPost && (
         <div className="mb-2 border-b border-border/30 pb-2">
           <form onSubmit={handleCreatePost} onKeyDown={handleKeyDown}>
-            <div className="text-[10px] font-semibold mb-1">NEW THREAD</div>
+            <div className="text-xs font-semibold mb-1">NEW THREAD</div>
             <Input
               placeholder="Title"
               value={newPostTitle}
               onChange={e => setNewPostTitle(e.target.value)}
-              className="mb-1 text-xs h-7"
+              className="mb-1 text-sm h-9"
               disabled={isCreatingPost}
             />
             <Textarea
               placeholder="Content"
               value={newPostContent}
               onChange={e => setNewPostContent(e.target.value)}
-              className="text-xs resize-none h-16"
+              className="text-sm resize-none h-20"
               disabled={isCreatingPost}
             />
             <div className="flex justify-end mt-1">
@@ -173,7 +173,7 @@ const PostList = () => {
                   !newPostContent.trim() ||
                   !newPostTitle.trim()
                 }
-                className="text-primary hover:underline text-[10px] disabled:opacity-50"
+                className="text-primary hover:underline text-xs disabled:opacity-50"
               >
                 {isCreatingPost ? 'posting...' : 'post'}
               </button>
@@ -195,20 +195,20 @@ const PostList = () => {
           </div>
         ) : (
           visiblePosts.map((post: ForumPost) => (
-            <div key={post.id} className="border-b border-border/30 py-1.5 text-xs">
-              <div className="flex items-start gap-2">
+            <div key={post.id} className="border-b border-border/30 py-3 text-sm">
+              <div className="flex items-start gap-3">
                 <button
-                  className={`${getPostVoteType(post.id) === 'upvote' ? 'text-primary' : 'text-muted-foreground'} hover:text-primary`}
+                  className={`${getPostVoteType(post.id) === 'upvote' ? 'text-primary' : 'text-muted-foreground'} hover:text-primary text-lg`}
                   onClick={() => handleVotePost(post.id, true)}
                   disabled={!canVote || isVoting}
                 >
                   ▲
                 </button>
-                <span className={`font-mono text-xs min-w-[2ch] text-center ${(post.upvotes.length - post.downvotes.length) > 0 ? 'text-primary' : 'text-muted-foreground'}`}>
+                <span className={`font-mono text-base min-w-[2ch] text-center ${(post.upvotes.length - post.downvotes.length) > 0 ? 'text-primary' : 'text-muted-foreground'}`}>
                   {post.upvotes.length - post.downvotes.length}
                 </span>
                 <button
-                  className={`${getPostVoteType(post.id) === 'downvote' ? 'text-blue-400' : 'text-muted-foreground'} hover:text-blue-400`}
+                  className={`${getPostVoteType(post.id) === 'downvote' ? 'text-blue-400' : 'text-muted-foreground'} hover:text-blue-400 text-lg`}
                   onClick={() => handleVotePost(post.id, false)}
                   disabled={!canVote || isVoting}
                 >
@@ -216,27 +216,27 @@ const PostList = () => {
                 </button>
 
                 <div className="flex-1 min-w-0">
-                  <div className="flex flex-wrap items-baseline gap-1">
-                    <Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium">
+                  <div className="flex flex-wrap items-baseline gap-1.5">
+                    <Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium text-lg">
                       {post.title}
                     </Link>
-                    <span className="text-muted-foreground text-[10px]">
+                    <span className="text-muted-foreground text-xs">
                       by {post.author.slice(0, 6)}...{post.author.slice(-4)}
                     </span>
-                    <span className="text-muted-foreground text-[10px]">·</span>
-                    <span className="text-muted-foreground text-[10px]">
+                    <span className="text-muted-foreground text-xs">·</span>
+                    <span className="text-muted-foreground text-xs">
                       {formatDistanceToNow(post.timestamp, { addSuffix: true })}
                     </span>
-                    <span className="text-muted-foreground text-[10px]">·</span>
-                    <Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-[10px]">
+                    <span className="text-muted-foreground text-xs">·</span>
+                    <Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-xs">
                       {commentsByPost[post.id]?.length || 0} comments
                     </Link>
                     {canModerate(cell.id) && !post.moderated && (
                       <>
-                        <span className="text-muted-foreground text-[10px]">·</span>
+                        <span className="text-muted-foreground text-xs">·</span>
                         <button
                           onClick={() => handleModerate(post.id)}
-                          className="text-orange-400 hover:underline text-[10px]"
+                          className="text-orange-400 hover:underline text-xs"
                         >
                           moderate
                         </button>
@@ -244,10 +244,10 @@ const PostList = () => {
                     )}
                     {canModerate(cell.id) && post.moderated && (
                       <>
-                        <span className="text-muted-foreground text-[10px]">·</span>
+                        <span className="text-muted-foreground text-xs">·</span>
                         <button
                           onClick={() => handleUnmoderate(post.id)}
-                          className="text-green-400 hover:underline text-[10px]"
+                          className="text-green-400 hover:underline text-xs"
                         >
                           unmoderate
                         </button>
diff --git a/app/src/components/RemixBanner.tsx b/app/src/components/RemixBanner.tsx
index d0a453a..39f458b 100644
--- a/app/src/components/RemixBanner.tsx
+++ b/app/src/components/RemixBanner.tsx
@@ -12,7 +12,7 @@ const RemixBanner = () => {
       <div className="max-w-6xl mx-auto px-2 py-2">
         <div className="flex items-center justify-between gap-4">
           {/* Badge */}
-          <div className="flex items-center gap-2 text-[10px]">
+          <div className="flex items-center gap-2 text-xs">
             <div className="flex items-center gap-1 px-2 py-1 border transition-colors border-primary text-primary bg-primary/10">
               <Code className="w-3 h-3" />
               <span className="hidden sm:inline">DEVS</span>
@@ -20,7 +20,7 @@ const RemixBanner = () => {
           </div>
 
           {/* Message Content */}
-          <div className="flex-1 text-[10px] text-foreground">
+          <div className="flex-1 text-xs text-foreground">
             <p>
               <span className="text-primary font-semibold">BUILD YOUR OWN:</span>{' '}
               <span className="text-muted-foreground">
diff --git a/app/src/pages/FeedPage.tsx b/app/src/pages/FeedPage.tsx
index 5a0e537..3187dfa 100644
--- a/app/src/pages/FeedPage.tsx
+++ b/app/src/pages/FeedPage.tsx
@@ -42,7 +42,7 @@ const FeedPage: React.FC = () => {
     <div className="page-container">
       <div className="w-full mx-auto px-2 py-2 max-w-4xl">
         {/* Minimal Header */}
-        <div className="mb-2 pb-1 border-b border-border/30 flex items-center justify-between text-xs">
+        <div className="mb-2 pb-1 border-b border-border/30 flex items-center justify-between text-sm">
           <div className="flex items-center gap-2">
             <span className="text-primary font-semibold">FEED</span>
             <ModerationToggle />
@@ -52,7 +52,7 @@ const FeedPage: React.FC = () => {
               value={sortOption}
               onValueChange={(value: SortOption) => setSortOption(value)}
             >
-              <SelectTrigger className="w-24 text-[10px] h-6">
+              <SelectTrigger className="w-24 text-xs h-8">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -62,7 +62,7 @@ const FeedPage: React.FC = () => {
             </Select>
             <button
               onClick={content.refresh}
-              className="text-muted-foreground hover:text-foreground text-[10px]"
+              className="text-muted-foreground hover:text-foreground text-xs"
             >
               refresh
             </button>