make the annotations view panel a little more compact

Author: sabaimran

client/src/components/Annotation.tsx

@@ -44,7 +44,7 @@ export default function Annotation({
     if (isEditing && !readonly) {
         return (
             <div className="group relative">
-                <div className="flex items-start gap-4 p-4 bg-background dark:bg-card border border-border rounded-xl shadow-sm">
+                <div className="flex items-start gap-4 px-4 py-3 bg-background dark:bg-card border border-border rounded-xl shadow-sm">
                     {/* Avatar */}
                     <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${isAI
                         ? 'bg-blue-200 dark:bg-blue-800'
@@ -105,7 +105,7 @@ export default function Annotation({
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
         >
-            <div className="relative flex items-start gap-4 p-4 rounded-xl border bg-background dark:bg-card border-border hover:border-border/80 dark:hover:border-border hover:shadow-sm dark:hover:shadow-lg transition-all duration-300">
+            <div className="relative flex items-start gap-4 px-4 py-3 rounded-xl border bg-background dark:bg-card border-border hover:border-border/80 dark:hover:border-border hover:shadow-sm dark:hover:shadow-lg transition-all duration-300">
 
                 {/* Avatar */}
                 <div className="relative">

client/src/components/AnnotationsView.tsx

@@ -130,7 +130,7 @@ function HighlightThread({
 
 	return (
 		<Card
-			className={`transition-colors cursor-pointer rounded-lg p-2 ${activeBgColor}`}
+			className={`transition-colors cursor-pointer rounded-lg px-2 ${activeBgColor}`}
 			onClick={onClick}
 		>
 			<CardContent className="p-0">
@@ -214,7 +214,7 @@ function AnnotationsToolbar({
 	readonly,
 }: AnnotationsToolbarProps) {
 	return (
-		<div className="flex items-center gap-3 p-3 border-b border-border bg-muted/20">
+		<div className="flex items-center gap-3 px-3 border-b border-border bg-muted/20">
 			<Select value={selectedHighlightType} onValueChange={onHighlightTypeFilter}>
 				<SelectTrigger className="w-[140px] h-8">
 					<SelectValue placeholder="All types" />
@@ -340,7 +340,7 @@ export function AnnotationsView(
 
 	if (sortedHighlights.length === 0) {
 		return (
-			<div className="flex flex-col gap-4 p-4 text-center">
+			<div className="flex flex-col gap-4 text-center">
 				<p className="text-secondary-foreground text-sm">
 					{readonly ? "There are no annotations for this paper." : "Highlight text in the document to begin annotating."}
 				</p>

client/src/components/SidePanelContent.tsx

@@ -815,7 +815,7 @@ export function SidePanelContent({
                     <div className="flex-grow h-full overflow-hidden">
                         {
                             rightSideFunction === 'Notes' && (
-                                <div className='p-2 w-full h-full flex flex-col'>
+                                <div className='p-4 w-full h-full flex flex-col'>
                                     <div className="flex justify-between items-center mb-2 flex-shrink-0">
                                         <div className="flex items-center gap-2">
                                             <TooltipProvider>
@@ -890,7 +890,7 @@ export function SidePanelContent({
                         }
                         {
                             rightSideFunction === 'Annotations' && user && (
-                                <div className={`flex flex-col ${heightClass} md:px-2 overflow-y-auto`}>
+                                <div className={`flex flex-col ${heightClass} overflow-y-auto`}>
                                     <AnnotationsView
                                         annotations={annotations}
                                         highlights={highlights}