Update description sidebar padding and title

src/lib/components/sidebar/DescriptionSidebar.svelte

@@ -14,40 +14,25 @@
 
 <div class="description-sidebar">
 	<div class="content-section">
-		{#if title}
+		<div class="content-inner">
-			<div class="party-title">
+			{#if description}
-				<h2>{title}</h2>
+				<div class="description-content">
-			</div>
+					<DescriptionRenderer content={description} truncate={false} />
-		{/if}
+				</div>
-
+			{:else}
-		{#if description}
+				<div class="empty-state">
-			<div class="description-content">
+					<p>No description available for this party.</p>
-				<DescriptionRenderer content={description} truncate={false} />
+					{#if canEdit}
-			</div>
+						<Button variant="primary" onclick={onEdit}>Add Description</Button>
-		{:else}
+					{/if}
-			<div class="empty-state">
+				</div>
-				<p>No description available for this party.</p>
+			{/if}
-				{#if canEdit}
+		</div>
-					<Button
-						variant="primary"
-						onclick={onEdit}
-					>
-						Add Description
-					</Button>
-				{/if}
-			</div>
-		{/if}
 	</div>
 
 	{#if canEdit && description}
 		<div class="actions-section">
-			<Button
+			<Button variant="secondary" onclick={onEdit} class="edit-button">Edit Description</Button>
-				variant="secondary"
-				onclick={onEdit}
-				class="edit-button"
-			>
-				Edit Description
-			</Button>
 		</div>
 	{/if}
 </div>
@@ -62,35 +47,14 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		padding: $unit-2x;
 		color: var(--text-primary);
 	}
 
 	.content-section {
 		flex: 1;
 		overflow-y: auto;
-	}
 
-	.party-title {
+		// Custom scrollbar styling - on the outer container
-		margin-bottom: $unit-3x;
-		padding-bottom: $unit-2x;
-		border-bottom: 1px solid var(--button-bg);
-
-		h2 {
-			margin: 0;
-			font-size: $font-xlarge;
-			font-weight: $bold;
-			color: var(--text-primary);
-			line-height: 1.2;
-		}
-	}
-
-	.description-content {
-		// Allow the content to scroll if it's very long
-		overflow-y: auto;
-		padding-right: $unit;
-
-		// Custom scrollbar styling
 		&::-webkit-scrollbar {
 			width: 6px;
 		}
@@ -110,6 +74,10 @@
 		}
 	}
 
+	.content-inner {
+		padding: 0 $unit-2x;
+	}
+
 	.empty-state {
 		display: flex;
 		flex-direction: column;
@@ -128,11 +96,12 @@
 
 	.actions-section {
 		margin-top: $unit-2x;
-		padding-top: $unit-2x;
+		padding: $unit-2x;
+		padding-bottom: $unit-2x;
 		border-top: 1px solid var(--button-bg);
 
 		:global(.edit-button) {
 			width: 100%;
 		}
 	}
-</style>
+</style>

src/lib/features/description/openDescriptionSidebar.svelte.ts

@@ -11,8 +11,8 @@ interface DescriptionSidebarOptions {
 export function openDescriptionSidebar(options: DescriptionSidebarOptions) {
 	const { title, description, canEdit = false, onEdit } = options
 
-	// Open the sidebar with the description component
+	// Open the sidebar with the party title as the header
-	sidebar.openWithComponent('Description', DescriptionSidebar, {
+	sidebar.openWithComponent(title, DescriptionSidebar, {
 		title,
 		description,
 		canEdit,