Adopt shared WebUI layout primitives

webui/src/features/settings/QuickAccessSettingsPanel.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import {
   Button,
   DismissibleAlert,
+  FormSection,
   IconButton,
   i18nMessage,
   LoadingFrame,
@@ -208,9 +209,7 @@ export default function QuickAccessSettingsPanel({
       ) : null}
 
       <LoadingFrame loading={loading} label="i18n:govoplan-quick-access.loading">
-        <section className="quick-access-settings-section">
-          <h3>i18n:govoplan-quick-access.categories</h3>
-          <div className="quick-access-preference-list">
+        <FormSection className="quick-access-settings-section" title="i18n:govoplan-quick-access.categories" contentClassName="quick-access-preference-list">
             {categories.map((category, index) => (
               <PreferenceRow
                 key={category.id}
@@ -228,12 +227,9 @@ export default function QuickAccessSettingsPanel({
                 last={index === categories.length - 1}
               />
             ))}
-          </div>
-        </section>
+        </FormSection>
 
-        <section className="quick-access-settings-section">
-          <h3>i18n:govoplan-quick-access.registered_tools</h3>
-          <div className="quick-access-preference-list">
+        <FormSection className="quick-access-settings-section" title="i18n:govoplan-quick-access.registered_tools" contentClassName="quick-access-preference-list">
             {categories.flatMap((category) => {
               const categoryTools = tools.filter((tool) => tool.category_id === category.id);
               const toolIds = categoryTools.map((tool) => tool.id);
@@ -257,8 +253,7 @@ export default function QuickAccessSettingsPanel({
               ));
             })}
             {!tools.length ? <p className="quick-access-empty">i18n:govoplan-quick-access.no_registered_tools</p> : null}
-          </div>
-        </section>
+        </FormSection>
       </LoadingFrame>
     </div>
   );