fix: long room names displaying (#177)

xgeekshq · Sep 11, 2023 · c236ebd · c236ebd
1 parent a3035c5
commit c236ebd
Showing 1 changed file with 29 additions and 17 deletions.
diff --git a/packages/web-ui/components/rooms.tsx b/packages/web-ui/components/rooms.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { apiClient } from '@/api/apiClient';
@@ -11,6 +11,11 @@ import { useAuth } from '@clerk/nextjs';
 import { Lock } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { CreateRoomForm } from '@/components/create-room-form';
 
@@ -60,22 +65,29 @@ export function Rooms({ rooms }: RoomsProps) {
       <ScrollArea className="flex-1 p-2">
         <div className="space-y-1">
           {rooms.map((room) => (
-            <Link key={`${room.id}`} href={`/rooms/${room.id}`}>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="w-full justify-between"
-              >
-                <p
-                  className={`max-w-[140px] overflow-hidden text-clip ${
-                    room.id === params.room ? 'font-bold' : 'font-normal'
-                  }`}
-                >
-                  {room.name}
-                </p>
-                {room.isPrivate && <Lock className="h-4 w-4" />}
-              </Button>
-            </Link>
+            <HoverCard key={room.id}>
+              <HoverCardTrigger asChild>
+                <Link href={`/rooms/${room.id}`}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-between"
+                  >
+                    <p
+                      className={`w-[140px] truncate text-left ${
+                        room.id === params.room ? 'font-bold' : 'font-normal'
+                      }`}
+                    >
+                      {room.name}
+                    </p>
+                    {room.isPrivate && <Lock className="h-4 w-4" />}
+                  </Button>
+                </Link>
+              </HoverCardTrigger>
+              <HoverCardContent>
+                <div>{room.name}</div>
+              </HoverCardContent>
+            </HoverCard>
           ))}
         </div>
       </ScrollArea>