Move create task button to tasks section and fix alignment

The create task button consumed unnecessary space on mobile devices because
it was pushed under the primary title. Moving to the task list makes better
use of the view port.

Secondly there's now horrizontal rules under the tasks list heading and create
button and the line separating tasks extends the full width of the bounding box.

Author: chrisdoherty4

AGENTS.md

@@ -51,8 +51,10 @@ Prioritize clean code:
 Code should follow a hexagonal architecture. Avoid packages/module names such as common, util and
 const. Instead focus on colocating code based on the feature or capability it belongs to.
 
-Before implementing a feature or refactor, talk through your design to provide an opportunity for
-feedback.
+Do not implement any changes without sharing your proposal. This includes refactors, styling changes,
+and new functionality. Include a summary where you explain the problem back to the user and provide
+an overview of your proposed changes. Additionally include a details section with specifics on what
+you plan to do.
 
 ### Testing & Linting
 

custom_components/maint/frontend/main.js

@@ -192,7 +192,6 @@ export class MaintPanel extends LitElement {
   protected render() {
     const hasEntries = this.dataState.entries.length > 0;
     const formDisabled = !this.dataState.selectedEntryId;
-    const createDisabled = formDisabled || this.busy;
 
     return html`
       <div class="container">
@@ -201,14 +200,6 @@ export class MaintPanel extends LitElement {
             <h1>${this.panelText("title")}</h1>
             <p class="subtext">${this.panelText("subtitle")}</p>
           </div>
-          <button
-            type="button"
-            class="button-primary"
-            ?disabled=${createDisabled}
-            @click=${this.openCreateModal}
-          >
-            ${this.panelText("buttons.create")}
-          </button>
         </div>
         ${this.error ? html`<div class="error global-error">${this.error}</div>` : nothing}
         ${hasEntries
@@ -223,22 +214,45 @@ export class MaintPanel extends LitElement {
   }
 
   private renderTasksSection(formDisabled: boolean) {
+    const createDisabled = formDisabled || this.busy;
+    const header = html`
+      <div class="tasks-section-header">
+        <h2>${this.panelText("section_tasks")}</h2>
+        <button
+          type="button"
+          class="button-primary tasks-create-button"
+          ?disabled=${createDisabled}
+          @click=${this.openCreateModal}
+        >
+          ${this.panelText("buttons.create")}
+        </button>
+      </div>
+      <div class="tasks-section-divider" role="presentation"></div>
+    `;
+
     if (formDisabled) {
       return html`<section class="tasks-section">
-        <h2>${this.panelText("section_tasks")}</h2>
-        <p class="info">${this.panelText("info_enable_tracking")}</p>
+        ${header}
+        <div class="tasks-section-content">
+          <p class="info tasks-section-empty">${this.panelText("info_enable_tracking")}</p>
+        </div>
       </section>`;
     }
 
-    return this.taskListFeature.render({
-      tasks: this.dataState.tasks,
-      hass: this.hass,
-      entryId: this.dataState.selectedEntryId ?? null,
-      busy: this.busy,
-      editing: Boolean(this.editState.taskId),
-      panelText: this.panelText.bind(this),
-      localizeText: this.localizeText.bind(this)
-    });
+    return html`<section class="tasks-section">
+      ${header}
+      <div class="tasks-section-content">
+        ${this.taskListFeature.render({
+          tasks: this.dataState.tasks,
+          hass: this.hass,
+          entryId: this.dataState.selectedEntryId ?? null,
+          busy: this.busy,
+          editing: Boolean(this.editState.taskId),
+          panelText: this.panelText.bind(this),
+          localizeText: this.localizeText.bind(this)
+        })}
+      </div>
+    </section>`;
   }
 
   private renderCreateModal(formDisabled: boolean) {

custom_components/maint/frontend/main.js.map

@@ -63,6 +63,40 @@ export const styles = css`
 
   .tasks-section {
     margin-top: 12px;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .tasks-section-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 20px;
+  }
+
+  .tasks-section-header h2 {
+    margin: 0;
+    flex: 1;
+  }
+
+  .tasks-create-button {
+    margin-left: auto;
+  }
+
+  .tasks-section-divider {
+    height: 1px;
+    width: 100%;
+    background: var(--divider-color);
+  }
+
+  .tasks-section-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tasks-section-empty {
+    margin: 0;
+    padding: 14px 20px;
   }
 
   select,
@@ -107,7 +141,6 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     gap: 0;
-    margin-top: 12px;
   }
 
   .task-row {
@@ -132,6 +165,7 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     gap: 12px;
+    padding-left: 20px;
   }
 
   .task-description-line {
@@ -193,19 +227,16 @@ export const styles = css`
     flex-direction: column;
     align-items: flex-end;
     gap: 6px;
-    margin-left: 12px;
     min-width: 140px;
+    padding-right: 20px;
+    box-sizing: border-box;
   }
 
 .action-buttons {
   display: flex;
   gap: 8px;
 }
 
-.tasks-section h2 {
-  margin-bottom: 12px;
-}
-
   .icon-button {
     background: none;
     color: var(--primary-text-color);