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/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>