refactor(ui): improve layout and accessibility in various components

- Updated the grid layout in the Home page for better responsiveness.
- Adjusted tabIndex handling in MultiSelect component to enhance accessibility.
- Added minimum width to the TopChannels table for consistent display.
- Refined notification recipient placeholder logic for cleaner code.

src/app/(home)/page.tsx

@@ -51,7 +51,7 @@ export default async function Home({ searchParams }: PropsType) {
 
         <RegionLabels />
 
-        <div className="col-span-12 grid xl:col-span-8">
+        <div className="col-span-12 grid min-w-0 xl:col-span-8">
           <Suspense fallback={<TopChannelsSkeleton />}>
             <TopChannels />
           </Suspense>

src/components/FormElements/MultiSelect.tsx

@@ -152,13 +152,13 @@ function MultiSelect<T extends FieldValues>({
           ref={combinedRef}
           onClick={open}
           onBlur={onBlur}
-          tabIndex={0}
+          tabIndex={disabled ? -1 : 0}
           className={cn(
             "w-full rounded-lg border-[1.5px] border-stroke bg-transparent outline-none transition focus:border-primary disabled:cursor-default disabled:bg-gray-2 data-[active=true]:border-primary dark:border-dark-3 dark:bg-dark-2 dark:focus:border-primary dark:disabled:bg-dark dark:data-[active=true]:border-primary",
             error && "border-red focus:border-red dark:border-red",
             "flex min-h-[50px] cursor-pointer flex-wrap items-center gap-2 px-3 py-2",
             height === "sm" && "min-h-[42px]",
-            disabled && "pointer-events-none opacity-60",
+            disabled && "!cursor-not-allowed opacity-60",
           )}
           data-active={active}
         >

src/components/Tables/top-channels/index.tsx

@@ -22,7 +22,7 @@ export async function TopChannels({ className }: { className?: string }) {
           Top Channels
         </h2>
 
-        <Table>
+        <Table className="min-w-[640px]">
           <TableHeader>
             <TableRow className="border-none uppercase [&>th]:text-center">
               <TableHead className="min-w-[120px] !text-left">Source</TableHead>
@@ -39,7 +39,8 @@ export async function TopChannels({ className }: { className?: string }) {
                 className="text-center text-base font-medium text-dark dark:text-white"
                 key={channel.name + i}
               >
-                <TableCell className="flex min-w-fit items-center gap-3">
+                <TableCell className="min-w-fit whitespace-nowrap">
+                  <div className="flex items-center gap-3">
                   <Image
                     src={channel.logo}
                     className="size-8 rounded-full object-cover"
@@ -49,6 +50,7 @@ export async function TopChannels({ className }: { className?: string }) {
                     role="presentation"
                   />
                   <div className="">{channel.name}</div>
+                  </div>
                 </TableCell>
 
                 <TableCell>{compactFormat(channel.visitors)}</TableCell>

src/components/forms/notifications/CreateNotification.tsx

@@ -82,9 +82,7 @@ const CreateNotificationForm = () => {
             label="recipient"
             items={recipient ?? []}
             placeholder={
-              recipient && recipient.length > 0
-                ? "Choose recipients"
-                : ""
+              recipient && recipient.length > 0 ? "Choose recipients" : ""
             }
             name="recipient"
           />