feat: adjust some styles of url list

masl · Apr 12, 2024 · 29f4b54 · 29f4b54
1 parent 8f8f6cb
commit 29f4b54
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/web/src/components/ShortenForm.tsx b/web/src/components/ShortenForm.tsx
@@ -88,12 +88,12 @@ export default function ShortenForm() {
       </Form>
       <div className="grid gap-4">
         {shortUrls.map((short, index) =>
-          <div className="flex items-center justify-between p-4 bg-gray-100 rounded-lg" key={index}>
+          <div className="flex items-center justify-between space-x-2 p-4 rounded-lg outline outline-1 outline-gray-100" key={index}>
             <div>
               <p className="text-sm">{short.shortUrl}</p>
-              <p className="text-xs text-gray-500 tracking-tighter">{short.longUrl}</p>
+              <p className="text-xs text-gray-500 tracking-tighter break-all">{short.longUrl}</p>
             </div>
-            <Button variant="ghost" size="icon" onClick={copyUrl} data-index={index}>
+            <Button variant="outline" size="icon" onClick={copyUrl} data-index={index} className="shrink-0">
               <CopyIcon className="h-4 w-4" />
             </Button>
           </div>