fix: respect Kanban column width setting on mobile (#1279, #1282)

- Remove mobile media query constraints that overrode user's column width setting
- Add spacing between task title and metadata in inline task widgets

docs/releases/unreleased.md

@@ -26,12 +26,16 @@ Example:
 
 ## Changed
 
+- (#1282) Added spacing between task title and metadata in inline task widgets for improved readability
+  - Thanks to @3zra47 for the suggestion
 - Custom status icons now display in all context menus (task context menu, batch operations menu, and task creation/edit modals)
 - Added embedded video guide for Google Calendar OAuth setup in documentation
   - Thanks to [@antoneheyward](https://www.youtube.com/@antoneheyward) for the tutorial
 
 ## Fixed
 
+- (#1279) Fixed Kanban column width setting not being respected on mobile devices
+  - Thanks to @guncav for reporting
 - (#1026, #1177) Fixed recurring task completion from Base views recording the wrong date for users in negative UTC offset timezones (e.g., PST/PDT) when completing tasks in the evening
   - The bug caused `complete_instances` to record the next day instead of the user's current calendar day
   - Thanks to @3zra47 and @nslee123 for reporting and providing detailed reproduction steps

src/bases/KanbanView.ts

@@ -526,6 +526,11 @@ export class KanbanView extends BasesViewBase {
 	private async renderFlat(
 		groups: Map<string, TaskInfo[]>
 	): Promise<void> {
+		if (!this.boardEl) return;
+
+		// Set CSS variable for column width (allows responsive override)
+		this.boardEl.style.setProperty('--kanban-column-width', `${this.columnWidth}px`);
+
 		// Render columns without swimlanes
 		const visibleProperties = this.getVisibleProperties();
 

styles/kanban-view.css

@@ -432,27 +432,18 @@
         gap: var(--tn-spacing-sm);
     }
     
-    .tasknotes-plugin .kanban-view__column {
-        min-width: 240px;
-        max-width: 280px;
-    }
 }
 
 @media (max-width: 480px) {
     .tasknotes-plugin .kanban-view {
         padding: var(--tn-spacing-xs);
     }
-    
+
     .tasknotes-plugin .kanban-view__board {
         padding: var(--tn-spacing-xs);
         gap: var(--tn-spacing-xs);
     }
     
-    .tasknotes-plugin .kanban-view__column {
-        min-width: 200px;
-        max-width: 240px;
-    }
-    
     .tasknotes-plugin .kanban-view__column-header {
         padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
     }

styles/task-card-bem.css

@@ -1132,6 +1132,7 @@
     display: inline-block !important;
     font-size: var(--tn-font-size-sm);
     margin: 0;
+    margin-left: 0.5em; /* Space between title and metadata */
     padding: 0;
     vertical-align: text-bottom;
     position: relative;