no transitions or animations and sleeker interface

packages/frontend/src/Index.tsx

@@ -43,7 +43,7 @@ function Index() {
     }, [selectedProject]);
 
     return (
-        <main className="w-full h-full p-2">
+        <main className="w-full h-full p-1">
             {/* header area */}
             <div className="flex gap-2">
                 <Select

packages/frontend/src/components/issue-detail-pane.tsx

@@ -14,9 +14,9 @@ export function IssueDetailPane({
 }) {
     return (
         <div className="flex flex-col">
-            <div className="flex flex-row items-center justify-end border-b">
+            <div className="flex flex-row items-center justify-end border-b h-[25px]">
-                <span className="w-full px-0.5">
+                <span className="w-full">
-                    <p className="text-sm w-fit px-0.75">{issueID(project.blob, issueData.Issue.number)}</p>
+                    <p className="text-sm w-fit px-1">{issueID(project.blob, issueData.Issue.number)}</p>
                 </span>
 
                 <Button variant={"dummy"} onClick={close} className="px-0 py-0 w-6 h-6">

packages/frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-    "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     {
         variants: {
             variant: {

packages/frontend/src/components/ui/select.tsx

@@ -35,7 +35,7 @@ function SelectTrigger({
                 "aria-invalid:border-destructive dark:hover:bg-muted/40",
                 "flex w-fit items-center justify-between gap-2 border",
                 "bg-transparent px-3 py-2 text-sm whitespace-nowrap",
-                "shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed",
+                "shadow-xs outline-none disabled:cursor-not-allowed",
                 "disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8",
                 "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex",
                 "*:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
@@ -64,8 +64,7 @@ function SelectContent({
             <SelectPrimitive.Content
                 data-slot="select-content"
                 className={cn(
-                    "bg-popover text-popover-foreground data-[state=open]:animate-in",
+                    "bg-popover text-popover-foreground",
-                    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
                     "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95",
                     "data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
                     "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",