Set max column to 3 and fix title margin

Add a sidebar with a logbook card to the security domain dashboard,
filtered by security entities (cameras, locks, alarm panels, covers,
binary sensors) and person entities. The sidebar uses the sections view
sidebar layout with mobile tab support for switching between devices
and activity views on narrow screens.

https://claude.ai/code/session_01MCjuARQfuyowAbJ9fwiEnH

src/panels/security/strategies/security-view-strategy.ts

@@ -1,16 +1,22 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { getAreasFloorHierarchy } from "../../../common/areas/areas-floor-hierarchy";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import {
   findEntities,
   generateEntityFilter,
   type EntityFilter,
 } from "../../../common/entity/entity_filter";
+import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { floorDefaultIcon } from "../../../components/ha-floor-icon";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
-import type { LovelaceSectionRawConfig } from "../../../data/lovelace/config/section";
+import type {
+  LovelaceSectionConfig,
+  LovelaceSectionRawConfig,
+} from "../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
+import type { LogbookCardConfig } from "../../lovelace/cards/types";
 import { computeAreaTileCardConfig } from "../../lovelace/strategies/areas/helpers/areas-strategy-helper";
 
 export interface SecurityViewStrategyConfig {
@@ -226,10 +232,55 @@ export class SecurityViewStrategy extends ReactiveElement {
       sections.push(section);
     }
 
+    // Build sidebar with activity log
+    const hasLogbook = isComponentLoaded(hass, "logbook");
+
+    // Collect person entity IDs
+    const personEntities = Object.keys(hass.states).filter(
+      (entityId) => computeStateDomain(hass.states[entityId]) === "person"
+    );
+
+    const logbookEntityIds = [...entities, ...personEntities];
+
+    const sidebarSection: LovelaceSectionConfig | undefined =
+      hasLogbook && logbookEntityIds.length > 0
+        ? {
+            type: "grid",
+            cards: [
+              {
+                type: "heading",
+                heading: hass.localize(
+                  "ui.panel.lovelace.strategy.security.activity"
+                ),
+                heading_style: "title",
+              } as LovelaceCardConfig,
+              {
+                type: "logbook",
+                target: {
+                  entity_id: logbookEntityIds,
+                },
+                hours_to_show: 24,
+                grid_options: { columns: 12 },
+              } satisfies LogbookCardConfig,
+            ],
+          }
+        : undefined;
+
     return {
       type: "sections",
-      max_columns: 2,
+      max_columns: 3,
       sections: sections,
+      ...(sidebarSection && {
+        sidebar: {
+          sections: [sidebarSection],
+          content_label: hass.localize(
+            "ui.panel.lovelace.strategy.security.devices"
+          ),
+          sidebar_label: hass.localize(
+            "ui.panel.lovelace.strategy.security.activity"
+          ),
+        },
+      }),
     };
   }
 }

src/translations/en.json

@@ -8092,7 +8092,8 @@
           },
           "security": {
             "devices": "Devices",
-            "other_devices": "Other devices"
+            "other_devices": "Other devices",
+            "activity": "Activity"
           },
           "climate": {
             "devices": "Devices",