feat(task-view): implement dynamic metadata positioning

Add intelligent layout system that positions task metadata inline with
short content or below with multi-line content. Includes:

- New contentMetadataContainer with flex-wrap layout
- Dynamic height detection using line-height comparison
- CSS classes for single-line and multi-line content modes
- Smooth transitions using Obsidian's toggleClass API
- Responsive design for both list and tree view components

The layout automatically adapts based on content length, improving
readability while maintaining compact display for short tasks.

Author: Quorafind

src/components/task-view/listItem.ts

@@ -23,6 +23,7 @@ export class TaskListItemComponent extends Component {
 	private markdownRenderer: MarkdownRendererComponent;
 	private containerEl: HTMLElement;
 	private contentEl: HTMLElement;
+	private contentMetadataContainer: HTMLElement;
 
 	private metadataEl: HTMLElement;
 
@@ -183,19 +184,22 @@ export class TaskListItemComponent extends Component {
 			cls: "task-item-container",
 		});
 
+		// Create content-metadata container for dynamic layout
+		this.contentMetadataContainer = this.containerEl.createDiv({
+			cls: "task-content-metadata-container",
+		});
+
 		// Task content
-		this.contentEl = createDiv({
+		this.contentEl = this.contentMetadataContainer.createDiv({
 			cls: "task-item-content",
 		});
 
-		this.containerEl.appendChild(this.contentEl);
-
 		// Make content clickable for editing
 		this.registerContentClickHandler();
 
 		this.renderMarkdown();
 
-		this.metadataEl = this.containerEl.createDiv({
+		this.metadataEl = this.contentMetadataContainer.createDiv({
 			cls: "task-item-metadata",
 		});
 
@@ -746,6 +750,35 @@ export class TaskListItemComponent extends Component {
 
 		// Re-register the click event for editing after rendering
 		this.registerContentClickHandler();
+
+		// Update layout mode after content is rendered
+		// Use requestAnimationFrame to ensure the content is fully rendered
+		requestAnimationFrame(() => {
+			this.updateLayoutMode();
+		});
+	}
+
+	/**
+	 * Detect content height and update layout mode
+	 */
+	private updateLayoutMode() {
+		if (!this.contentEl || !this.contentMetadataContainer) {
+			return;
+		}
+
+		// Get the line height of the content element
+		const computedStyle = window.getComputedStyle(this.contentEl);
+		const lineHeight = parseFloat(computedStyle.lineHeight) || parseFloat(computedStyle.fontSize) * 1.4;
+		
+		// Get actual content height
+		const contentHeight = this.contentEl.scrollHeight;
+		
+		// Check if content is multi-line (with some tolerance)
+		const isMultiLine = contentHeight > lineHeight * 1.2;
+		
+		// Apply appropriate layout class using Obsidian's toggleClass method
+		this.contentMetadataContainer.toggleClass("multi-line-content", isMultiLine);
+		this.contentMetadataContainer.toggleClass("single-line-content", !isMultiLine);
 	}
 
 	/**

src/components/task-view/treeItem.ts

@@ -38,6 +38,7 @@ export class TaskTreeItemComponent extends Component {
 
 	private markdownRenderer: MarkdownRendererComponent;
 	private contentEl: HTMLElement;
+	private contentMetadataContainer: HTMLElement;
 	private taskMap: Map<string, Task>;
 
 	// Use shared editor manager instead of individual editors
@@ -267,8 +268,13 @@ export class TaskTreeItemComponent extends Component {
 			cls: "task-item-container",
 		});
 
+		// Create content-metadata container for dynamic layout
+		this.contentMetadataContainer = taskItemContainer.createDiv({
+			cls: "task-content-metadata-container",
+		});
+
 		// Task content with markdown rendering
-		this.contentEl = taskItemContainer.createDiv({
+		this.contentEl = this.contentMetadataContainer.createDiv({
 			cls: "task-item-content",
 		});
 
@@ -278,7 +284,7 @@ export class TaskTreeItemComponent extends Component {
 		this.renderMarkdown();
 
 		// Metadata container
-		const metadataEl = taskItemContainer.createDiv({
+		const metadataEl = this.contentMetadataContainer.createDiv({
 			cls: "task-metadata",
 		});
 
@@ -823,6 +829,35 @@ export class TaskTreeItemComponent extends Component {
 
 		// Re-register the click event for editing after rendering
 		this.registerContentClickHandler();
+
+		// Update layout mode after content is rendered
+		// Use requestAnimationFrame to ensure the content is fully rendered
+		requestAnimationFrame(() => {
+			this.updateLayoutMode();
+		});
+	}
+
+	/**
+	 * Detect content height and update layout mode
+	 */
+	private updateLayoutMode() {
+		if (!this.contentEl || !this.contentMetadataContainer) {
+			return;
+		}
+
+		// Get the line height of the content element
+		const computedStyle = window.getComputedStyle(this.contentEl);
+		const lineHeight = parseFloat(computedStyle.lineHeight) || parseFloat(computedStyle.fontSize) * 1.4;
+		
+		// Get actual content height
+		const contentHeight = this.contentEl.scrollHeight;
+		
+		// Check if content is multi-line (with some tolerance)
+		const isMultiLine = contentHeight > lineHeight * 1.2;
+		
+		// Apply appropriate layout class using Obsidian's toggleClass method
+		this.contentMetadataContainer.toggleClass("multi-line-content", isMultiLine);
+		this.contentMetadataContainer.toggleClass("single-line-content", !isMultiLine);
 	}
 
 	/**

src/styles/task-list.css

@@ -68,6 +68,45 @@
 	text-overflow: ellipsis;
 }
 
+/* Dynamic content-metadata container */
+.task-content-metadata-container {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: var(--size-2-2);
+	transition: all 0.2s ease;
+}
+
+/* Single line content layout - horizontal */
+.task-content-metadata-container.single-line-content {
+	flex-direction: row;
+	align-items: center;
+}
+
+.task-content-metadata-container.single-line-content .task-item-content {
+	flex: 1;
+	min-width: 0; /* Allow content to shrink */
+}
+
+.task-content-metadata-container.single-line-content .task-item-metadata {
+	flex-shrink: 0;
+	margin-top: 0;
+}
+
+/* Multi-line content layout - vertical */
+.task-content-metadata-container.multi-line-content {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.task-content-metadata-container.multi-line-content .task-item-content {
+	width: 100%;
+}
+
+.task-content-metadata-container.multi-line-content .task-item-metadata {
+	margin-top: var(--size-2-2);
+}
+
 .task-item-metadata {
 	display: flex;
 	align-items: center;

src/styles/tree-view.css

@@ -100,6 +100,45 @@
 	color: var(--text-muted);
 }
 
+/* Dynamic content-metadata container for tree view */
+.tree-task-item .task-content-metadata-container {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: var(--size-2-2);
+	transition: all 0.2s ease;
+}
+
+/* Single line content layout - horizontal */
+.tree-task-item .task-content-metadata-container.single-line-content {
+	flex-direction: row;
+	align-items: center;
+}
+
+.tree-task-item .task-content-metadata-container.single-line-content .task-item-content {
+	flex: 1;
+	min-width: 0; /* Allow content to shrink */
+}
+
+.tree-task-item .task-content-metadata-container.single-line-content .task-metadata {
+	flex-shrink: 0;
+	margin-top: 0;
+}
+
+/* Multi-line content layout - vertical */
+.tree-task-item .task-content-metadata-container.multi-line-content {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.tree-task-item .task-content-metadata-container.multi-line-content .task-item-content {
+	width: 100%;
+}
+
+.tree-task-item .task-content-metadata-container.multi-line-content .task-metadata {
+	margin-top: 4px;
+}
+
 /* Task metadata */
 .task-metadata {
 	display: flex;