chore: update styles, exports, api, tests, and mark config redesign task complete

- configStyles.ts: add listDetailRoot, listPane, listItem, listItemSelected,
  detailPane style slots
- index.ts: export ConfigListDetail and RawConfigSection
- api/config.ts: add writeFilterFile and writeActionFile API helpers
- setupTests.ts: add ResizeObserver and matchMedia mocks for Fluent UI v9
- ConfigPageLogPath.test.tsx: update to render inside FluentProvider
- Docs/Tasks.md: mark config view redesign task as complete

frontend/src/components/config/configStyles.ts

@@ -12,6 +12,71 @@ export const useConfigStyles = makeStyles({
     padding: tokens.spacingVerticalXXL,
     maxWidth: "1100px",
   },
+  // -------------------------------------------------------------------------
+  // List/Detail layout (ConfigListDetail component)
+  // -------------------------------------------------------------------------
+  /** Root flex-row container for the two-pane list/detail layout. */
+  listDetailRoot: {
+    display: "flex",
+    flexDirection: "row",
+    gap: tokens.spacingHorizontalM,
+    minHeight: "400px",
+    "@media (max-width: 900px)": {
+      flexDirection: "column",
+    },
+  },
+  /** Fixed-width left pane with scrollable item list. */
+  listPane: {
+    width: "280px",
+    flexShrink: "0",
+    overflowY: "auto",
+    borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
+    paddingRight: tokens.spacingHorizontalS,
+    "@media (max-width: 900px)": {
+      width: "100%",
+      borderRight: "none",
+      borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+      paddingRight: "0",
+      paddingBottom: tokens.spacingVerticalS,
+      overflowY: "visible",
+    },
+  },
+  /** A single clickable item in the left pane. */
+  listItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    borderRadius: tokens.borderRadiusMedium,
+    cursor: "pointer",
+    userSelect: "none",
+    overflow: "hidden",
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground2,
+    },
+    ":focus-visible": {
+      outline: `2px solid ${tokens.colorBrandBackground}`,
+      outlineOffset: "2px",
+    },
+  },
+  /** Additional styles applied to the currently selected list item. */
+  listItemSelected: {
+    backgroundColor: tokens.colorNeutralBackground1Selected,
+    borderLeft: `3px solid ${tokens.colorBrandBackground}`,
+    paddingLeft: `calc(${tokens.spacingHorizontalM} - 3px)`,
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Selected,
+    },
+  },
+  /** Right pane that shows detail content for the selected item. */
+  detailPane: {
+    flex: "1",
+    overflowY: "auto",
+    paddingLeft: tokens.spacingHorizontalM,
+    "@media (max-width: 900px)": {
+      paddingLeft: "0",
+    },
+  },
   header: {
     marginBottom: tokens.spacingVerticalL,
   },
@@ -176,6 +241,11 @@ export function injectGlobalStyles(): void {
       from { opacity: 0; transform: scale(0.95); }
       to   { opacity: 1; transform: scale(1); }
     }
+    /* ConfigListDetail responsive: show dropdown on narrow screens */
+    @media (max-width: 900px) {
+      .bangui-list-dropdown { display: block !important; }
+      .bangui-list-items    { display: none   !important; }
+    }
   `;
   document.head.appendChild(style);
 }