106 enable responsiveness

packages/frontend/src/features/events/components/event-subscribers.tsx

@@ -2,7 +2,14 @@
 
 import { Button } from '@/shared/components/ui/button';
 import { Card } from '@/shared/components/ui/card';
-import { ArrowLeft, UserIcon, UsersIcon } from 'lucide-react';
+import {
+  ArrowLeft,
+  UserIcon,
+  UsersIcon,
+  Clock,
+  CheckCircle,
+  XCircle
+} from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Input } from '@/shared/components/ui/input';
@@ -140,16 +147,44 @@ export const EventSubscribers = ({ eventId }: { eventId: string }) => {
         />
 
         <Tabs defaultValue="all" onValueChange={setActiveTab} className="mb-4">
-          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="all">All ({tabCounts.all})</TabsTrigger>
-            <TabsTrigger value="pending">
-              Pending ({tabCounts.pending})
+          <TabsList className="flex w-full max-w-full gap-2 sm:grid sm:grid-cols-4 sm:gap-0">
+            <TabsTrigger
+              value="all"
+              aria-label={`All (${tabCounts.all})`}
+              className="h-10 flex-none sm:flex-auto"
+            >
+              <UsersIcon className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">All ({tabCounts.all})</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="pending"
+              aria-label={`Pending (${tabCounts.pending})`}
+              className="h-10 flex-none sm:flex-auto"
+            >
+              <Clock className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">
+                Pending ({tabCounts.pending})
+              </span>
             </TabsTrigger>
-            <TabsTrigger value="approved">
-              Approved ({tabCounts.approved})
+            <TabsTrigger
+              value="approved"
+              aria-label={`Approved (${tabCounts.approved})`}
+              className="h-10 flex-none sm:flex-auto"
+            >
+              <CheckCircle className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">
+                Approved ({tabCounts.approved})
+              </span>
             </TabsTrigger>
-            <TabsTrigger value="rejected">
-              Rejected ({tabCounts.rejected})
+            <TabsTrigger
+              value="rejected"
+              aria-label={`Rejected (${tabCounts.rejected})`}
+              className="h-10 flex-none sm:flex-auto"
+            >
+              <XCircle className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">
+                Rejected ({tabCounts.rejected})
+              </span>
             </TabsTrigger>
           </TabsList>
 

packages/frontend/src/features/home/components/comment-card/comment-card.tsx

@@ -156,13 +156,18 @@ export const CommentCard = ({
                 <button
                   onClick={() => setShowCommentSection(!showCommentSection)}
                   className="flex items-center gap-2 rounded-full p-1 text-primary-500 hover:bg-neutral-light-200"
+                  aria-label={
+                    showCommentSection ? 'Hide comments' : 'View comments'
+                  }
                 >
                   {showCommentSection ? (
                     <ChevronUp className="h-5 w-5" />
                   ) : (
                     <ChevronDown className="h-5 w-5" />
                   )}
-                  {showCommentSection ? 'Hide Comments' : 'View Comments'}
+                  <span className="hidden sm:inline">
+                    {showCommentSection ? 'Hide Comments' : 'View Comments'}
+                  </span>
                 </button>
               )}
             <button

packages/frontend/src/features/home/components/common/thread-comment-input.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/shared/components/ui/button';
 import { Textarea } from '@/shared/components/ui/textarea';
-import { ImageIcon, SmileIcon } from 'lucide-react';
+import { ImageIcon, SmileIcon, X, Send } from 'lucide-react';
 import { useState } from 'react';
 import {
   Avatar,
@@ -57,8 +57,8 @@ export const ThreadCommentInput = ({
       )}
       onClick={(e) => e.stopPropagation()}
     >
-      <div className="flex items-center gap-6">
-        <Avatar className="mb-12 h-11 w-11 bg-warning-500">
+      <div className="flex items-start gap-4 sm:gap-6">
+        <Avatar className="mb-12 h-10 w-10 bg-warning-500 sm:h-11 sm:w-11">
           {user.pictureUploadLink && (
             <ImagePreview
               imagePath={user.pictureUploadLink}
@@ -69,7 +69,7 @@ export const ThreadCommentInput = ({
             />
           )}
           {!user.pictureUploadLink && (
-            <AvatarFallback className="bg-warning-500">
+            <AvatarFallback className="bg-warning-500 text-sm sm:text-base">
               {user.firstName
                 ?.split(' ')
                 .map((n) => n[0])
@@ -88,11 +88,11 @@ export const ThreadCommentInput = ({
               value={comment}
               onChange={(e) => setComment(e.target.value)}
               className={cn(
-                'min-h-[150px] resize-none rounded-lg bg-white text-base'
+                'min-h-[120px] resize-none rounded-lg bg-white text-base sm:min-h-[150px]'
               )}
               maxLength={characterLimit}
             />
-            <div className="absolute bottom-14 right-4 flex items-center gap-1 text-sm text-muted-foreground">
+            <div className="absolute bottom-14 right-3 flex items-center gap-1 text-xs text-muted-foreground sm:right-4 sm:text-sm">
               <SharedIcons.info className="h-4 w-4" />
               <span className={isOverLimit ? 'text-destructive' : ''}>
                 {remainingCharacters} / {characterLimit} characters
@@ -103,34 +103,44 @@ export const ThreadCommentInput = ({
               <div className="flex gap-1">
                 <button
                   type="button"
-                  className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
+                  className="cursor-not-allowed rounded-md p-1 opacity-50"
                   aria-label="Add image"
+                  disabled
+                  aria-disabled="true"
+                  title="Disabled"
                 >
                   <ImageIcon className="h-6 w-6 text-muted-foreground" />
                 </button>
                 <button
                   type="button"
-                  className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
+                  className="cursor-not-allowed rounded-md p-1 opacity-50"
                   aria-label="Add emoji"
+                  disabled
+                  aria-disabled="true"
+                  title="Disabled"
                 >
                   <SmileIcon className="h-6 w-6 text-muted-foreground" />
                 </button>
               </div>
 
-              <div className="flex gap-2">
+              <div className="flex items-center gap-2">
                 <Button
                   variant="outline"
                   onClick={onCancel}
-                  className="h-10 w-fit rounded-xl"
+                  className="h-9 w-9 rounded-full p-0 sm:h-10 sm:w-fit sm:rounded-xl sm:px-4"
+                  aria-label="Cancel"
                 >
-                  Cancel
+                  <X className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Cancel</span>
                 </Button>
                 <Button
                   onClick={handleSubmit}
-                  className="h-10 w-fit rounded-xl"
+                  className="h-9 w-9 rounded-full p-0 sm:h-10 sm:w-fit sm:rounded-xl sm:px-4"
                   disabled={isSubmitting || !comment.trim() || isOverLimit}
+                  aria-label="Post comment"
                 >
-                  Post Comment
+                  <Send className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Post Comment</span>
                 </Button>
               </div>
             </div>

packages/frontend/src/features/home/components/common/thread-searchbar.tsx

@@ -72,7 +72,7 @@ export const ThreadSearchbar = ({
             </div>
           </Button>
           <div className="absolute right-4 top-1/2 flex -translate-y-1/2 gap-1">
-            <button
+            {/* <button
               type="button"
               className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
               aria-label="Add image"
@@ -85,7 +85,7 @@ export const ThreadSearchbar = ({
               aria-label="Add emoji"
             >
               <SmileIcon className="h-6 w-6 text-muted-foreground" />
-            </button>
+            </button> */}
           </div>
         </div>
       </div>

packages/frontend/src/features/home/components/home.tsx

@@ -269,18 +269,18 @@ export const Home = () => {
   };
 
   return (
-    <div className="container-wide px-0" onClick={handleOutsideClick}>
-      <div className="grid grid-cols-12 gap-8">
+    <div className="container-wide px-4 md:px-0" onClick={handleOutsideClick}>
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-12 md:gap-8">
         {/* Left column - 1 part */}
-        <div className="sticky top-0 col-span-3 h-fit rounded-2xl border bg-card p-4">
+        <div className="order-1 col-span-1 h-fit rounded-2xl border bg-card p-4 md:sticky md:top-0 md:order-1 md:col-span-3">
           <HomeSidebar
             activeTab={activeTab}
             handleActiveTab={handleActiveTab}
           />
         </div>
 
         {/* Middle column */}
-        <div className="relative col-span-7 min-h-screen gap-4 overflow-y-auto rounded-2xl border bg-muted bg-neutral-light-100 p-4">
+        <div className="relative order-2 col-span-1 min-h-[60vh] gap-4 overflow-visible rounded-2xl border bg-neutral-light-100 p-4 md:order-2 md:col-span-7 md:overflow-y-auto">
           {viewThreads && selectedThread ? (
             <div className="flex flex-col gap-4">
               <IconButton

packages/frontend/src/features/home/components/main-card/base-thread-card.tsx

@@ -78,8 +78,8 @@ BaseThreadCard.Author = function ThreadCardAuthor({
           </AvatarFallback>
         )}
       </Avatar>
-      <div className="flex flex-col">
-        <span className="font-semibold">{name}</span>
+      <div className="flex min-w-0 flex-col">
+        <span className="truncate font-semibold">{name}</span>
         <span className="text-gray-500">
           {transformDateTimeToTimeAgo(timeAgo)}
         </span>

packages/frontend/src/features/home/components/main-card/thread-card.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/shared/components/ui/button';
-import { MessageSquare, Heart, Bookmark } from 'lucide-react';
+import { MessageSquare, Heart, Bookmark, Eye } from 'lucide-react';
 import Image from 'next/image';
 import { Thread } from '../../lib/mock-data';
 import { ThreadCardProvider } from './base-thread-card';
@@ -157,10 +157,12 @@ export const ThreadCard = ({
           <div className="flex items-center gap-2">
             <Button
               variant="secondary"
-              className="h-10 rounded-xl"
+              className="h-9 rounded-xl px-2 sm:h-10 sm:px-3"
               onClick={handleViewThread}
+              aria-label="View thread"
             >
-              View thread
+              <Eye className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">View thread</span>
             </Button>
 
             {/* {isOwner && (

packages/frontend/src/features/home/components/main-card/thread-input.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/shared/components/ui/button';
 import { Textarea } from '@/shared/components/ui/textarea';
-import { ImageIcon, SmileIcon } from 'lucide-react';
+import { ImageIcon, SmileIcon, X, Send } from 'lucide-react';
 import { useState } from 'react';
 import { Avatar, AvatarFallback } from '@/shared/components/ui/avatar';
 import { SharedIcons } from '@/shared/components/icons';
@@ -59,8 +59,8 @@ export const ThreadInput = ({
         className
       )}
     >
-      <div className="flex gap-6">
-        <Avatar className="h-11 w-11 bg-warning-500">
+      <div className="flex gap-4 sm:gap-6">
+        <Avatar className="h-10 w-10 bg-warning-500 sm:h-11 sm:w-11">
           {user?.pictureUploadLink && (
             <ImagePreview
               imagePath={user?.pictureUploadLink}
@@ -71,7 +71,7 @@ export const ThreadInput = ({
             />
           )}
           {!user?.pictureUploadLink && (
-            <AvatarFallback className="bg-warning-500">
+            <AvatarFallback className="bg-warning-500 text-sm sm:text-base">
               {user?.firstName
                 ?.split(' ')
                 ?.map((n) => n[0])
@@ -89,10 +89,10 @@ export const ThreadInput = ({
               placeholder="What's on your mind?"
               value={content}
               onChange={(e) => setContent(e.target.value)}
-              className="min-h-[400px] resize-none rounded-lg text-base"
+              className="min-h-[200px] resize-none rounded-lg text-base sm:min-h-[400px]"
               maxLength={characterLimit}
             />
-            <div className="absolute bottom-14 right-4 flex items-center gap-1 text-sm text-muted-foreground">
+            <div className="absolute bottom-14 right-3 flex items-center gap-1 text-xs text-muted-foreground sm:right-4 sm:text-sm">
               <SharedIcons.info className="h-4 w-4" />
               <span className={isOverLimit ? 'text-destructive' : ''}>
                 {remainingCharacters} / {characterLimit} characters
@@ -103,38 +103,48 @@ export const ThreadInput = ({
               <div className="flex gap-1">
                 <button
                   type="button"
-                  className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
+                  className="cursor-not-allowed rounded-md p-1 opacity-50"
                   aria-label="Add image"
+                  disabled
+                  aria-disabled="true"
+                  title="Disabled"
                 >
                   <ImageIcon className="h-6 w-6 text-muted-foreground" />
                 </button>
                 <button
                   type="button"
-                  className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
+                  className="cursor-not-allowed rounded-md p-1 opacity-50"
                   aria-label="Add emoji"
+                  disabled
+                  aria-disabled="true"
+                  title="Disabled"
                 >
                   <SmileIcon className="h-6 w-6 text-muted-foreground" />
                 </button>
               </div>
 
-              <div className="flex gap-2">
+              <div className="flex items-center gap-2">
                 <Button
                   onClick={handleCancel}
                   variant="outline"
-                  className="h-10 w-fit rounded-xl"
+                  className="h-9 w-9 rounded-full p-0 sm:h-10 sm:w-fit sm:rounded-xl sm:px-4"
+                  aria-label="Cancel"
                 >
-                  Cancel
+                  <X className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Cancel</span>
                 </Button>
                 <Button
                   onClick={handleSubmit}
-                  className="h-10 w-fit rounded-xl"
+                  className="h-9 w-9 rounded-full p-0 sm:h-10 sm:w-fit sm:rounded-xl sm:px-4"
                   disabled={
                     isSubmitting ||
                     (!content.trim() && attachments.length === 0) ||
                     isOverLimit
                   }
+                  aria-label="Post thread"
                 >
-                  Post Thread
+                  <Send className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Post Thread</span>
                 </Button>
               </div>
             </div>

packages/frontend/src/features/mentorship/components/common/mentor-card.tsx

@@ -32,7 +32,7 @@ const MentorCard = ({
   return (
     <div
       className={cn(
-        'flex h-[156px] w-full min-w-0 justify-between rounded-2xl border border-neutral-light-400 p-4 shadow-sm sm:min-w-[380px]',
+        'flex h-[156px] w-full min-w-0 max-w-full justify-between rounded-2xl border border-neutral-light-400 p-4 shadow-sm sm:min-w-[340px]',
         className
       )}
     >

packages/frontend/src/features/mentorship/components/common/mentorship-form.tsx

@@ -208,8 +208,16 @@ export const MentorshipForm = ({ title, description }: MentorshipFormProps) => {
                 variant="link"
                 onClick={() => setIsModalOpen(true)}
                 type="button"
+                className="w-full whitespace-normal break-words text-left sm:w-auto sm:whitespace-nowrap sm:text-center"
               >
-                View Mentorship Program Agreement to Proceed
+                <span className="sm:hidden">
+                  View Mentorship Program
+                  <br />
+                  Agreement to Proceed
+                </span>
+                <span className="hidden sm:inline">
+                  View Mentorship Program Agreement to Proceed
+                </span>
               </Button>
               <IconButton
                 className="w-full"